Vue SweetAlert (Legacy)

0.1.18 · abandoned · verified Sun Apr 19

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.

Common errors

```
TypeError: Cannot read property '$swal' of undefined
```
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.

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.
```
[Vue warn]: Unknown custom element: `<button v-on:click="clickHandler">` - did you register the component correctly?
```
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.

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`.

Warnings

breaking 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.
Fix: For Vue 3, use `sweetalert2` directly or the `vue-sweetalert2` package (by `avil13`) which supports Vue 3.
breaking 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.
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.
gotcha 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.
Fix: Plan to migrate to `sweetalert2` (direct usage) or `vue-sweetalert2` for a supported solution.
gotcha This package does not provide TypeScript declarations, making integration into TypeScript projects challenging and lacking type safety.
Fix: For TypeScript support, use `sweetalert2` directly (which has types) or `vue-sweetalert2` (which also provides types).

Install

npm install vue-sweetalert npm
yarn add vue-sweetalert yarn
pnpm add vue-sweetalert pnpm

Imports

VueSweetAlert
wrong:
```
const VueSweetAlert = require('vue-sweetalert')
```
correct:
```
import VueSweetAlert from 'vue-sweetalert'
```
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.
Vue.use
wrong:
```
createApp(App).use(VueSweetAlert)
```
correct:
```
Vue.use(VueSweetAlert)
```
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.
$swal
wrong:
```
Swal.fire('Hello')
```
correct:
```
this.$swal('Hello')
```
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.

Quickstart

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`.

import Vue from 'vue'
import VueSweetAlert from 'vue-sweetalert'

Vue.use(VueSweetAlert)

new Vue({
  el: '#app',
  data: {},
  methods: {
    showBasicAlert() {
      this.$swal('Hello from Vue SweetAlert!')
    },
    showConfirmAlert() {
      this.$swal({
        title: 'Are you sure?',
        text: 'You will not be able to recover this imaginary file!',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes, delete it!'
      }).then((result) => {
        if (result.value) {
          this.$swal('Deleted!', 'Your imaginary file has been deleted.', 'success')
        } else {
          this.$swal('Cancelled', 'Your imaginary file is safe :)', 'error')
        }
      })
    }
  },
  template: `
    <div id="app">
      <button @click="showBasicAlert">Show Basic Alert</button>
      <button @click="showConfirmAlert">Show Confirm Alert</button>
    </div>
  `
})

view raw JSON →