如何使用 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

如果您希望它在全球范围内可用，您可以将其作为 Nuxt 插件安装为 explained in the official docs 或在此 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 2

我想做同样的事情。我阅读了 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>