Vue.js 3 vue3-notification Tutorial to Show Toast & Notification Alert Messages in Browser Using TS

main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";

import Notifications from '@kyvg/vue3-notification';

const app = createApp(App);
app.use(Notifications);

// Mount the app
app.mount("#app");

import { createApp } from "vue";

import "./style.css";

import App from "./App.vue";

import Notifications from '@kyvg/vue3-notification';

const app = createApp(App);

app.use(Notifications);

// Mount the app

app.mount("#app");

App.vue

<template>
  <div id="app">
    <button @click="showNotification">Show Notification</button>
    <!-- Notifications Component -->
    <notifications />
  </div>
</template>

<script>
import { useNotification } from '@kyvg/vue3-notification';
export default {
  name: 'App',
  setup() {
    const { notify } = useNotification();
    const showNotification = () => {
      // Displaying a notification
      notify({
        title: "Important message",
        text: "Hello user! This is a notification.",
        type: 'success', // You can change the type to 'warn', 'error', or 'info'
        duration: 5000, // Duration in milliseconds
      });
    };
    return {
      showNotification,
    };
  },
};
</script>

<button @click="showNotification">Show Notification</button>

</div>

</template>

import { useNotification } from '@kyvg/vue3-notification';

export default {

name: 'App',

setup() {

const { notify } = useNotification();

const showNotification = () => {

// Displaying a notification

notify({

title: "Important message",

text: "Hello user! This is a notification.",

type: 'success', // You can change the type to 'warn', 'error', or 'info'

duration: 5000, // Duration in milliseconds

});

};

return {

showNotification,

};

</script>

Vue.js 3 vue3-notification Tutorial to Show Toast & Notification Alert Messages in Browser Using TS

Comments

Leave a Reply Cancel reply

Archives