@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