将甜蜜警报 2 添加到 nuxt3 项目

Question

我正在努力将 sweet alert 2 作为插件集成到 nuxt3 应用程序中。我正在尝试使用 vue-sweetalert2 但我在某些时候它定义了全局变量。

// Inside the install function
vue.prototype.$swal = swalFunction;
vue['swal'] = swalFunction;

请问如何访问这些全局变量？文档没有显示。

我想我的目标是在我的插件中包含如下内容：

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

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

  return {
    provide: {
      swal: swalFunction // <- how to access this ?
    }
  }
})

Answer 1

我正在学习 nuxt3 too.Here 我是如何在我的 nuxt3 应用程序中使用 sweet alert 2 的。

plugins/swal.js

import Swal from "sweetalert2";
import "@sweetalert2/theme-bootstrap-4";
const $swal = {
    install: (Vue, options) => {
        Vue.config.globalProperties.$swal = Swal.mixin(options);
    },
}
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use($swal, {
        reverseButtons: true,
        confirmButtonText: "confirmText",
        cancelButtonText: "cancelText",
        confirmButtonColor: "#84bd00",
    });
});

组件中的用法

<script>
    export default {
      const fn = getCurrentInstance().appContext.config.globalProperties;
      fn.$swal.fire({
          title: "hello",
          timer: 2000,
      });
    }
</script>

或者provide注入使用，我的plugins/swal.js会是这样

import Swal from "sweetalert2";
import "@sweetalert2/theme-bootstrap-4";
const options = {
    reverseButtons: true,
    confirmButtonText: "confirmText",
    cancelButtonText: "cancelText",
    confirmButtonColor: "#84bd00",
}
const $swal = {
    install: (Vue, options) => {
        Vue.provide("$swal", Swal.mixin(options));
    },
}
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use($swal, options);
});

组件中的用法

<script>
    export default {
      const swal = inject("$swal");
      swal.fire({
          title: "hello",
          timer: 2000,
      });
    }
</script>

希望对您有所帮助。

将甜蜜警报 2 添加到 nuxt3 项目

Add sweet alert 2 to nuxt3 project

nuxt.js

vuejs3

sweetalert2

nuxtjs3