🔥Vue Toastify🔥

Simple and dependency-free notification plugin.

Installation

1npm i vue-toastify

1import { createApp } from 'vue';
2import plugin from 'vue-toastify';
3// base styles
4import 'vue-toastify/index.css';
5// theme styles
6import 'vue-toastify/themes/dark.css';
7import type { Settings } from 'vue-toastify';
8
9const app = createApp({  });
10app.use<Settings>(plugin, {  });
11app.mount('#app');

Usage with Nuxt

Options:

• ToastOptions - settings per toast
• Settings - global settings (default settings here)
• ToastPluginAPI - methods available on the useToast() composable
• Events - events emitted by the plugin

Migration Information

In the future enableHtmlInterpretation setting will default to false. If you rely on that behavior, make sure to enable it in the settings. If you don't want user input treated as html, make sure to set it to false.

Custom styling

Styles include a 'dark'(default) and a 'light' theme. If you would like to create your own styles you may use the following helpers:

1import { createVtTheme, getCssRules } from 'vue-toastify';
2
3// this will create a stylesheet if doesn't exists and insert it into the head
4createVtTheme('myThemeName', '#8f6b42');
5// then you can set the theme of the status or the global settings
6// alternatively, you can get an array of css rules using getCssRules
7getCssRules('myThemeName', '#8f6b42').forEach(rule => {...});
8// this will give you a good starting point to customise the theme

Custom notifications

You 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.

1app.use<Settings>(plugin, {
2    customNotifications: {
3        authenticationError: {
4            body: 'Authentication error',
5            // ... rest of the toast options here
6        }
7    }
8});
9// then later you can use it as
10useToast().authenticationError();

Ambient declaration for custom notifications

1import type { ToastPluginAPI, CustomMethods } from 'vue-toastify';
2
3declare module 'vue-toastify' {
4    interface MyMethods extends CustomMethods {
5        authenticationError(): string;
6    }
7
8    function useToast(): ToastPluginAPI & MyMethods;
9}

Events

The plugin emits events that you can listen to which allows for using callbacks at different points in the toast's lifecycle.

1import { useVtEvents, useToast } from 'vue-toastify';
2
3const toast = useToast().success({ body: 'Hello world', canTimeout: true });
4
5useVtEvents().once('vtPaused', payload => {
6    if (payload.id === toast.id) {
7        // do something
8    }
9})

Usage with Nuxt

The recommended way to install is by creating a plugin. As notifications are expected to be responses to user actions, we can lazy load the plugin to reduce the initial bundle size.

Be sure to familiarise yourself with the Nuxt plugin documentation.

1// plugins/toast.client.ts
2// .client will only run the plugin on the client side.
3import type { Settings } from 'vue-toastify';
4
5export default defineNuxtPlugin({
6    name: 'toast',
7    // can load the same time as the rest of the plugins
8    parallel: true,
9    setup: nuxt => {
10        // this will lazy load the plugin therefore won't be included in the entry point
11        void import('vue-toastify').then(exports => {
12            nuxt.vueApp.use<Settings>(exports.default, {
13                pauseOnHover: true,
14                theme: 'light',
15                position: 'top-right'
16            });
17        });
18    }
19});
20

Then specify the auto-imported preset in your configuration.

1// nuxt.config.ts
2export default defineNuxtConfig({
3    css: [
4        // required base themes
5        'vue-toastify/index.css',
6        // include the theme you want to use
7        'vue-toastify/themes/light.css'
8        // or generate one of your own as described in the custom styling section
9    ],
10    imports: {
11        // this will include the composables that the plugin provides
12        // which is negligable in size compared to the plugin itself
13        presets: [
14            {
15                from: 'vue-toastify',
16                imports: [
17                    // include only the composables you need auto-imported
18                    'useToast',
19                    // 'useVtEvents',
20                    // 'useVtSettings'
21                ]
22            }
23        ]
24    },
25})