Create global vuetify snackbar

components/Snackbar.vue

@@ -0,0 +1,28 @@
+<template>
+  <v-snackbar v-model="show" :color="color">
+    {{ message }}
+    <v-btn text @click="show = false">Close</v-btn>
+  </v-snackbar>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      show: false,
+      message: '',
+      color: ''
+    }
+  },
+
+  created () {
+    this.$store.subscribe((mutation, state) => {
+      if (mutation.type === 'snackbar/showMessage') {
+        this.message = state.snackbar.content
+        this.color = state.snackbar.color
+        this.show = true
+      }
+    })
+  }
+}
+</script>

layouts/default.vue

@@ -85,11 +85,18 @@
     >
       <span>&copy; 2019</span>
     </v-footer>
+    <Snackbar></Snackbar>
   </v-app>
 </template>
 
 <script>
+import Snackbar from '~/components/Snackbar'
+
 export default {
+  components: {
+    Snackbar
+  },
+
   data () {
     return {
       clipped: false,

nuxt.config.js

@@ -30,6 +30,7 @@ export default {
   ** Plugins to load before mounting the App
   */
   plugins: [
+    '~/plugins/notifier.js'
   ],
   /*
   ** Nuxt.js dev-modules

pages/index.vue

@@ -73,6 +73,9 @@
           >
             Continue
           </v-btn>
+          <v-btn color="primary" @click="showSnackbar">
+            Show snackbar
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-flex>
@@ -88,5 +91,11 @@ export default {
     Logo,
     VuetifyLogo
   },
+
+  methods: {
+    showSnackbar () {
+      this.$notifier.showMessage({ content: 'Hello, snackbar', color: 'info' })
+    }
+  }
 }
 </script>

plugins/notifier.js

@@ -0,0 +1,7 @@
+export default ({ app, store }, inject) => {
+  inject('notifier', {
+    showMessage ({ content = '', color = '' }) {
+      store.commit('snackbar/showMessage', { content, color })
+    }
+  })
+}

store/snackbar.js

@@ -0,0 +1,11 @@
+export const state = () => ({
+  content: '',
+  color: ''
+})
+
+export const mutations = {
+  showMessage (state, payload) {
+    state.content = payload.content
+    state.color = payload.color
+  }
+}