gridsome-plugin-vue-toasted

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