无法加载 vue-toast-notification nuxt 3 的源映射

Question

我正在使用 Nuxt 3，并且添加了 vue-toast-notification，版本 3。 我制作了一个插件来注册和自定义它，但我的全局选项不适用于它。

这是我的 toast.js 文件：

插件/01.toast.js

import { useToast } from 'vue-toast-notification';

import 'vue-toast-notification/dist/theme-default.css';

export default defineNuxtPlugin((nuxtApp) => {

const toast = useToast()

const app = nuxtApp.vueApp

app.use(toast, {

position: 'top-right',

pauseOnHover: true,

duration: 5000

})

return {

provide: {

toast,

}

}

})

当我运行该项目时，它警告我：无法加载 vue-toast-notification 的源映射 我认为源地图是这个问题的原因。

我在 nuxt.config.ts 中添加了带有服务器和客户端选项的源映射密钥，但它没有做出任何更改

您知道我应该做什么来设置我的全局选项吗？

预先感谢您与我分享您的想法。

Answer 1

您不能使用插件将可组合项注册到 nuxt 中。您应该做的是在相关文件夹（插件和可组合项）下的不同文件中注册 toastification 插件及其可组合项。此外，toastification 插件可能会在服务器端导致错误，因此您可能需要仅通过在其名称中添加 .client 扩展名来注册客户端插件。

/plugins/toastification.client.js

import Toast from "vue-toastification";

export default defineNuxtPlugin((nuxtApp) => {
  const options = {
    position: "bottom-right",
    timeout: 3500,
    closeOnClick: true,
    pauseOnFocusLoss: false,
    pauseOnHover: true,
    draggable: true,
    draggablePercent: 0.6,
    showCloseButtonOnHover: false,
    hideProgressBar: false,
    closeButton: "button",
    icon: true,
    rtl: false,
  };

  nuxtApp.vueApp.use(Toast, options);
});

/composables/useToast.js

import { useToast } from "vue-toastification";

export default function () {
  return useToast();
}