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
Developer Guide
BETA
Module System
ESM
Min. Node Version
>=20
Typescript Support
Yes
Node Version
20.18.0
NPM Version
10.8.2
Statistics
416 Stars
150 Commits
38 Forks
2 Watching
1 Branches
5 Contributors
Updated on 27 Nov 2024
Languages
TypeScript (65.39%)
Vue (14.58%)
SCSS (12.39%)
JavaScript (6.35%)
HTML (0.73%)
CSS (0.57%)
Total Downloads
Cumulative downloads
Total Downloads
2,231,298
Last day
-5.4%
8,632
Compared to previous day
Last week
-6.9%
45,142
Compared to previous week
Last month
-12.2%
228,628
Compared to previous month
Last year
311.1%
1,794,178
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
Versions
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!');
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.