# Alert

A simple component for notifiying users of specific information. Good for informative snippets, error messages, and more. It can be shown or hidden dynamically, and even supports auto-hiding after a given time.


  • Includes ARIA role="alert" attribute.
  • Option for dismiss button.
  • Option for timeout.

# Installation


// main.js
import Vue from 'vue';
import { VAlert } from 'vuetensils/src/components';

Vue.component('VAlert', VAlert);


// SomeComponent.vue
import { VAlert } from 'vuetensils/src/components';

export default {
  components: {
  // ...

# Styled Examples

.vts-alert.error {
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 10px;
  color: #900;
  background: #FDD;
.vts-alert.info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 10px;
  color: #009;
  background: #DFF;

.vts-alert.info .vts-alert__dismiss {
  border: 0;
  font: inherit;
  background: transparent;

# Unstyled Examples

# Using v-model

With v-model, you can toggle an alert on or off.

# Dismissible

Allow users to hide an alert

You can provide your own content for the dismiss button with the dismiss slot.

# Countdown

It also supports providing seconds to the visible prop (or v-model) so the alert will hide after a short time.

# Transitions

.fade-leave-active {
  transition: opacity 0.5s ease;

.fade-leave-to {
  opacity: 0;

# Custom Classes

This component can accept a classes prop to customize the output HTML classes:

:classes="{ root: 'root-class', dismiss: 'dismiss-class' }"
Last Updated: 7/12/2021, 9:21:54 PM