VueSimple

Toast

A simple set of toast

codesandboxDemolinkgithubGitHublink

Install ​

bash
npm i @vuesimple/vs-toast
npm i @vuesimple/vs-toast

Usage ​

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

  export default {
    methods: {
      showToast() {
        VsToast.show({
          title: 'Success Title',
          message: 'Success message',
          variant: 'success',
        });
      },
    },
  };
</script>
<script>
  import VsToast from '@vuesimple/vs-toast';

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

CDN ​

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

TIP

Replace <version> with a version number in the above url.

html
<script>
  export default {
    methods: {
      showToast() {
        VsToast.show({
          title: 'Success Title',
          message: 'Success message',
          variant: 'success',
        });
      },
    },
  };
</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

    javascript
    import Vue from 'vue';
import VsToast from '@vuesimple/vs-toast';

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

Vue.component('vs-toast', VsToast);

  • Update nuxt.config.js

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

  • In the page/ component

html
<script>
  export default {
    methods: {
      showToast() {
        VsToast.show({
          title: 'Success Title',
          message: 'Success message',
          variant: 'success',
        });
      },
    },
  };
</script>
<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 ​

NameTypeDefaultDescription
variantString-Available variants; success, warning, error, info, secondary
titleString-Toast title
messageString-Toast body/content/description
positionStringtop-centerAvailable positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
timeoutNumber5000Hide timeout
showCloseBooleanfalseShow/Hide close button
typeStringtoastAvailable types: toast, alert
animationStringslideDefault class applied for animation: vs-toast--transition-{animation-name}
isStickyBooleanfalseWhether toast should close automatically or not

Tips ​

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

javascript
VsToast.success('Success Message');

// Or

VsToast.error('Error Message');

// Or

VsToast.warning('Warning Message');
VsToast.success('Success Message');

// Or

VsToast.error('Error Message');

// Or

VsToast.warning('Warning Message');