Vue Simple Toast

🗃 A simple vue toast. Perfect for all your toast/notification scenarios.

A light weight vue plugin built groundup.

📺 Live Demo

Code Sandbox: Link

🛠 Install

npm i @vuesimple/vs-toast

🚀 Usage

<script>
  import VsToast from '@vuesimple/vs-toast';

  export default {
    methods: {
      showToast() {
        VsToast.show({
          title: 'Success Title',
          message: 'Success message',
          variant: 'success',
        });
      },
    },
  };
</script>

🌎 CDN

<script src="https://unpkg.com/@vuesimple/vs-toast@<version>/dist/vs-toast.min.js"></script>

<script>
  export default {
    methods: {
      showToast() {
        VsToast.show({
          title: 'Success Title',
          message: 'Success message',
          variant: 'success',
        });
      },
    },
  };
</script>

Nuxt.js

Nuxt Code Snippet

After installation,

• Create a file /plugins/vs-toast.js

  import Vue from 'vue';
  import VsToast from '@vuesimple/vs-toast';
  
  Vue.component('vs-toast', VsToast);

• Update nuxt.config.js

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-toast', mode: 'client' }
      ...
    ]
  }

• In the page/ component

<script>
  export default {
    methods: {
      showToast() {
        VsToast.show({
          title: 'Success Title',
          message: 'Success message',
          variant: 'success',
        });
      },
    },
  };
</script>

Note

• For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
• You can also do import VsToast from '@vuesimple/vs-toast' & add in component:{VsToast} and use it within component, without globally installing in plugin folder.

⚙ Options

| Name | Type | Default | Description | | --------- | ------- | ------------ | ---------------------------------------------------------------------------------------------------------- | | variant | String | - | Available variants; success, warning, error, info, secondary | | title | String | - | Toast title | | message | String | - | Toast body/content/description | | position | String | top-center | Available positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right | | timeout | Number | 5000 | Hide timeout | | showClose | Boolean | false | Show/Hide close button | | type | String | toast | Available types: toast, alert | | animation | String | slide | Default class applied for animation: vs-toast--transition-{animation-name} | | isSticky | Boolean | false | Whether toast should close automatically or not |

🌟 Tips

You can also directly call success, warning & error functions as below:

VsToast.success('Success Message');

// Or

VsToast.error('Error Message');

// Or

VsToast.warning('Warning Message');