Vue.js 3 NotiVue Tutorial to Show Toast & Notification Alert Messages in Browser Using TypeScript

main.ts

import { createApp } from 'vue';
import { createNotivue } from 'notivue';

import App from './App.vue';

import 'notivue/notification.css'; // For built-in Notification
import 'notivue/animations.css'; // For default animations

const notivue = createNotivue();

const app = createApp(App);
app.use(notivue);
app.mount('#app');

import { createApp } from 'vue';

import { createNotivue } from 'notivue';

import App from './App.vue';

import 'notivue/notification.css'; // For built-in Notification

import 'notivue/animations.css'; // For default animations

const notivue = createNotivue();

const app = createApp(App);

app.use(notivue);

app.mount('#app');

App.vue

<template>
  <div id="app">
    <h1>Notivue Example: Toast Notifications</h1>

    <!-- Buttons to trigger notifications -->
    <div class="button-group">
      <button @click="push.success('Success! Operation completed successfully.')">
        Show Success
      </button>
      <button @click="push.error('Error! Something went wrong.')">
        Show Error
      </button>
      <button @click="push.info('Info! This is an informational message.')">
        Show Info
      </button>
      <button @click="push.warning('Warning! Be cautious about this.')">
        Show Warning
      </button>
    </div>

    <!-- Notivue Notification Container -->
    <Notivue v-slot="item">
      <Notification :item="item" />
    </Notivue>
  </div>
</template>

<script setup>
import { Notivue, Notification, push } from 'notivue';
</script>

<h1>Notivue Example: Toast Notifications</h1>

Show Success

</button>

Show Error

</button>

Show Info

</button>

Show Warning

</button>

</div>

</Notivue>

</div>

</template>

import { Notivue, Notification, push } from 'notivue';

</script>

Vue.js 3 NotiVue Tutorial to Show Toast & Notification Alert Messages in Browser Using TypeScript

Comments

Leave a Reply Cancel reply

Archives