Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

GitHub

Demo

Alert style

Success Heading

Success Message

Warning Heading

Warning Message

Error Heading

Error Message

Information Heading

Information Message

Secondary Heading

Secondary Message

Toast style

Success Heading

Success Message

Warning Heading

Warning Message

Error Heading

Error Message

Information Heading

Information Message

Secondary Heading

Secondary Message

Small style

Success Message

Warning Message

Error Message

Information Message

Secondary Message

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/index.min.js"></script>

TIP

Replace <version> with a version number in the above url.

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

<template>
  <vs-alert variant="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 '@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>

TIP

• For older Nuxt versions, use <no-ssr>...</no-ssr> tag.
• You can also do import VsAlert from '@vuesimple/vs-alert' & add in components:{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)
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 #slot-name:

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

Example (Slot Title)

<vs-alert variant="success">
  <template #title>Success Heading</template>
  Success Message
</vs-alert>