VueSimple

Alert

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

codesandboxDemolinkgithubGitHublink

Install ​

bash
npm i @vuesimple/vs-alert
npm i @vuesimple/vs-alert

Usage ​

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

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

  export default {
    components: {
      VsAlert,
    },
  };
</script>
<template>
  <vs-alert variant="success"> Success </vs-alert>
</template>

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

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

CDN ​

html
<script src="https://unpkg.com/@vuesimple/vs-alert@<version>/dist/index.min.js"></script>
<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.

javascript
// Main/Entry file
app.use(VsAlert.plugin);
// Main/Entry file
app.use(VsAlert.plugin);
html
<template>
  <vs-alert variant="success"> Success </vs-alert>
</template>
<template>
  <vs-alert variant="success"> Success </vs-alert>
</template>

Nuxt.js ​

Nuxt Code Snippet

After installation,

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

    javascript
    import Vue from 'vue';
import VsAlert from '@vuesimple/vs-alert';

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

Vue.component('vs-alert', VsAlert);

  • Update nuxt.config.js

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

  • In the page/ component

    html
    <template>
  <vs-alert variant="success"> Success </vs-alert>
</template>
    <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 ​

NameTypeDefaultDescription
variantString-Type of alert to be shown. (success, warning, error, info)
titleString-The alert title (text only). For HTML, use the header slot.
showCloseBooleanfalseShow alert close icon
smallBooleanfalseApplies reduced padding
toastBooleanfalseApplies toast design
noBgBooleanfalseRemove background color

Events ​

NameDescription
closeEmitted when the alert close icons is clicked. Listen for it using @close.

Slots ​

You can define own item markup via #slot-name:

NameDescription
(default)Holds the alert content and can contain HTML.
iconSlot to add custom icon for type
titleSlot to add custom title

Example (Slot Title) ​

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