Vuetify Toast

Simple toast service based on Vuetify snackbar component. (~1kB gzip)

for Vuetify version 1.x

Installation

npm install --save vuetify-toast

Demo

Demo: https://pzs.github.io/vuetify-toast

Usage

Bundler (Webpack, Rollup)

import vuetifyToast from 'vuetify-toast'
 
vuetifyToast.info('This is an info toast');
 
vuetifyToast.success('The document has been saved.');
 
vuetifyToast.show({
    text: 'Test message',
    icon: 'information',
    color: 'warning',
    timeout: 10000,
    dismissible: false
});

Browser

<!-- Include after Vue and Vuetify -->
 
<!-- Local files -->
<script src="vuetify-toast/dist/vuetify-toast.js"></script>
 
<!-- Or from CDN -->
<script src="https://unpkg.com/vuetify-toast"></script>
 
<script>
    vuetifyToast.success('Awesome!');
</script> 

Documentation

Methods

• vuetifyToast.show(options)
• vuetifyToast.success(text, [options])
• vuetifyToast.error(text, [options])
• vuetifyToast.info(text, [options])
• vuetifyToast.close()

Options

• text (String) The text to show in the snackbar
• icon (String) If you want to use an icon to the left in the snackbar
• color (String) Color of the snackbar, you can use any valid vuetify class. Default 'info'
• timeout (Number) Timeout in milliseconds, default: 3000
• dismissible (Boolean) default true

Default options

You can override the default options at any time:

vuetifyToast.defaultOptions.timeout = 5000;

Development

Build

Bundle the js of to the dist folder:

npm run build

Publishing

The prepublish hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository.

# Bump the version first 
# It'll also commit it and create a tag 
npm version
# Push the bumped package and tags 
git push --follow-tags
# Ship it 
npm publish

License

MIT