npmpackage.info

Gathering detailed insights and metrics for vue-sweetalert2

Other packages similar to vue-sweetalert2

nuxt-sweetalert2

1.0.0

A minimal sweetalert2 module based on vue-sweetalert2 with global options

vue-simple-alert

1.1.1

Simple alert(), confirm(), prompt() for Vue.js, using sweetalert2.

nuxtjs-sweetalert2

2.0.1

A minimal sweetalert2 module based on vue-sweetalert2 with global options

sweetalert2-mod

1.0.1

Sweetalert2 with custom styles

Gathering detailed insights and metrics for vue-sweetalert2

vue-sweetalert2 - 5.0.11 | npmpackage.info

vue-sweetalert2

A convenient wrapper for sweetalert2.

5.0.11

668

TypeScript

13.87 kB

10,810,527 3.1

Installations

npm install vue-sweetalert2

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM, UMD

Node Version

18.20.2

NPM Version

10.5.0 Score

Supply Chain

99.6

Quality

76.1

Maintenance

Vulnerability

100

License

Pull Requests

Open

0

Total

45

Closed

7

Merged

38

Issues

Open

3

Total

117

Closed

114

Releases

v4.2.1

Updated on Mar 18, 2021

v4.2.0

Updated on Jan 28, 2021

v3.0.6

Updated on Jun 29, 2020

v3.0.5

Updated on May 06, 2020

View All 4 releases

Languages

TypeScript

CSS

JavaScript

Vue

Shell

HTML

TypeScript (36.54%)

CSS (25.07%)

JavaScript (16.75%)

Vue (13.47%)

Shell (4.26%)

HTML (3.91%)

Developer

avil13

Download Statistics

Total Downloads

10,810,527

Last Day

1,555

Last Week

42,869

Last Month

188,630

Last Year

2,274,877

GitHub Statistics

668 Stars

238 Commits

78 Forks

7 Watchers

2 Branches

16 Contributors

Updated on Jun 25, 2025

Bundle Size

43.81 kB

Minified

13.87 kB

Minified + Gzipped

Bundlephobia

Maintainers

View All 16 Contributors

Package Meta Information

Latest Version

5.0.11

Package Id

vue-sweetalert2@5.0.11

Unpacked Size

157.10 kB

Size

46.70 kB

File Count

NPM Version

10.5.0

Node Version

18.20.2

Published on

Jun 04, 2024

Total Downloads

Cumulative downloads

Total Downloads

10,810,527

Last Day

-11.1%

1,555

Compared to previous day

Last Week

-9%

42,869

Compared to previous week

Last Month

4.8%

188,630

Compared to previous month

Last Year

-2%

2,274,877

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

vue-sweetalert2

Vue.js wrapper for SweetAlert2. With support SSR.

changelog

Attention:

When using "Vue3: Composition API" it is better not to use this wrapper. It is more practical to call sweetalert2 directly.

Also, it is better to do it to get feedback faster, and be closer to the documentation.

Demo

vue-sweetalert2 demo

Get started

Basics

Bash

1npm install -S vue-sweetalert2

Add types to TypeScript project

1{
2  //...tsconfig.json
3  "types": [
4    "vue-sweetalert2"
5  ],
6}

vue 2

1// main.js
2import Vue from 'vue';
3import VueSweetalert2 from 'vue-sweetalert2';
4
5// If you don't need the styles, do not connect
6import 'sweetalert2/dist/sweetalert2.min.css';
7
8Vue.use(VueSweetalert2);

vue 3

1// main.js
2import { createApp } from 'vue'
3import App from './App.vue'
4import './index.css'
5
6import VueSweetalert2 from 'vue-sweetalert2';
7import 'sweetalert2/dist/sweetalert2.min.css';
8
9const app = createApp(App)
10
11app.use(VueSweetalert2);
12
13app.mount('#app');

Now in the global object, you can access all the methods of sweetalert2.

1// example-vue-component.vue
2<template>
3  <button @click="showAlert">Hello world</button>
4</template>
5
6<script>
7export default {
8  methods: {
9    showAlert() {
10      // Use sweetalert2
11      this.$swal('Hello Vue world!!!');
12    },
13  },
14};
15</script>

// Or

1Vue.swal('Hello Vue world!!!');

Global options

If you want to add global options like button colors, do something like this:

1// main.js
2import Vue from 'vue';
3import VueSweetalert2 from 'vue-sweetalert2';
4
5const options = {
6  confirmButtonColor: '#41b882',
7  cancelButtonColor: '#ff7674',
8};
9
10Vue.use(VueSweetalert2, options);

Custom styling

Using scss styles are loaded so

1// main.js
2import Vue from 'vue';
3import VueSweetalert2 from 'vue-sweetalert2';
4
5Vue.use(VueSweetalert2);

1// style.scss
2@import '~sweetalert2/src/variables';
3
4$swal2-background: #990000;
5
6@import '~sweetalert2/src/sweetalert2';

Nuxt.js

Install dependencies:

1npm install -S vue-sweetalert2

Add vue-sweetalert2/nuxt to modules section of nuxt.config.js

1{
2  modules: ['vue-sweetalert2/nuxt'];
3}

Or pass in global options like this:

1{
2  modules: [
3    'vue-sweetalert2/nuxt',
4  ],
5  sweetalert: {
6    confirmButtonColor: '#41b882',
7    cancelButtonColor: '#ff7674'
8  }
9}

Using a different theme in Nuxt

Add vue-sweetalert2/nuxt to modules section of nuxt.config.js

1{
2  // Before doing so, install the "@sweetalert2/theme-dark"
3  css:     [ '@sweetalert2/theme-dark' ],
4  modules: ['vue-sweetalert2/nuxt/no-css'];
5}

The documentation for `sweetalert2`, you can find here.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

License

Determines if the project has defined a license.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

3.1

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vue-sweetalert2

Other packages similar to vue-sweetalert2

vue-sweetalert2

Installations

Developer Guide

Yes

CommonJS, ESM, UMD

18.20.2

10.5.0

Score

Pull Requests

0

45

7

38

Issues

3

117

114

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

43.81 kB

13.87 kB

Maintainers

Package Meta Information

Total Downloads

10,810,527

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

vue-sweetalert2

Attention:

Demo

Get started

Basics

Bash

Add types to TypeScript project

vue 2

vue 3

Global options

Custom styling

Nuxt.js

Using a different theme in Nuxt

The documentation for sweetalert2, you can find here.

10

10

10

0

0

0

0

0

0

0

0

0

0

3.1

/10

The documentation for `sweetalert2`, you can find here.