推荐一个VUE3和NUXT3通用TOAST消息提醒组件。
发布于2026-04-20 12:51 阅读2573次
推荐一下好用的vue3和nuxt3通用toast消息提醒组件，vue3中直接在可使用下面代码直接全局导入，this.toast('message content');支持toast.info/success/error/danger/warning('message content');
nuxt3下在plugins中建立toastify.client.ts复制下方代码 第二段代码为nuxt3专属全局注册vue3组件使用。
```
import toastify, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';
//全局参数配置
const options = {
position:'top-center',//top-left,top-center,top-right,bottom-left,bottom-center,bottom-right
autoClose:3000,
hideProgressBar:true,
closeButton:true,
theme:'auto',//auto,colored,dark,light
transition:'bounce',//bounce,flip,slide,zoom
pauseOnFocusLoss:true,
pauseOnHover:true,
rtl:false,
style: {
opacity: '0.95',
userSelect: 'none',
zIndex:'40'
},
};
//以下代码为NUXT3全局注册组件
export default defineNuxtPlugin(nuxtApp => {// defineNuxtPlugin 是全局的，不需要手动引入即可使用，不会报错
nuxtApp.vueApp.use(toastify,options);
return {provide:{toast}};
})
```
2
0
文章点评