Vuetify notification compononent

notification.js

export const state = {
  type: "blue-grey",
  message: "",
  timeout: 3000,
  show: false
};

export const mutations = {
  SHOW_NOTIFICATION(state, notification) {
    state.type = notification.type;
    state.message = notification.message;
    if (notification.type && notification.message) {
      state.show = true;
    }
    if (notification.timeout) {
      state.timeout = notification.timeout;
    }
  },
};

export const actions = {
  showNotification({ commit }, notification) {
    commit("SHOW_NOTIFICATION", notification);
  }
};

Notification.vue

<template>
  <div class="text-center">
    <v-snackbar
      v-model="notification.show"
      :timeout="notification.timeout"
      :color="notification.type"
    >
      {{ notification.message }}

      <template v-slot:action="{ attrs }">
        <v-btn dark text v-bind="attrs" @click="notification.show = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Notification",
  computed: {
    ...mapState(["notification"])
  }
};
</script>