Registry / web-framework / vue-sweetalert

vue-sweetalert

library0.1.18jsnpmunverified

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.

web-framework communication

npm install vue-sweetalert

package ↗

INSTALL

IMPORT

SIG · VUE-SWEETALERT

vue-sweetalert

web-frameworkjavascriptv0.1.18

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueSweetAlert

✓ import VueSweetAlert from 'vue-sweetalert'

✗ const VueSweetAlert = require('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

✓ Vue.use(VueSweetAlert)

✗ createApp(App).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

✓ this.$swal('Hello')

✗ Swal.fire('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.

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> ` })

Debug

Known issues

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

affects: all

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

affects: all

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

affects: all

gotchaThis 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).

affects: all

Errors

Common errors & fixes

TypeError: Cannot read property '$swal' of undefined

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?

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

Upgrade

Version history

0.1.18latest on npm

Audit

Dependencies

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

Agent activity

34 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vue-sweetalert ↗