Skip to content

vuejs-pt/vue-alert

Repository files navigation

@vuejs-pt/vue-alert

CircleCI Coverage Status NPM downloads NPM version Vue 2.x GitHub license

Table of Contents

Demo

Demo

Requirements

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