{"id":12592,"library":"vue-sweetalert2","title":"Vue SweetAlert2 Wrapper","description":"vue-sweetalert2 is a Vue.js wrapper for the popular SweetAlert2 library, providing declarative integration of customizable alert, prompt, and confirmation dialogs into Vue applications. It supports both Vue 2 and Vue 3 (Options API) and offers server-side rendering (SSR) capabilities, especially through its Nuxt.js module. The current stable version is 5.0.11. While the project is actively maintained with periodic updates addressing bug fixes and minor features, there's no strict release cadence. A key differentiator is its `this.$swal` instance method, simplifying SweetAlert2 calls within Vue components. However, for Vue 3 Composition API users, the maintainer explicitly recommends against using this wrapper, suggesting direct SweetAlert2 calls for better feedback and alignment with its documentation.","status":"active","version":"5.0.11","language":"javascript","source_language":"en","source_url":"https://github.com/avil13/vue-sweetalert2","tags":["javascript","sweetalert","sweetalert2","alert","prompt","ssr","typescript"],"install":[{"cmd":"npm install vue-sweetalert2","lang":"bash","label":"npm"},{"cmd":"yarn add vue-sweetalert2","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-sweetalert2","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue.js integration.","package":"vue","optional":false},{"reason":"The core alert library that this package wraps. Must be installed separately.","package":"sweetalert2","optional":false}],"imports":[{"note":"This is the primary plugin export used with `app.use()` for global installation. While `require()` might work in some CJS contexts, ESM import is standard for modern Vue projects.","wrong":"const VueSweetalert2 = require('vue-sweetalert2');","symbol":"VueSweetalert2","correct":"import VueSweetalert2 from 'vue-sweetalert2';"},{"note":"This stylesheet is crucial for the default SweetAlert2 styling. As of v4.2.0, auto-import of styles can be prevented, requiring explicit manual import for proper rendering.","symbol":"sweetalert2/dist/sweetalert2.min.css","correct":"import 'sweetalert2/dist/sweetalert2.min.css';"},{"note":"The `$swal` method is injected globally onto the Vue instance and component context (e.g., `app.config.globalProperties.$swal` for Vue 3, or `this.$swal` in Options API components). It is not a direct named export from the package.","wrong":"import { $swal } from 'vue-sweetalert2';","symbol":"$swal","correct":"this.$swal('Hello Vue world!!!');"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport VueSweetalert2 from 'vue-sweetalert2';\nimport 'sweetalert2/dist/sweetalert2.min.css'; // Essential for default styling\n\nconst app = createApp(App);\n\n// Optional: Configure global SweetAlert2 options\nconst options = {\n  confirmButtonColor: '#41b882',\n  cancelButtonColor: '#ff7674',\n};\n\napp.use(VueSweetalert2, options);\napp.mount('#app');\n\n// App.vue (example component)\n<template>\n  <div>\n    <h1>Vue SweetAlert2 Demo</h1>\n    <button @click=\"showSuccessAlert\">Show Success Alert</button>\n    <button @click=\"showErrorPrompt\">Show Error Prompt</button>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n  name: 'App',\n  methods: {\n    async showSuccessAlert() {\n      await this.$swal({\n        title: 'Operation Successful!',\n        text: 'Your action was completed successfully.',\n        icon: 'success',\n        confirmButtonText: 'OK',\n      });\n    },\n    async showErrorPrompt() {\n      const { value: text } = await this.$swal.fire({\n        title: 'Why did the error occur?',\n        input: 'textarea',\n        inputPlaceholder: 'Type your reason here...',\n        inputAttributes: {\n          'aria-label': 'Type your reason here'\n        },\n        showCancelButton: true,\n      });\n\n      if (text) {\n        this.$swal.fire('Reason provided:', text);\n      }\n    },\n  },\n});\n</script>","lang":"typescript","description":"This quickstart demonstrates how to install and configure `vue-sweetalert2` in a Vue 3 application, including setting global SweetAlert2 options and examples of triggering different types of alerts from a component using the injected `this.$swal` method."},"warnings":[{"fix":"For Composition API, `import Swal from 'sweetalert2';` and use `Swal.fire(...)` directly. For Options API, continue using `this.$swal`.","message":"The package maintainer explicitly recommends against using `vue-sweetalert2` with Vue 3 Composition API. It is advised to import and use `sweetalert2` directly for better integration feedback and alignment with its native documentation when using Composition API.","severity":"gotcha","affected_versions":"*"},{"fix":"Always ensure manual import of `sweetalert2/dist/sweetalert2.min.css` in your main entry file, especially if upgrading or downgrading around these versions, to guarantee styles are loaded.","message":"Version `3.0.5` introduced a 'Disable force css including' feature, which was subsequently reverted in `3.0.6`. This could lead to inconsistent CSS loading behavior if not explicitly handled, potentially causing SweetAlert2 modals to render without styling in specific build setups.","severity":"breaking","affected_versions":"3.0.5"},{"fix":"Explicitly add `import 'sweetalert2/dist/sweetalert2.min.css';` to your main JavaScript/TypeScript entry file (e.g., `main.ts` or `main.js`) to ensure styles are applied.","message":"Starting from `v4.2.0`, a feature to 'Prevent auto import of sweetalert style' was added. This means the `sweetalert2.min.css` might no longer be automatically included by the plugin, which can result in unstyled modals.","severity":"gotcha","affected_versions":">=4.2.0"},{"fix":"Follow the Nuxt.js specific integration guide in the README, configuring your `nuxt.config.js` to use `modules: ['vue-sweetalert2/nuxt']` or `modules: ['vue-sweetalert2/nuxt/no-css']` as needed.","message":"When integrating `vue-sweetalert2` with Nuxt.js, specific module paths must be used, such as `vue-sweetalert2/nuxt` or `vue-sweetalert2/nuxt/no-css`. Using the incorrect or generic package path can lead to improper injection of `$swal` or missing styles.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `app.use(VueSweetalert2);` is called before `app.mount('#app');` in your main application file (e.g., `main.ts` or `main.js`).","cause":"The `vue-sweetalert2` plugin was not correctly installed using `app.use()` in your Vue application's entry point.","error":"Property '$swal' does not exist on type 'ComponentPublicInstance'."},{"fix":"Always pass a configuration object to SweetAlert2 methods, even for simple alerts. For example, use `this.$swal({ title: 'Hello', text: 'World!' });` instead of `this.$swal('Hello world!');`.","cause":"Passing a string directly to `this.$swal()` or `this.$swal.fire()` without wrapping it in an object. SweetAlert2's modern API expects a configuration object as its primary parameter.","error":"SweetAlert2: The parameter is expected to be of type Object, but got type String."},{"fix":"Verify that `import 'sweetalert2/dist/sweetalert2.min.css';` is present in your application's entry file. If using Nuxt.js, check your `nuxt.config.js` for proper module configuration (e.g., `sweetalert` options or `no-css` module combined with manual CSS import).","cause":"The core SweetAlert2 CSS file (`sweetalert2/dist/sweetalert2.min.css`) is not being loaded or is being overridden by conflicting styles. This can happen due to the `Prevent auto import of sweetalert style` feature in `v4.2.0+` or incorrect Nuxt.js configuration.","error":"SweetAlert2 modal appears without any styling or looks broken."}],"ecosystem":"npm"}