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>

  # 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