Based on vue-snotify for Vue 2.
The following vue-snotify
features are missing from this fork:
- Custom HTML notifications
- Dark and simple themes
npm i vue3-snotify
yarn add vue3-snotify
In main.ts
:
...
import snotify from 'vue3-snotify';
import 'vue3-snotify/style';
const app = createApp(App);
app.use(snotify);
app.provide('snotify', app.config.globalProperties.$snotify);
app.mount('#app');
In App.vue
:
<div>
<MyApp />
<vue-snotify />
</div>
<script>
...
methods: {
showToast() {
this.$snotify.error('Hello, world!');
},
},
...
</script>
<template>
<button :onClick="showToast" />
</template>
<script setup>
import type { SnotifyService } from 'vue3-snotify';
const snotify = inject('snotify');
const showToast = snotify.success('Hello, world!');
</script>
<template>
<button :onClick="showToast" />
</template>
In plugins/snotify.ts
:
import { defineNuxtPlugin } from '#app';
import Snotify, { type SnotifyService } from 'vue3-snotify';
import 'vue3-snotify/style';
declare module '#app' {
interface NuxtApp {
$snotify: SnotifyService;
}
}
export default defineNuxtPlugin(nuxtApp => {
const { vueApp } = nuxtApp;
vueApp.use(Snotify);
nuxtApp.provide('snotify', vueApp.config.globalProperties.$snotify);
});
In composables/useSnotify.ts
:
export function useSnotify() {
const { $snotify } = useNuxtApp();
return $snotify;
}
Usage:
<script setup>
const snotify = useSnotify();
const showToast = snotify.success('Hello, world!');
</script>
<template>
<button :onClick="showToast" />
</template>
- Restore HTML functionality on SnotifyService
- Export Dark and Simple themes
- Unit tests