nuxt-swal

nuxt-swal Is an extension on use of sweat alert for displaying notifications on nuxt applications

✨  Release Notes

Features

• ⛰  Sweatalert2 Notifications
• 🚠  Global alert methods
• 🌲  Easy to extend functionalities

Quick Setup

Install the module to your Nuxt application with one command:

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

{
  modules: ['nuxt-swal']
}

Usage

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

Composition API

<template>
  <sw-swal-pop
    :message="message"
    class="p-6 bg-green-400 rounded-xl shadow-md w-full"
    @send-message="sendMessage"
  />
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  message?: string
}>(), {
  message: 'Message with Composition API',
})
const app = useNuxtApp()
const sendMessage = (message: string) => {
  app.$swal_mx.fire({
    title: 'Message received',
    text: message,
    icon: 'success',
  })
  console.log('Received message:', message)
}
</script>

<style lang="scss" scoped>

</style>

Options API

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    message: {
      type: String,
      default: 'Message with Options API',
      required: false,
    },
  },
  setup() {
    return {}
  },
  data() {
    return {

    }
  },
  methods: {
    async sendMessage(message: string) {
      const { value } = await this.$swal.fire<{ value: string }>({
        title: 'Input email address',
        input: 'email',
        inputLabel: 'Your email address',
        inputPlaceholder: 'Enter your email address',
        position: 'center',
        footer: 'This is a footer',
        timerProgressBar: true,
        timer: 5000,
        toast: true,
      })
      console.log('Received message:', message, 'and email:', value)
    },
  },
})
</script>

<style scoped>

</style>

Contribution

# 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