Vue 3迁移Nuxt 3后，如何正确引入vue-toastification组件？

vue-toastification目前没有官方适配Nuxt 3的模块，所以直接在nuxt.config的modules数组中添加会报错，按以下步骤配置即可：

1. 安装适配Vue 3的版本 #

确保安装的是支持Vue 3的vue-toastification版本：

npm install vue-toastification@next
# 或使用yarn
yarn add vue-toastification@next

2. 创建Nuxt客户端插件 #

在项目根目录的plugins文件夹下，创建toast.client.js文件（后缀.client用于指定仅在客户端环境执行，避免服务端渲染报错），内容如下：

import Toast from 'vue-toastification'
import 'vue-toastification/dist/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  // 注册Toast插件，可在这里配置全局默认参数
  nuxtApp.vueApp.use(Toast, {
    position: 'bottom-center',
    timeout: 2000
  })
})

Nuxt 3会自动加载plugins目录下的插件，无需额外在nuxt.config中配置。

3. 在组件中使用 #

方式一：使用<script setup>（Nuxt 3推荐写法） #

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

const copy = (text) => {
  toast.success('Copied!', {
    timeout: 2000,
    position: POSITION.BOTTOM_CENTER
  })
  navigator.clipboard.writeText(text)
}
</script>

方式二：保持Options API写法 #

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

export default {
  methods: {
    copy(text) {
      const toast = useToast()
      toast.success('Copied!', {
        timeout: 2000,
        position: POSITION.BOTTOM_CENTER
      })
      navigator.clipboard.writeText(text)
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者user11595150