🥪 Toast component for Gridsome

!Vue Toasted logo

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!

$3

Check out the official demo.

!interactive demo of vue toasted

🛠 Install

$3

``bash
yarn add gridsome-plugin-vue-toasted
`

$3

`bash
npm i gridsome-plugin-vue-toasted --save
`

💻 Usage

Simply add the following code inside gridsome.config.js

`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.

`js
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:

`js
//...
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):

`js
this.$toasted.clear()
`

💅 Register and personalize a toast dynamically

`js
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 🥪!