@Symbol-it/nuxtjs-notification-module

Notification module for nuxtjs

Features

- Notification store

Installation

Npm

npm i @symbol-it/nuxtjs-notification-module --save

Declare the module in ./nuxt.config.js

  modules: [
    ...
    '@symbol-it/nuxtjs-notification-module'
    ...
  ],

Methods

Client side use this.$notification.<method>

Server side use $notification.<method>

Methods	Description
addNotification(type, message)	Push notification in store
addSuccess(message)	Push success notification in store
addError(message)	Push error notification in store
addInfo(message)	Push info notification in store
addWarning(message)	Push warning notification in store
resetNotification()	Clear notification in store
getType()	Retrieve default types notification

Implementations

• Create your vue notification component

<template>
  <v-alert :type="type">
    {{ message }}
  </v-alert>
</template>

<script>

export default {
  name: 'Notification',
  props: {
    message: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: () => 'info',
      validator (value) {
        return [
          'success',
          'warning',
          'info',
          'error'
        ].includes(value)
      }
    }
  }
}
</script>

• Add your component in your layout

<template>
  <v-app>
    <v-main>
      <v-container>
        <notification v-if="notification" :type="notification.type" :message="notification.message" />
        <nuxt />
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import Notification from '../components/notification/Notification.vue'

export default {
  components: {
    Notification,
  },
  computed: {
    notification () {
      return this.$notification.getNotification()
    }
  },
  watch: {
    '$route' (to, from) {
      this.$notification.resetNotification()
    }
  }
}
</script>

• Push notification

<template>
   <form-login @submit="login" />
</template>
<script>
import FormLogin from '../components/form/FormLogin.vue'
export default {
  components: {
    FormLogin
  },
  methods: {
    async login (form) {
      try {
        await this.$strapi.login({ identifier: form.email, password: form.password })
        await this.$router.push({ path: '/dashboard' })
      } catch (e) {
        this.$notification.addError('my error')
      }
    },
  },
}
</script>