将 sweet Alert 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

你可以让它变得更容易：

插件/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'
})