- Vue.js
2.x
# npm $ npm install @vuejs-pt/vue-alert # yarn $ yarn add @vuejs-pt/vue-alert
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.
this.$alert.setDefault({ duration, forceRender, message, transition, type })
this.$alert.clearDefault()
this.$alert.show({ duration, forceRender, message, transition, type })
this.$alert.info({ duration, forceRender, message, transition })
this.$alert.success({ duration, forceRender, message, transition })
this.$alert.warning({ duration, forceRender, message, transition })
this.$alert.danger({ duration, forceRender, message, transition })
this.$alert.hide()
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>