đ Vue3-Toastify allows you to add notifications to your app with ease. No more nonsense!
npm install vue3-toastify
vue version >=3.2.0
``bash`
npm install --save vue3-toastifyyarn add vue3-toastify
A demo is worth a thousand words
Check the documentation to get you started!
`html
`
`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!');
`
`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');
`
- 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
`
`html
``