Vue Notification

Component for displaying notifications with help of also included Vuex module.

Please note that this component uses Vue 3 composition api

Installation

npm install -D @ssdcode/vue-notification

Usage

First register the module with your vuex store - there are 2 options:

notification: displays only a single notification at any given time replacing previous with the new one

import Vue from 'vue';
import Vuex from 'vuex';
import { notification } from '@ssdcode/vue-notification';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: { notification },
});

notifications: displays multiple notifications as they are dispatched

import Vue from 'vue';
import Vuex from 'vuex';
import { notifications } from '@ssdcode/vue-notification';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: { notification: notifications },
});

Register NotificationContainer component and add it to your application's html structure.

import { NotificationContainer } from '@ssdcode/vue-notification';


new Vue({
  store,
  components: { NotificationContainer },
  render: h => h(App),
}).$mount('#app');

Example layout using tailwindcss:

<notification-container
  class="fixed inset-x-0 top-0"
  v-slot="{ notification, dismiss }"
>
  <div
    class="relative"
    :class="[notification.type === 'error' ? 'bg-red-600' : 'bg-green-600']"
  >
    <div class="max-w-screen-xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
      <div class="pr-16 sm:text-center sm:px-16">
        <p class="font-medium text-white">
          <span v-html="notification.message"></span>
        </p>
      </div>
      <div
        class="absolute inset-y-0 right-0 pt-1 pr-1 flex items-start sm:pt-1 sm:pr-2 sm:items-start"
      >
        <button
          type="button"
          class="flex p-2 rounded-md focus:outline-none transition ease-in-out duration-150"
          :class="[
            notification.type === 'error'
              ? 'hover:bg-red-500 focus:bg-red-500'
              : 'hover:bg-green-500 focus:bg-green-500',
          ]"
          aria-label="Dismiss"
          @click="dismiss"
        >
          <svg
            class="h-6 w-6 text-white"
            stroke="currentColor"
            fill="none"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
</notification-container>

You can now call it from anywhere using:

<template>
    <button type="button" @click="add({type: 'success', message: 'All good!'})">SHOW NOTIFICATION</button>
</template>
<script>
import { mapActions } from 'vuex';

export default {
  name: 'DemoComponent',
  setup() {
    const { add } = mapActions('notification', ['add']);

    return { add };
  },
};
</script>

Tests

You can execute tests by calling

npm run test:unit

Contributions

Contributions are welcome - please make sure all PRs have their associated test.