Simple and dependency free notification plugin.
npm i vue-toastifyimport { createApp } from 'vue';
import plugin from 'vue-toastify';
import 'vue-toastify/index.css';
import type { Settings } from 'vue-toastify';
const app = createApp({ });
app.use<Settings>(plugin, { });
app.mount('#app');- ToastOptions - settings per toast
- Settings - global settings (default settings here)
- ToastPluginAPI - methods available on the
useToast()composable - Events - events emitted by the plugin
Styles include a 'dark'(default) and a 'light' theme. If you would like to create your own styles you may use the following helpers:
import { createVtTheme, getCssRules } from 'vue-toastify';
// this will create a stylesheet if doesn't exists and insert it into the head
createVtTheme('myThemeName', '#8f6b42');
// then you can set the theme of the status or the global settings
// alternatively, you can get an array of css rules using getCssRules
getCssRules('myThemeName', '#8f6b42').forEach(rule => {...});
// this will give you a good starting point to customise the themeYou may create some methods on the useToast() so it will shortcut any repetition you may have in your app. To register them add a customNotifications key to the settings when registering the plugin.
app.use<Settings>(plugin, {
customNotifications: {
authenticationError: {
body: 'Authentication error',
// ... rest of the toast options here
}
}
});
// then later you can use it as
useToast().authenticationError();import type { ToastPluginAPI, CustomMethods } from 'vue-toastify';
declare module 'vue-toastify' {
interface MyMethods extends CustomMethods {
authenticationError(): string;
}
function useToast(): ToastPluginAPI & MyMethods;
}The plugin emits events that you can listen to which allows for using callbacks at different points in the toast's lifecycle.
import { useVtEvents, useToast } from 'vue-toastify';
const toast = useToast().success({ body: 'Hello world', canTimeout: true });
useVtEvents().once('vtPaused', payload => {
if (payload.id === toast.id) {
// do something
}
})