A Beautiful Notification Library For Vue.js 3

Description:

A beautiful notification library for Vue.js 3 that, enables you to create animated notifications in your application with features like, close button, custom templates and custom styles, and its easy to integrate in your project.

How can I use it?

1. You will need to install the component with npm or yarn.

#npm
npm install –save @kyvg/vue3-notification

#yarn
yarn add @kyvg/vue3-notification

2. Add the dependencies in your main.js. Like this:

import { createApp } from ‘vue’
import Notifications from ‘@kyvg/vue3-notification’

const app = createApp({…})
app.use(Notifications)

3. Now, add the global component to your App.vue. Like following.

<notifications />

4. Now, you will need to write the code that will trigger notifications from your .vue files.

#basic method
this.$notify(“Hello user!”);

#with options
this.$notify({
title: “Important message”,
text: “Hello user!”,
});

5. Or, you may want to trigger notifications from other files then you should do like this.

import { notify } from “@kyvg/vue3-notification”;

notify({
title: “Authorization”,
text: “You have been logged in!”,
});

The post A Beautiful Notification Library For Vue.js 3 appeared first on Lipku.com.

Flatlogic Admin Templates banner

Create Notification Bell For Vue.js Application with vue-notification-bell

Description:

If you are looking to create notification bell for Vue.js application then, you are at right place. Here, you are going to know that, how you can implement the same in your Vue application.

How to use it?

1. First, you will need to install the component using npm.

npm install vue-notification-bell –save

2. Import the component in your file, like this.

import NotificationBell from ‘vue-notification-bell’

3. Post that, create notification bell.

<template>
<div id=”your-component”>
<notification-bell />
<!– Using Component –>
</div>
</template>

4. Now, the Vue.js code to create notification bell.

export default {
name: ‘YourComponentName’,
// …
components: {
NotificationBell // Registering Component
}
// …
}

The post Create Notification Bell For Vue.js Application with vue-notification-bell appeared first on Lipku.com.

Flatlogic Admin Templates banner