@vuejs-pt/vue-alert

Table of Contents

• Demo
• Requirements
• Installation
• API
• Usage
• License

Demo

Demo

Requirements

• Vue.js 2.x

Installation

# npm
$ npm install @vuejs-pt/vue-alert

# yarn
$ yarn add @vuejs-pt/vue-alert

API

Available methods inside a VueJS component

The same parameters apply to all the methods in $alert expect the method hide and clearDefault

Parameter	Type	Default	Description
duration	number	5000	The duration for which the alert will be shown
forceRender	boolean	true	Force render when alert contents are changed
message	string	empty	Message to be shown
transition	string	fade	Transition fade when switching between alerts, can be user defined
type	string	fade	Type of transition

If any of the values is not present on the method call then the default values will be used.

Set default values

this.$alert.setDefault({
  duration,
  forceRender,
  message,
  transition,
  type
})

Clear default values

this.$alert.clearDefault()

Show an alert

this.$alert.show({
  duration,
  forceRender,
  message,
  transition,
  type
})

Show an alert type info

this.$alert.info({
  duration,
  forceRender,
  message,
  transition
})

Show an alert type success

this.$alert.success({
  duration,
  forceRender,
  message,
  transition
})

Show an alert type warning

this.$alert.warning({
  duration,
  forceRender,
  message,
  transition
})

Show an alert type danger

this.$alert.danger({
  duration,
  forceRender,
  message,
  transition
})

Hide alert

this.$alert.hide()

Usage

The component vue-alert must be included either in the component using the vue-alert or a parent of this component, for example if there’s a vue-alert instance at the root of the app.

It is possible to access the vue-alert component using the $alert variable on the component instance as shown in the below example.

The default bootstrap style are applied to the alert but this can be overriden by applying a new style to the following classes:

• alert
• alert-info
• alert-success
• alert-warning
• alert-danger

The following transitions are available:

• fade with force render
• smooth without force render

main.js

import Vue from 'vue'
import VueAlert from '@vuejs-pt/vue-alert'
import App from './App'

Vue.use(VueAlert)

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

App.vue

<template>
    <div id="app">
        <vue-alert></vue-alert>
        <example></example>
    </div>
</template>

<script>
import Example from './Example'

export default {
  components: {
    Example
  },
  mounted () {
    this.$alert.success({ message: 'Component mounted!' })
  }
}
</script>

<style>
.vue-alert {
  margin-top: 10px;
}
</style>

Example.vue

<template>
  <div>
    <h1>Example component</h1>
    <button class="btn btn-default" @click="showAlert">Click to use vue-alert</button>
  </div>
</template>

<script>
export default {
  methods: {
    showAlert () {
      this.$alert.show({
        message: 'Clicked the button!'
      })
    }
  }
}
</script>

License

The MIT License