# nuxt-swal
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
`nuxt-swal` Is an extension on use of sweat alert for displaying notifications on nuxt applications
[✨ Release Notes](/CHANGELOG.md)
## Features
- ⛰ Sweatalert2 Notifications
- 🚠 Global alert methods
- 🌲 Easy to extend functionalities
## Quick Setup
Install the module to your Nuxt application with one command:
```bash
npx nuxi module add nuxt-swal
```
That's it! You can now use nuxt-swal in your Nuxt app ✨
Add `nuxt-swal` to modules section of `nuxt.config.js` if not there
```ts
{
modules: ['nuxt-swal']
}
```
# Usage
How to use the package
In composition API we have these two properties
- `$swal` - A Swal instance
- `$swal_mx` - A Swal Mixin instance
When using Options API all the properties injected in the app will be available plus other options
- `$swal`/`$_swal` - A Swal instance
- `$swal_mx`/`$_swal_mx` - A Swal Mixin instance
All the bove provide sweet alert popups and for more on how to use the sweet alert you can reference
[Sweet Alert 2 Docs](https://sweetalert2.github.io/)
## Composition API
```vue
```
## Options API
```vue
```
## Contribution
Local development
```bash
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-swal/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/nuxt-swal
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-swal.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/nuxt-swal
[license-src]: https://img.shields.io/npm/l/nuxt-swal.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/nuxt-swal
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com