如何使用vue-toastification

Question

我刚刚将我在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 文件。在 nuxt.config.js 中添加

modules: ['vue-toastification/nuxt']

不起作用，因为我得到一个错误。

Answer 1

kissu 和 Ricardo de Paula 建议的答案在我使用开发服务器（npm run dev）时为我工作。

构建和运行项目后我遇到错误 500：

未找到命名导出“useToast”。请求的模块“vue-toastification”是一个 CommonJS 模块，它可能不支持所有 module.exports 作为命名导出。 CommonJS 模块始终可以通过默认导出导入，例如使用：

import pkg from 'vue-toastification';

为了解决这个问题，我将 toast 注册为 plugin helper（我正在使用 Nuxt 3.1.1 和 Nitro 2.1.1）：

里面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!!!')

Answer 2

如果您希望它在全球范围内可用，您可以将其安装为 Nuxt 插件，如在官方文档或此other answer中所述。

vue-toastification 可能是一个仅限客户端的插件，因此您可能希望将其用作

/plugins/vue-toastificaton.client.js

像这样

import { defineNuxtPlugin } from '#app'
import Toast from "vue-toastification"
import "vue-toastification/dist/index.css" // if needed

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(Toast)
})

然后，您应该能够在您的组件中使用 Composition API 或 Options API（我认为）。

Answer 3

我也想做同样的事情。我读了 kissu 的回答并做了以下事情：

1 - 我为 puglin 创建了一个文件夹 - plugins

2 - 在插件文件夹中，我创建了一个名为 vue-toastificaton.client.js 的文件

在 vue-toastificaton.client.js 里面：

import { defineNuxtPlugin } from '#app'
import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css' // if needed

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Toast)
})

我就是这样用的：

<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const onSubmit = () => {
    // use the toast notification plugin to show a success message
    toast.success('Hello world!')
}
</script>

Answer 4

避免部署问题的用法

由于这是一个广泛的问题，我将与

vue-toastification 2

分享我的经验。

vue-toastification 2

不支持SSR所以你需要确保插件只在客户端运行。在此线程上关注@kissu 的answer。

现在在你的

script setup

上，语法是这样的。

<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()

const showToast = () => {
 toast.success( 'Hello World' )
}
</script>

问题， 上面的语法在开发期间有效，但在部署期间无效。你会得到这样的错误。

即使您按照屏幕截图中显示的说明进行操作，问题仍然会在部署时持续存在。我认为这是因为

const toast = useToast()

在服务器端运行。

解决方案 此问题的解决方法是直接调用

useToast()

。像这样

<script setup>
import { useToast } from 'vue-toastification'

const showToast = () => {
 useToast().success( 'Hello World' )
}
</script>

现在，它应该可以进行部署了。