Nuxt Alerts

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

import {BaseAlert} from '@/components'

Global usage

Vue.component(BaseAlert.name, BaseAlert)

For local usage

export default {
  components: {
    BaseAlert
  }
}

Examples

<base-alert type="default">
  <strong>Default!</strong> This is a default alert—check it out!
</base-alert>

<base-alert type="primary">
  <strong>Primary!</strong> This is a primary alert—check it out!
</base-alert>

<base-alert type="info">
  <strong>Info!</strong> This is a info alert—check it out!
</base-alert>

<base-alert type="success">
  <strong>Success!</strong> This is a success alert—check it out!
</base-alert>

<base-alert type="danger">
  <strong>Danger!</strong> This is a danger alert—check it out!
</base-alert>

<base-alert type="warning">
  <strong>Warning!</strong> This is a warning alert—check it out!
</base-alert>

Dismissing

<base-alert type="default" dismissable>
  <strong>Default!</strong> This is a default alert—check it out!
</base-alert>

<base-alert type="primary" dismissable>
  <strong>Primary!</strong> This is a primary alert—check it out!
</base-alert>

<base-alert type="info" dismissable>
  <strong>Info!</strong> This is a info alert—check it out!
</base-alert>

<base-alert type="success" dismissable>
  <strong>Success!</strong> This is a success alert—check it out!
</base-alert>

<base-alert type="danger" dismissable>
  <strong>Danger!</strong> This is a danger alert—check it out!
</base-alert>

<base-alert type="warning" dismissable>
  <strong>Warning!</strong> This is a warning alert—check it out!
</base-alert>

Props

PROP NAME TYPE DEFAULT DESCRIPTION
type String default Alert type
dismissible Boolean N/A Whether alert is dismissible (closeable)
icon String N/A Alert icon to display