Simple toast notifications for Vue.js
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">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 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.
The notifications can be triggered from the components using this.$toastr property.
For documentation of options, look at toastr
this.$toastr.success('Message', 'Title', options);this.$toastr.error('Message', 'Title', options);this.$toastr.warning('Message', 'Title', options);this.$toastr.info('Message', 'Title', options);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
Details changes for each release are documented in the CHANGELOG.md.
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
Please make sure to read the Contributing Guide before making a pull request.