Vue Simple Alert

🗃 A simple vue alert. Perfect for all your alert scenarios.

A light weight vue plugin built groundup.

📺 Live Demo

Code Sandbox: Link

🛠 Install

npm i @vuesimple/vs-alert

🚀 Usage

<template>
  <vs-alert variant="success"> Success </vs-alert>
</template>

<script>
  import VsAlert from '@vuesimple/vs-alert';

  export default {
    components: {
      VsAlert,
    },
  };
</script>

🌎 CDN

<script src="https://unpkg.com/@vuesimple/vs-alert@<version>/dist/vs-alert.min.js"></script>

// Main/Entry file
app.use(VsAlert.plugin);

<template>
  <vs-alert variant="success"> Success </vs-alert>
</template>

Nuxt Code Snippet

After installation,

• Create a file /plugins/vs-alert.js

  import Vue from 'vue';
  import VsAlert from '@vuesimple/vs-alert';
  
  Vue.component('vs-alert', VsAlert);

• Update nuxt.config.js

  module.exports = {
    ...
    plugins: [
      { src: '~plugins/vs-alert', mode: 'client' }
      ...
    ]
  }

• In the page/ component

  <template>
    <vs-alert variant="success"> Success </vs-alert>
  </template>

Note

• For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
• You can also do import VsAlert from '@vuesimple/vs-alert' & add in component:{VsAlert} and use it within component, without globally installing in plugin folder.

⚙ Props

| Name | Type | Default | Description | | --------- | ------- | ------- | --------------------------------------------------------------------- | | variant | String | - | Type of alert to be shown. (success, warning, error, info, secondary) | | title | String | - | The alert title (text only). For HTML, use the header slot. | | showClose | Boolean | false | Show alert close icon | | small | Boolean | false | Applies reduced padding | | toast | Boolean | false | Applies toast design | | noBg | Boolean | false | Remove background color |

🔥 Events

| Name | Description | | ----- | ---------------------------------------------------------------------------- | | close | Emitted when the alert close icons is clicked. Listen for it using @close. |

📎 Slots

You can define own item markup via slots:

| Name | Description | | --------- | --------------------------------------------- | | (default) | Holds the alert content and can contain HTML. | | icon | Slot to add custom icon for type | | title | Slot to add custom title |