3.0.6 • Published 14 days ago
@vuesimple/vs-toast v3.0.6
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 incomponent:{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');
3.0.6
14 days ago
3.0.4
7 months ago
3.0.3
7 months ago
3.0.2
7 months ago
3.0.1
7 months ago
3.0.5
7 months ago
3.0.0
7 months ago
1.4.15
8 months ago
1.4.14
8 months ago
1.4.18
8 months ago
1.4.13
1 year ago
1.4.12
1 year ago
1.4.9
2 years ago
1.4.11
2 years ago
1.4.8
2 years ago
1.4.10
2 years ago
1.4.6
2 years ago
1.4.5
2 years ago
1.4.4
2 years ago
1.4.3
2 years ago
1.4.2
2 years ago
1.4.1
2 years ago
1.3.41
3 years ago
1.4.0
3 years ago
1.3.40
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago