🥪 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

1yarn add gridsome-plugin-vue-toasted

Npm

1npm i gridsome-plugin-vue-toasted --save

💻 Usage

Simply add the following code inside gridsome.config.js

1module.exports = {
2    plugins: [
3        {
4            use: 'gridsome-plugin-vue-toasted',
5            options: {}, // Optional - setup global options for the toast
6        }
7    ]
8}

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.

1module.exports = [
2    //... - other plugins
3    {
4        use: 'gridsome-plugin-vue-toasted',
5        options:  {
6            position: 'bottom-center',
7            singleton: true,
8            duration: 5000,
9        }
10    }
11]

You can use directly in the component as normal, with a few lines of code:

1//...
2methods: {
3  showToast() {
4    //Info toast
5    this.$toasted.info("I'm a toast 🥪 !", /* options */)
6
7    //Error toast
8    this.$toasted.error("Error", /* options */)
9
10    //Success toast
11    this.$toasted.success("Success", /* options */)
12
13    //Or just simple toast
14    this.$toasted.show("Hello World", /* options */)
15  }
16}

🧼 Clearing toast(s):

1this.$toasted.clear()

💅 Register and personalize a toast dynamically

1this.$toasted.register(
2  'my_cool_toast', //name of the toast
3  "I'm a cool toast", //message of the toast,
4  //options of the toast
5  {
6    type: 'success',
7    icon: 'success', //icon to use for the toast
8  }
9)

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