🚨 Alert! Alert! for VueJS

A minimalist alert plugin for VueJS projects.

Install from npm:

npm install vue3-alert-alert

Add the plugin to your Vue project (don't forget to include the css file as well!):

import '@thinknimble/vue3-alert-alert/dist/vue3-alert-alert.css'
import AlertPlugin, { AlertAlert } from '@thinknimble/vue3-alert-alert'

createApp(App).use(AlertPlugin,{}).mount('#app')

Add the <alert-alert> component to the root of your app (ex: App.vue):

<template>
  <div id="app">
    <alert-alert />
  
  </div>
</template>

When registering the plugin pass in optional default configuration options - message: 'An error occurred' type: AlertTypes.info | AlertTypes.warn | AlertTypes.error | AlertTypes.success timeout: 3000

Use the plugin (options api)

this.$Alert.alert({
  type: 'success',
  message: `
    <h2>Success!</h2>
    <p>Your work has been saved.</p>
  `,
  timeout: 6000,
})

Use the plugin (composition api)

const $Alert = inject('$alert')

$Alert.alert({
  type: 'success',
  message: `
    <h2>Success!</h2>
    <p>Your work has been saved.</p>
  `,
  timeout: 6000,
})

Use the plugin (composition api TS)

import import { $alert } from '@/plugins'

const $Alert = inject($alert)

$Alert.alert({
  type: 'success',
  message: `
    <h2>Success!</h2>
    <p>Your work has been saved.</p>
  `,
  timeout: 6000,
})

Additional Configuration (set some defaults)

let configuration = {
    type:'error',
    timeout:1000,
    message:'<h3>Add a default message </h3>'
}

createApp(App).use(AlertPlugin,configuration).mount('#app')

<template>
  <div id="app">
    <alert-alert position="lt"/>
  
  </div>
</template>

Available Options

• type - May be: 'info', 'success', 'warning', or 'error'. This sets the CSS class on the alert with an appropriate color. Defaults to 'info'.
• message - The text to show in the alert. You may use HTML mark-up. Defaults to 'No Content'
• timeout - Auto-dismiss the alert after the given timeout (in milliseconds). Defaults to null.
• position 'rt', 'lt', 'rb', 'lb'