nuxt3项目添加sweet alert 2

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

你可以让它更容易：

插件/sweetalert2.ts

import Swal from 'sweetalert2'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide('swal', Swal)
})

在

<script setup>

中的用法

const { $swal } = useNuxtApp()

$swal.fire({
  title: 'Error!',
  text: 'Do you want to continue',
  icon: 'error',
  confirmButtonText: 'Cool'
})

Answer 2

我也在学习 nuxt3。下面是我如何在我的 nuxt3 应用程序中使用 sweet alert 2。

插件/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和inject来使用，我的

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>

希望对你有帮助。

Answer 3

这就是我让它在 nuxt 3.5 中工作的方式

1. npm i sweetalert2

2. 在插件文件夹中添加新文件

   sweetaler2.client.ts

import Swal, { SweetAlertOptions } from 'sweetalert2'
import 'sweetalert2/dist/sweetalert2.css'

// Default options
const options: SweetAlertOptions = {}

const $swal = {
    install: (Vue: any, options: SweetAlertOptions) => {
        Vue.provide('$swal', Swal.mixin(options))
    }
}
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use($swal, options)
})

3. 添加类型安全的可组合项

   useSwal

import * as SweetAlert2 from 'sweetalert2'

export default function () {
    const useSwal = () => {
        return inject('$swal') as typeof SweetAlert2.default
    }
    return useSwal()
}