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
Default! This is a default alert—check it out!
Primary! This is a primary alert—check it out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it out!
Danger! This is a danger alert—check it out!
Warning! This is a warning alert—check it out!
<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
Default! This is a default alert—check it out!
Primary! This is a primary alert—check it out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it out!
Danger! This is a danger alert—check it out!
Warning! This is a warning alert—check it out!
<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 |