DEV Community

Cover image for How to create a global snackbar using Nuxt, Vuetify and Vuex.

How to create a global snackbar using Nuxt, Vuetify and Vuex.

Stephann on October 10, 2019

TL;DR Code here Intro Snackbars, also known as alerts or toasts, are present in every application. They are handy to show im...
Collapse
 
dzvid profile image
David

For those using vue and dont have Nuxt inject:

1 - Create a snackbar plugin receiving vuex store as option:

// src/plugins/snackbar.js
const snackbarPlugin = {
  install: (Vue, { store }) => {
    if (!store) {
      throw new Error('Please provide vuex store.');
    }

    Vue.prototype.$snackbar = {
      showMessage: function ({
        content = '',
        color = ''
      }) {
        store.commit(
          'snackbar/showMessage',
          { content, color },
          { root: true }
        );
      }
    };
  },
};
export default snackbarPlugin;
Enter fullscreen mode Exit fullscreen mode

2 - At your main.js, pass your plugin to Vue:

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import snackbarPlugin from './plugins/snackbar';

Vue.use(snackbarPlugin, { store })

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');
Enter fullscreen mode Exit fullscreen mode
Collapse
 
stephann profile image
Stephann

Thanks for this. I added link for this comment on post for other people who doesn't use Nuxt.

Collapse
 
vishnupm profile image
vishnu p manoharan

I Set up this notifier, and it's working on the components and page, but while I try to trigger $notifier from a another plugin, the snack bar didn't shown!

Collapse
 
stephann profile image
Stephann

You will have to search about how inject a plugin in another plugin. I'm not using Nuxt anymore, so I don't know how to solve this problem.

Collapse
 
entrptaher profile image
Md Abu Taher

This is great!

Interesting way to show code with link to specific commit. It shows exactly what changed in case anyone wants to compare it with this tutorial.

One thing I instantly thought upon seeing this, "what? all those libraries just to show a snackbar?" :D Who knew the web development would become so broad!

Collapse
 
stephann profile image
Stephann

Yeah, front end development can be complex sometimes haha.

Collapse
 
juliageek profile image
juli4g33k

This was the first more complex task I had to implement for one of my previous employers and which I failed miserably, precisely because I went for the naive approach to create a component and import it in every other component where I needed to spawn a snackbar. I ended polluting the entire codebase with snippets of code for the snackbar.

Thanks for sharing your approach, it's easier and more elegant.

Collapse
 
mghazy profile image
Mohammad Reza Ghazy

excellent job Stephann ! important step to code reuse ! also it is possible to use this method for confirmation dialog.. which always you have to ask when you want to delete an item..
on the other hand we have three file creation and two file update for just a "snack-bar" message !
we can also use third-party library like sweetalert2. they did good job !

Collapse
 
fiyinanne profile image
Fiyinfoluwa Akinsiku

This was really helpful, thanks!

Also if anyone is getting this error Property '$notifier' does not exist on type 'CombinedVueInstance<Vue..., a workaround is to use this ( this as any ).$notifier.showMessage(...) instead.

Collapse
 
thorvald profile image
Japanesen • Edited

I'm having issues with the :app setting, no matter what I do it doesn't respect my footer / header etc. and just goes on top of them. :app="true" or :app="false", none of it works. Any ideas why? (Nuxt + vuetify)

Collapse
 
chi89 profile image
Chi89

Thanks a lot.

This is precisely what I'm looking for.

Collapse
 
mrid_boy profile image
Akshay Anand

Amazing post !!

I was just wondering as to how we can do this without using nuxt and just plain vuejs

Collapse
 
chandher05 profile image
Chandher Shekar

Did you happen to figure out how to do this?

Collapse
 
mrid_boy profile image
Akshay Anand

Since nuxt was not a requirement for me. I ended up implementing it using plain vuejs and vuex

Collapse
 
softmarshmallow profile image
UZU, J

i am using nuxt. still getting this.
Uncaught (in promise) TypeError: Cannot read property '$notifier' of undefined

Collapse
 
realsaeedhassani profile image
Saeed Hassani Borzadaran

Thanks Stephann :)

Collapse
 
pratik149 profile image
Pratik Rane

Perfect! This is exactly what I was looking for. I liked how quasar gave this out of the box, it's a handy feature to have.

Collapse
 
thealoneprogrammer profile image
Sujith D

This is what exactly I was looking for, great explained 😍😍

Collapse
 
danielhalenone profile image
Daniel

man I love you

Collapse
 
rajuahmed1705 profile image
Raju Ahmed

thank you. it's a great tutorial. I having trouble the colour doesn't work.

Collapse
 
ajcarrillo profile image
Andrés Carrillo

Thank you so much!!!

Collapse
 
artugit profile image
Artu

Great instruction, the ready to use functionality

Collapse
 
moxie1776 profile image
Jeff Bluemel

Fantastic, works perfect and was well explained.