Notification Quark

This quark is a simple vue plugin with notification component and added sparkles in the form of a store that handles the behaviour.
It is a simple notification system that can be used to display messages to the user on plethora events happening in your app.

Installation

1npm install notification-quark --save

Setup

main.js

1//...
2import Notifications from "notification-quark"
3import "notification-quark/dist/style.css"
4
5//...
6const app = createApp(App)
7//...
8
9app.use(Notifications)

First step is to import the quark and its styles in the main javascript file and use it as a plugin in your app.

App.vue

1<script setup>
2//...
3
4</script>
5
6<template>
7  <!-- ... -->
8  <Notifications />
9</template>

Next step is to place the component whereever you want to display the notifications in your app, for example in the top most container, in your App.vue

Basic Usage

Component.vue

1<script setup>
2  //...
3  import { inject } from 'vue'
4  
5  const notificationStore = inject('notificationStore') // Inject the store from the plugin
6
7  // For example load success notification when the component is mounted
8  onMounted(() => {
9    notificationStore.addNotification({
10      type: 'success', // type of notification, can be success, error, warning, information(default value)
11      message: 'Component mounted successfully', // your message displayed to the user
12      timeout: 3000 // optional custom lifespan of one notification, default is 5000ms
13    })
14  })
15  
16</script>
17
18<template>
19  <!-- ... -->
20</template>

This will display success(greenish) notification with the message "Component mounted successfully" where you put the Notifications component in your app.

Docs

Full docs at https://www.quarksjs.com/library/notification-quark

Source code at https://github.com/SamuelSlavik/NotificationQuark

SUPPORT

Please support us by starring the repository or donate at https://www.quarksjs.com/donate to help us maintain the project and cover hosting expenses.