๐ฅช Toast component for Gridsome

A Gridsome plugin built on top of Vue-toasted, one of the best toast plugin available for VueJS.
Now you can also use it in Gridsome! ๐ฅ๐ฅ
Introduction
Vue-toasted is a cool Toast plugin for any Vue-related project, and this plugin enhances the possibility of using it in Gridsome project ๐ฏ.
๐ฅ There are icons built-in supported such as FontAwesome, Material Icons etc.
๐ฅ And it's responsive too!
Demo
Check out the official demo.

๐ Install
Yarn
yarn add gridsome-plugin-vue-toasted
Npm
npm i gridsome-plugin-vue-toasted --save
๐ป Usage
Simply add the following code inside gridsome.config.js
module.exports = {
plugins: [
{
use: 'gridsome-plugin-vue-toasted',
options: {}, // Optional - setup global options for the toast
}
]
}
More information on options API, check out the documentation here
Example: To set up toast displayed from bottom center of the page position: 'bottom-center'
, one toast as a time singletone: true
, and auto disappear after 5 secs duration: 5000
.
module.exports = [
//... - other plugins
{
use: 'gridsome-plugin-vue-toasted',
options: {
position: 'bottom-center',
singleton: true,
duration: 5000,
}
}
]
You can use directly in the component as normal, with a few lines of code:
//...
methods: {
showToast() {
//Info toast
this.$toasted.info("I'm a toast ๐ฅช !", /* options */)
//Error toast
this.$toasted.error("Error", /* options */)
//Success toast
this.$toasted.success("Success", /* options */)
//Or just simple toast
this.$toasted.show("Hello World", /* options */)
}
}
๐งผ Clearing toast(s):
this.$toasted.clear()
๐
Register and personalize a toast dynamically
this.$toasted.register(
'my_cool_toast', //name of the toast
"I'm a cool toast", //message of the toast,
//options of the toast
{
type: 'success',
icon: 'success', //icon to use for the toast
}
)
APIs
A full list of official API documentation here.
Credits
I only hold credit for creating the Gridsome plugin wrapper ๐. All other credits go to the awesome team and contributors behind Vue Toasted project and external library (if any).
Enjoy ๐ฅช!