DEV Community

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

View post
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.