@deveodk/vue-toastr

    1.1.0 • Public • Published

    @Deveodk/vue-toastr

    npm vue2

    A easy to use toastr plugin inspired by CodeSeven/toastr made without jquery with pure vue.js

    Demo

    See a functioning demo deveo demo site

    Installation

    npm install --save @deveodk/vue-toastr

    Usage

    Bundler (Webpack, Rollup)

    import Vue from 'vue'
    import VueToastr from '@deveodk/vue-toastr'
    // You need a specific loader for CSS files like https://github.com/webpack/css-loader
    // If you would like custom styling of the toastr the css file can be replaced
    import '@deveodk/vue-toastr/dist/@deveodk/vue-toastr.css'
     
    Vue.use(VueToastr)

    Browser

    <!-- From CDN -->
    <link rel="stylesheet" href="https://unpkg.com/@deveodk/vue-toastr/dist/@deveodk/vue-toastr.min.css"></link>
    <script src="https://unpkg.com/@deveodk/vue-toastr/dist/@deveodk/vue-toastr.min.js"></script>

    Configuration

    The toastr defaults can be configured in the following way

    Available positions:

    'toast-top-right'
    'toast-bottom-right'
    'toast-bottom-left'
    'toast-top-left'
    'toast-top-full-width'
    'toast-bottom-full-width'
    'toast-top-center'
    'toast-bottom-center'

    Available types:

    'success'
    'error'
    'info'
    'warning'
    import VueToastr from '@deveodk/vue-toastr'
    Vue.use(VueToastr, {
        defaultPosition: 'toast-bottom-left',
        defaultType: 'info',
        defaultTimeout: 1000
    })

    Usage

    The $toastr prototype hook and how to use it.

    // Make a success toastr
    this.$toastr('success', 'i am a toastr success', 'hello')
    // Make a error toastr
    this.$toastr('error', 'i am a toastr error', 'hello')
    // Make a warning toastr
    this.$toastr('warning', 'i am a toastr warning', 'hello')
    // Make a info toastr
    this.$toastr('info', 'i am a toastr info', 'hello')
    // Make a toastr with custom properties
    this.$toastr('add', {
      title: 'Heyy', // Toast Title
      msg: 'I am a custom property toastr' // Message
      timeout: 1000, // Timeout in ms
      position: 'toast-bottom-full-width', // Toastr position
      type: 'info', // Toastr type
      closeOnHover: true, // On mouse over stop timeout can be boolean; default true
      clickClose: false, // On click toast close can be boolean; default false
      // Available callbacks
      onCreated: () => console.log('toast was created'),
      onClicked: () => console.log('toast was clicked'),
      onClosed: () => console.log('toast was closed'),
      onMouseOver: () => console.log('toast was moused over'),
      onMouseOut: () => console.log('mouse left the toast')
    })

    example

    // Using toastr in real world application
    <link rel="stylesheet" href="/@deveodk/vue-toastr/dist/vue-toastr.css"></link>
    <script src="/@deveodk/vue-toastr/dist/vue-toastr.js"></script>
    <script>
    new Vue({
      el: 'body',
      mounted: function () {
          this.showToastr()
       },
      methods: {
        showToastr: function () {
            this.$toastr('success', 'it works!', 'Yeahh')
        }
      }
    })
    </script>

    Special thanks

    A special thanks to s4l1h for creating the original package. About 30% of the source code is forked from vue-toastr

    License

    MIT

    Deveo

    Install

    npm i @deveodk/vue-toastr

    DownloadsWeekly Downloads

    1,861

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    113 kB

    Total Files

    14

    Last publish

    Collaborators

    • deveodk