{"id":12590,"library":"vue-sweetalert","title":"Vue SweetAlert (Legacy)","description":"The `vue-sweetalert` package (version 0.1.18) is an effectively abandoned JavaScript plugin designed as a demonstration for creating Vue 2 wrappers around the original, now unsupported, SweetAlert library. Last published over 9 years ago, it provides a basic `this.$swal` API for displaying simple alert dialogs within Vue 2 applications. It does not receive updates, lacks modern features, and is incompatible with Vue 3. For current projects, developers should use SweetAlert2 directly or a modern, actively maintained wrapper like `vue-sweetalert2` (by avil13), which supports both Vue 2 and Vue 3 and the actively developed SweetAlert2 library. This package serves primarily as a historical example of Vue plugin development rather than a production-ready solution.","status":"abandoned","version":"0.1.18","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install vue-sweetalert","lang":"bash","label":"npm"},{"cmd":"yarn add vue-sweetalert","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-sweetalert","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This plugin primarily wraps the original, now unsupported, `sweetalert` library. The `sweetalert2` mention in its README refers to the successor library, not necessarily its own direct implementation.","package":"sweetalert","optional":false}],"imports":[{"note":"Primarily intended for ES Modules in Vue CLI/Webpack environments. CommonJS `require` might work in older Node.js contexts but is not the recommended usage pattern for browser-side Vue applications. This package is very old, prior to widespread ESM adoption in Node.","wrong":"const VueSweetAlert = require('vue-sweetalert')","symbol":"VueSweetAlert","correct":"import VueSweetAlert from 'vue-sweetalert'"},{"note":"This plugin relies on the global `Vue` object and the Vue 2 plugin installation method. It is incompatible with Vue 3's `createApp().use()` API.","wrong":"createApp(App).use(VueSweetAlert)","symbol":"Vue.use","correct":"Vue.use(VueSweetAlert)"},{"note":"The plugin exposes SweetAlert functionality via `this.$swal` on Vue instances after installation. Direct `Swal.fire` calls are for the underlying SweetAlert library, not this wrapper.","wrong":"Swal.fire('Hello')","symbol":"$swal","correct":"this.$swal('Hello')"}],"quickstart":{"code":"import Vue from 'vue'\nimport VueSweetAlert from 'vue-sweetalert'\n\nVue.use(VueSweetAlert)\n\nnew Vue({\n  el: '#app',\n  data: {},\n  methods: {\n    showBasicAlert() {\n      this.$swal('Hello from Vue SweetAlert!')\n    },\n    showConfirmAlert() {\n      this.$swal({\n        title: 'Are you sure?',\n        text: 'You will not be able to recover this imaginary file!',\n        type: 'warning',\n        showCancelButton: true,\n        confirmButtonColor: '#DD6B55',\n        confirmButtonText: 'Yes, delete it!'\n      }).then((result) => {\n        if (result.value) {\n          this.$swal('Deleted!', 'Your imaginary file has been deleted.', 'success')\n        } else {\n          this.$swal('Cancelled', 'Your imaginary file is safe :)', 'error')\n        }\n      })\n    }\n  },\n  template: `\n    <div id=\"app\">\n      <button @click=\"showBasicAlert\">Show Basic Alert</button>\n      <button @click=\"showConfirmAlert\">Show Confirm Alert</button>\n    </div>\n  `\n})\n","lang":"javascript","description":"Demonstrates the installation of the `vue-sweetalert` plugin in a Vue 2 application and how to trigger basic and confirm SweetAlert dialogs using `this.$swal`."},"warnings":[{"fix":"For Vue 3, use `sweetalert2` directly or the `vue-sweetalert2` package (by `avil13`) which supports Vue 3.","message":"This package is only compatible with Vue 2. Attempting to use it in a Vue 3 application will lead to errors due to fundamental changes in the Vue 3 plugin API and instance initialization.","severity":"breaking","affected_versions":"all"},{"fix":"Migrate to `sweetalert2` for an actively maintained and secure solution. The migration guide from SweetAlert to SweetAlert2 is available on the SweetAlert2 GitHub page.","message":"The `vue-sweetalert` package wraps the original `sweetalert` library, which is no longer maintained and has been succeeded by `sweetalert2`. The API of the original `sweetalert` may differ significantly from `sweetalert2` and may contain unpatched security vulnerabilities.","severity":"breaking","affected_versions":"all"},{"fix":"Plan to migrate to `sweetalert2` (direct usage) or `vue-sweetalert2` for a supported solution.","message":"This package has been abandoned for over 9 years and is not actively maintained. It is not recommended for new projects and existing projects should consider migrating to `sweetalert2` or `vue-sweetalert2` for continued support and feature updates.","severity":"gotcha","affected_versions":"all"},{"fix":"For TypeScript support, use `sweetalert2` directly (which has types) or `vue-sweetalert2` (which also provides types).","message":"This package does not provide TypeScript declarations, making integration into TypeScript projects challenging and lacking type safety.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `Vue.use(VueSweetAlert)` is called before creating your Vue app. If in a Vue component, ensure you are calling `this.$swal` within a method or lifecycle hook of the component.","cause":"The `vue-sweetalert` plugin was not correctly installed via `Vue.use()` or the code is running outside a Vue instance context where `$swal` is available.","error":"TypeError: Cannot read property '$swal' of undefined"},{"fix":"Either downgrade your project to Vue 2 or, preferably, upgrade your SweetAlert integration to a Vue 3-compatible solution like `sweetalert2` directly or `vue-sweetalert2`.","cause":"This error typically indicates that you are trying to use a Vue 2-specific syntax or a component/plugin meant for Vue 2 in a Vue 3 environment. `vue-sweetalert` is strictly Vue 2.","error":"[Vue warn]: Unknown custom element: `<button v-on:click=\"clickHandler\">` - did you register the component correctly?"}],"ecosystem":"npm"}