Requirements

vue version >=3.2.0

Installation

``bash
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

`html



`

Init/Update Global Props

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

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

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

or

`ts
updateGlobalOptions({ rtl: true });

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

use global components (antd eg.)

`ts
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) {
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

`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

`html



`

Using the ES Module Build

jsfiddle demo

`html











``

Sponsors

Special Sponsor