@vuesimple/vs-alert

Vue Simple Alert

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

A light weight vue plugin built groundup.

Live Demo

Demo: 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>

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