vs-alert

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 vs-alert

yarn add vs-alert

🚀 Usage

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

<script>
  import VsAlert from 'vs-alert';

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

🌎 CDN

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

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

Nuxt.js

Nuxt Code Snippet

After installation,

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

  import Vue from 'vue';
  import VsAlert from '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 type="success">
      Success
    </vs-alert>
  </template>
  

Note

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

⚙ Props

Name	Type	Default	Description
type	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
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