Requirements
vue version >=3.2.0
Installation
npm install --save vue3-toastify
# yarn add vue3-toastifyDemo
A demo is worth a thousand words
Document
Check the documentation to get you started!
The gist
<template>
<div>
<button @click="notify">Notify !</button>
</div>
</template>
<script>
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';
export default {
name: "App",
setup() {
const notify = () => {
toast("Wow so easy !", {
autoClose: 1000,
}); // ToastOptions
}
return { notify };
}
};
</script>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!');nuxt
- 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
<script setup>
// import { toast } from 'vue3-toastify';
nextTick(() => {
if (process.client) {
useNuxtApp().$toast('notify after nextTick');
}
});
const notify = () => {
useNuxtApp().$toast.info('toastify success');
// or
// toast.info('toastify success');
};
</script>
<template>
<button @click="notify">notify by click</button>
</template>Using the ES Module Build
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/vue3-toastify@0.1.13/dist/index.css" rel="stylesheet" />
<title>Using the ES Module Build</title>
</head>
<body>
<div id="app">
<button @click="notify">show toast</button>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
import { toast } from 'https://cdn.jsdelivr.net/npm/vue3-toastify@0.1.13/+esm';
createApp({
methods: {
notify() {
toast.info('hello', { rtl: true });
},
}
}).mount('#app')
</script>
</body>
</html>Sponsors
