Requirements

vue version >=3.2.0

Installation

npm install --save vue3-toastify
# yarn add vue3-toastify

Demo

A demo is worth a thousand words

备用地址

Document

Check the documentation to get you started!

备用地址

The gist

<template>
  <div>
    <button>Notify !</button>
  </div>
</template>

Init/Update Global Props

// main.ts
import Vue3Toastify, { type ToastContainerOptions } from 'vue3-toastify';

app.use(Vue3Toastify, {
  autoClose: 3000,
} as ToastContainerOptions);

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "vue3-toastify/global"
    ]
  }
}

or

updateGlobalOptions({ rtl: true });

toast.success('Wow so easy!');

use global components (antd eg.)

import { App, createApp } from 'vue';
import router from './routes';

import Vue3Toasity, { type ToastContainerOptions } from 'vue3-toastify';

import Root from './App.vue';

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

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

const app = createApp(Root);

app.use(router);

resolveGLobalComponents(app);

app.use(
  Vue3Toasity,
  {
    // the Toast application is separate from the main application, so we need to call .use
    useHandler: resolveGLobalComponents,
    // other props...
  } as ToastContainerOptions,
);

app.mount('#app');

nuxt

A nuxt demo

• plugins/vue3-toastify.ts

import Vue3Toastify, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Toastify, { autoClose: 1000 });

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

• demo.vue

<template>
  <button>notify by click</button>
</template>

Using the ES Module Build

jsfiddle demo

  
  <title>Using the ES Module Build</title>



  <div id="app">
    <button>show toast</button>
    <span>&nbsp;&nbsp;</span>
    <button>dismiss</button>
  </div>
  
  

Sponsors

Special Sponsor