jv3-alert

A Vue 3 alert/dialog component.

Features

• Various alert types (info, error, confirm, etc.)
• Customizable colors
• Modal animation
• Keyboard lock

Installation

npm install jv3-alert

Usage

In main.ts:

import { createApp } from 'vue';
import JV3Alert from './jv3-alert';

const app = createApp(App);
app.use(JV3Alert);
app.mount('#app');

In your component:

<template>
  <div>
    <button @click="showAlert">Show Alert</button>
  </div>
</template>

<script setup>
import { useJAlert } from "jv3-alert";
const jalert = useJAlert();
// or
import { inject } from 'vue';
const jalert = inject('jalert');

function alertMessage() {
  jalert.alert({
    title: "Alert !!",
    message: "This is a custom alert message.",
    onClose: () => {
      console.log("Alert closed");
    },
  });
}

function confirmMessage() {
  jalert.confirm("confirm", (result) => {
    if (result) {
      jalert.info("You clicked Yes", { title: "Confirmed", color: "green" });
      return;
    } else {
      jalert.info("You clicked No", { color: "red", title: "Cancelled" });
    }
  });
}

function errorMessage() {
  jalert.error({
    title: "Error !!",
    message: "This is a custom error message.",
    onClose: () => {
      console.log("Error closed");
    },
  });
}

</script>