DOCSEARCHbyAlgolia
Submit Docs

Vue3 Toastify

website·Indexed 31 days ago

https://vue3-toastify.js-bridge.com

A notification library for Vue 3.2+ that allows developers to easily add toast notifications to their applications. Features include promise support, custom animations, RTL layout, accessibility with ARIA roles, and integration with Nuxt.

Tokens
6.1K
Snippets
30
Records
49
Agent score
55%

What's inside Vue3 Toastify

  1. Overview of Vue3 toastify

    Vue3 toastify is a library that allows developers to easily integrate toast notifications into Vue 3 applications. It supports various configurations including themes, toast types, screen positions, and transition animations.

  2. Vue3 Toastify feature capabilities

    Vue3 Toastify provides a comprehensive set of toast notification features, including:

    • RTL support and dark mode (with automatic system detection via html.dark).
    • Customization: Support for custom animations (e.g., animate.css), colored themes, and the ability to render Vue3 components or dangerously set HTML strings (disabled by default).
    • Control: Programmatic removal of toasts, limits on the number of simultaneous toasts, and the ability to update existing toasts.
    • Lifecycle & Behavior: onOpen and onClose hooks with access to component props, promise support, and the ability to pause toasts when the window loses focus.
    • Visuals: Built-in progress bars to indicate remaining time.

  3. Use built-in notification icons in vue3-toastify

    vue3-toastify provides built-in icons that are automatically associated with the notification type. When using toast.info, toast.error, toast.success, or toast.warning, the corresponding icon for that type is displayed by default.

  4. Integrate vue3-toastify with Nuxt plugins

    Because the vue3-toastify application is separate from the main Nuxt application, you must use the useHandler option to provide the router or other global dependencies to the toast instance. This is typically implemented within a Nuxt plugin.
    // vue3-toastify.client.ts
import Vue3Toastify, { toast, type ToastContainerOptions } from 'vue3-toastify';
import { useRouter } from '#app';

export default defineNuxtPlugin((nuxtApp) => {
    const router = useRouter();

    function resolveGLobalComponents(instance: App<Element>) {
        instance.use(router);
    }
    
    nuxtApp.vueApp.use(
      Vue3Toastify,
      {
        // the Toast application is separate from the main application, so we need to call .use
        useHandler: resolveGLobalComponents,
        // other props...
      } as ToastContainerOptions,
    );

    return {
        provide: { toast },
    };
});

  5. Integrate vue3-toastify into a Nuxt application

    To use vue3-toastify in Nuxt, create a Nuxt plugin to register the library and provide the toast object globally. This allows you to access the toast functionality across your application using useNuxtApp().
    // plugins/vue3-toastify.ts
import Vue3Toastify, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

export default defineNuxtPlugin((nuxtApp) => {
  // Initialize the plugin with options (e.g., autoClose: 1000)
  nuxtApp.vueApp.use(Vue3Toastify, { autoClose: 1000 });

  return {
    provide: {
      toast,
    },
  };
});

  6. Render custom components or non-string content in vue3-toastify

    vue3-toastify allows rendering any valid node, including strings, numbers, and Vue components. When a custom component is rendered within a toast, the library automatically injects a closeToast prop and toastProps into that component, allowing the component to interact with the toast instance (e.g., triggering a close action from within the custom UI).

  7. Pass custom props and closeToast function to a toast component

    When using a Vue component as a toast, you can pass a render function to toast(). This function receives an object containing closeToast (a function to programmatically close the toast) and toastProps (the toast configuration). These can be passed directly as props to your custom component.
    <!-- Msg.vue -->
<script lang="ts">
import { ToastOptions } from 'vue3-toastify';
import { PropType } from 'vue';

export default {
  props: {
    closeToast: Function as PropType<(e?: MouseEvent) => void>,
    toastProps: Object as PropType<ToastOptions>,
  },
};
</script>

<template>
  <div>
    <p>Position: {{ toastProps?.position }}</p>
    <button @click="(e) => closeToast && closeToast(e)">Close Toast</button>
  </div>
</template>

    <!-- Usage in another component --> <script lang="ts" setup> import { h } from 'vue'; import { toast } from 'vue3-toastify'; import Msg from './Msg.vue';

    const show = () => { toast( ({ closeToast, toastProps }) => h(Msg, { closeToast, toastProps }), { data: { uid: '123' }, onOpen: ({ uid }) => console.log(uid), }, ); }; </script>

  8. Install vue3-toastify

    To use vue3-toastify, ensure your project is running Vue version 3.2.0 or higher. Install the package using one of the following package managers:
    # Using npm
npm install vue3-toastify

# Using yarn
yarn add vue3-toastify

# Using pnpm
pnpm add vue3-toastify

  9. Update an existing toast notification

    When updating a toast in vue3-toastify, the existing toast options and content are inherited by default. However, you can explicitly override the content or any other ToastOptions during the update process.

  10. Prevent duplicate toasts using a custom toast ID

    The most straightforward way to prevent duplicate toast notifications is to provide a custom id when triggering the toast. If a toast with the same ID is already active, the library will prevent a duplicate from appearing.

  11. Use global UI libraries (e.g., Ant Design) in vue3-toastify

    To use global components or plugins (such as Ant Design Vue) inside toast notifications, define a handler function that calls .use() on the toast instance and pass it to the useHandler property in the Vue3Toastify configuration.
    // app.ts
import { App, createApp } from 'vue';
import Vue3Toastify, { type ToastContainerOptions } from 'vue3-toastify';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import Root from './App.vue';

function resolveGLobalComponents(instance: App<Element>) {
  instance.use(Antd);
}

const app = createApp(Root);

// Apply to main app
resolveGLobalComponents(app);

app.use(
  Vue3Toastify,
  {
    // Pass the handler so Antd is also available inside the Toast application
    useHandler: resolveGLobalComponents,
  } as ToastContainerOptions,
);

app.mount('#app');

  12. Remove specific or all toasts programmatically

    When a toast is displayed, it returns a unique ID. This ID can be passed to toast.remove(toastId) to remove that specific toast. If toast.remove() is called without any arguments, all currently displayed toasts will be removed.
    import { toast } from 'vue3-toastify';

// 1. Remove a specific toast using its ID
const toastId = toast('This is a toast');
toast.remove(toastId);

// 2. Remove all active toasts
toast.remove();