@vuesimple/vs-alert NPM

Vue Simple Alert

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

A light weight vue plugin built groundup.

forthebadge

📺 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