vue-toastr-2
vue-toastr-2 copied to clipboard
Simple toast notifications for Vue.js
vue-toastr-2
Simple toast notifications for Vue.js
Installation
Direct Download / CDN
https://unpkg.com/vue-toastr-2/dist/vue-toastr-2
unpkg.com provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like https://unpkg.com/[email protected]/dist/vue-toastr-2.js
Include vue-toastr-2 after Vue and it will install itself automatically:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-toastr-2/dist/vue-toastr-2.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-toastr-2/dist/vue-toastr-2.min.css">
NPM
These dependencies are required to use vue-toastr-2 while using npm
- jquery
- toastr
$ npm install jquery
$ npm install toastr
$ npm install vue-toastr-2
Yarn
$ yarn add jquery
$ yarn add toastr
$ yarn add vue-toastr-2
When used with a module system, you must explicitly install the vue-toastr-2
via Vue.use()
:
import Vue from 'vue'
import VueToastr2 from 'vue-toastr-2'
import 'vue-toastr-2/dist/vue-toastr-2.min.css'
window.toastr = require('toastr')
Vue.use(VueToastr2)
You don't need to do this when using global script tags.
Usage
The notifications can be triggered from the components using this.$toastr property.
For documentation of options, look at toastr
Success
this.$toastr.success('Message', 'Title', options);
Error
this.$toastr.error('Message', 'Title', options);
Warning
this.$toastr.warning('Message', 'Title', options);
info
this.$toastr.info('Message', 'Title', options);
Dev Build
You will have to clone directly from GitHub and build vue-toastr-2
yourself if
you want to use the latest dev build.
$ git clone https://github.com/saivarunk/vue-toastr-2.git node_modules/vue-toastr-2
$ cd node_modules/vue-toastr-2
$ npm install
$ npm run build
:scroll: Changelog
Details changes for each release are documented in the CHANGELOG.md.
:exclamation: Issues
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
:muscle: Contribution
Please make sure to read the Contributing Guide before making a pull request.