我刚刚将在 vue 3 中创建的项目迁移到 nuxt 3。以前我使用了 vue-toastification 模块,但现在我不知道如何正确导入它。我的代码使用这个模块。
import { useToast, POSITION } from 'vue-toastification'
const toast = useToast()
export default {
methods: {
copy(text) {
toast.success('Copied!', {
timeout: 2000,
position: POSITION.BOTTOM_CENTER,
})
navigator.clipboard.writeText(text)
}
}
}
在 Vue 中我必须做app.use(Toast)
但Nuxt没有index.js文件。添加modules: ['vue-toastification/nuxt']
在 nuxt.config.js 中不起作用,因为我收到错误。
当我使用开发服务器(npm run dev)时,kisu 和 Ricardo de Paula 建议的答案对我有用。
构建并运行项目后,我遇到了错误 500:
未找到名为“useToast”的导出。请求的模块“vue-toastification”是一个 CommonJS 模块,它可能不支持所有 module.exports 作为命名导出。 CommonJS 模块始终可以通过默认导出导入,例如使用:import pkg from 'vue-toastification';
为了解决这个问题,我将 toast 注册为插件助手 https://nuxt.com/docs/guide/directory-structure/plugins(我使用的是 Nuxt 3.1.1 和 Nitro 2.1.1):
Inside vue-toastificaton.client.js:
import { defineNuxtPlugin } from '#app'
import * as vt from 'vue-toastification'
import '@/assets/css/toast.scss'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(vt.default)
return {
provide: {
toast: vt.useToast()
}
}
})
然后在我的成分脚本设置:
//throws an error after production build
//import { useToast } from 'vue-toastification'
//const toast = useToast()
//toast.success('Yay!!!')
//works after production build
const { $toast } = useNuxtApp()
$toast.success('Yay!!!')
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)