vue-simple-alert在Nuxt.js中无法正常弹窗问题求助

针对你遇到的调用this.$alert仅显示文本而非弹窗的问题，可以尝试以下几种排查和解决方法：

1. 确保在客户端生命周期钩子中调用弹窗 #

由于弹窗依赖浏览器环境，避免在SSR阶段执行相关代码。将调用代码放在mounted钩子中（仅客户端执行）：

<script>
export default {
  mounted() {
    this.$alert("Hello Vue Simple Alert.")
  }
}
</script>

2. 修正插件导入与注册方式 #

部分版本的vue-simple-alert不需要解构导入，同时需要手动引入依赖样式，修改plugins/alert.js代码：

import Vue from 'vue'
import VueSimpleAlert from 'vue-simple-alert'
// 手动引入sweetalert2的样式文件
import 'sweetalert2/dist/sweetalert2.min.css'

Vue.use(VueSimpleAlert)

3. 安装适配Vue2的版本 #

如果你的Nuxt.js基于Vue2，确保安装的vue-simple-alert版本兼容Vue2（最新版可能默认适配Vue3）：

npm uninstall vue-simple-alert
npm install vue-simple-alert@1.1.1 --save

4. 验证插件客户端配置 #

确认nuxt.config.js中的插件配置无误，确保仅在客户端加载：

plugins: [
  { src: "~/plugins/alert", mode: "client" }
],

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