Gathering detailed insights and metrics for vue3-toastify
Gathering detailed insights and metrics for vue3-toastify
🎉 Vue3-Toastify allows you to add notifications to your app with ease.
Installations
npm install vue3-toastifyDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Min. Node Version
>=20
Node Version
20.18.1
NPM Version
10.8.2
Score
83.3
Supply Chain
98.7
Quality
85.3
Maintenance
100
Vulnerability
100
License
Releases
33
Contributors
6
Unable to fetch Contributors
Languages
6
TypeScript
Vue
SCSS
JavaScript
HTML
CSS
TypeScript (65.56%)
Vue (14.56%)
SCSS (12.3%)
JavaScript (6.3%)
HTML (0.72%)
CSS (0.56%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
2,710,144
Last Day
8,580
Last Week
49,189
Last Month
200,256
Last Year
2,048,211
GitHub Statistics
MIT License
456 Stars
166 Commits
43 Forks
2 Watchers
1 Branches
6 Contributors
Updated on Feb 09, 2025
Bundle Size
22.89 kB
Minified
7.28 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.2.8
Package Id
vue3-toastify@0.2.8
Unpacked Size
92.35 kB
Size
25.89 kB
File Count
8
NPM Version
10.8.2
Node Version
20.18.1
Published on
Dec 18, 2024
Total Downloads
Cumulative downloads
Total Downloads
2,710,144
Last Day
8.8%
8,580
Compared to previous day
Last Week
5.7%
49,189
Compared to previous week
Last Month
29.1%
200,256
Compared to previous month
Last Year
213.8%
2,048,211
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
56
@babel/core@babel/plugin-transform-runtime@babel/plugin-transform-typescript@babel/preset-env@babel/preset-typescript@commitlint/cli@commitlint/config-conventional@stylistic/eslint-plugin-js@stylistic/eslint-plugin-jsx@stylistic/eslint-plugin-plus@stylistic/eslint-plugin-ts@swc/core@testing-library/jest-dom@testing-library/user-event@testing-library/vue@types/lodash.isequal@types/lz-string@types/node@typescript-eslint/parser@vitejs/plugin-vue@vitejs/plugin-vue-jsx@vitest/ui@vue/babel-plugin-jsxautoprefixerbabel-loaderbrowserslist-to-esbuildbumppcore-jscssnanoesbuild-plugin-babeleslint-plugin-vuehuskyjsdomlint-stagednpmnpm-run-allpostcsspostcss-clipostcss-loaderpostcss-nestedpostcss-scssrimrafsassshelljsstylelintstylelint-config-recommended-vuestylelint-config-standardtsuptypescriptvitevite-plugin-dtsvite-plugin-eslintvite-plugin-style-importvitestvue-eslint-parservue-tsc
Requirements
vue version >=3.2.0
Installation
1npm install --save vue3-toastify 2# yarn add vue3-toastify
Demo
A demo is worth a thousand words
Document
Check the documentation to get you started!
The gist
1<template> 2 <div> 3 <button @click="notify">Notify !</button> 4 </div> 5</template> 6 7<script> 8import { toast } from 'vue3-toastify'; 9import 'vue3-toastify/dist/index.css'; 10 11export default { 12 name: "App", 13 setup() { 14 const notify = () => { 15 toast("Wow so easy !", { 16 autoClose: 1000, 17 }); // ToastOptions 18 } 19 return { notify }; 20 } 21}; 22</script>
Init/Update Global Props
1// main.ts 2import Vue3Toastify, { type ToastContainerOptions } from 'vue3-toastify'; 3 4app.use(Vue3Toastify, { 5 autoClose: 3000, 6} as ToastContainerOptions);
1// tsconfig.json 2{ 3 "compilerOptions": { 4 "types": [ 5 "vue3-toastify/global" 6 ] 7 } 8}
or
1updateGlobalOptions({ rtl: true }); 2 3toast.success('Wow so easy!');
use global components (antd eg.)
1import { App, createApp } from 'vue'; 2import router from './routes'; 3 4import Vue3Toasity, { type ToastContainerOptions } from 'vue3-toastify'; 5 6import Root from './App.vue'; 7 8import Antd from 'ant-design-vue'; 9import 'ant-design-vue/dist/reset.css'; 10 11function resolveGLobalComponents(instance: App<Element>) { 12 instance.use(Antd); 13} 14 15const app = createApp(Root); 16 17app.use(router); 18 19resolveGLobalComponents(app); 20 21app.use( 22 Vue3Toasity, 23 { 24 // the Toast application is separate from the main application, so we need to call .use 25 useHandler: resolveGLobalComponents, 26 // other props... 27 } as ToastContainerOptions, 28); 29 30app.mount('#app');
nuxt
- plugins/vue3-toastify.ts
1import Vue3Toastify, { toast } from 'vue3-toastify'; 2import 'vue3-toastify/dist/index.css'; 3 4export default defineNuxtPlugin((nuxtApp) => { 5 nuxtApp.vueApp.use(Vue3Toastify, { autoClose: 1000 }); 6 7 return { 8 provide: { toast }, 9 }; 10}); 11
- demo.vue
1<script setup> 2// import { toast } from 'vue3-toastify'; 3 4nextTick(() => { 5 if (process.client) { 6 useNuxtApp().$toast('notify after nextTick'); 7 } 8}); 9 10const notify = () => { 11 useNuxtApp().$toast.info('toastify success'); 12 // or 13 // toast.info('toastify success'); 14}; 15</script> 16 17<template> 18 <button @click="notify">notify by click</button> 19</template>
Using the ES Module Build
1<html lang="en"> 2 3<head> 4 <link href="https://cdn.jsdelivr.net/npm/vue3-toastify@0.2.1/dist/index.css" rel="stylesheet" /> 5 <title>Using the ES Module Build</title> 6</head> 7 8<body> 9 <div id="app"> 10 <button @click="notify">show toast</button> 11 <span> </span> 12 <button @click="dismiss">dismiss</button> 13 </div> 14 <script type="importmap"> 15 { 16 "imports": { 17 "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js" 18 } 19 } 20 </script> 21 <script type="module"> 22 import { createApp } from 'vue' 23 import { toast } from 'https://unpkg.com/vue3-toastify@0.2.1/dist/index.mjs' 24 25 createApp({ 26 data() { 27 return { 28 toastId: '', 29 toastIds: [], 30 }; 31 }, 32 methods: { 33 notify() { 34 const toastId = toast.info( 35 'hello', 36 { 37 rtl: true, 38 limit: 3, 39 position: toast.POSITION.BOTTOM_CENTER, 40 }, 41 ); 42 this.toastIds.push(toastId); 43 }, 44 dismiss() { 45 console.log(this.toastIds) 46 this.toastIds.forEach(id => { 47 toast.remove(this.toastId); 48 }); 49 /* toast.clearAll() */; 50 }, 51 } 52 }).mount('#app') 53 </script> 54</body> 55 56</html>
Sponsors
Special Sponsor
No vulnerabilities found.
No security vulnerabilities found.