# @deveodk/vue-toastr
> A easy to use toastr plugin inspired by CodeSeven/toastr made without jquery with pure vue.js
Latest version **1.1.0** (published 2019-08-20) · MIT license · 0 weekly downloads
## Install
```sh
npm install @deveodk/vue-toastr
pnpm add @deveodk/vue-toastr
yarn add @deveodk/vue-toastr
bun add @deveodk/vue-toastr
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.0 |
| Published | 2019-08-20 |
| First published | 2017-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 110.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 63 |
| Author | Jason Kelly |
| Maintainers | deveodk |
| Keywords | vuejs, vue, vue-component, component, toastr, CodeSeven/toastr |
## Links
- npm: https://www.npmjs.com/package/@deveodk/vue-toastr
- Repository: https://github.com/deveodk/vue-toastr
- Homepage: https://github.com/deveodk/vue-toastr#readme
- Issues: https://github.com/deveodk/vue-toastr/issues
- npm.io page: https://npm.io/package/@deveodk/vue-toastr
## Alternatives
- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads
## Recent versions
- 1.1.0 (latest) — 2019-08-20
- 1.0.4 — 2017-06-06
- 1.0.3 — 2017-06-06
- 1.0.2 — 2017-06-05
- 1.0.1 — 2017-06-05
- 1.0.0 — 2017-05-31
- 0.0.1 — 2017-05-30
- 0.0.0 — 2017-05-30
## README
# @Deveodk/vue-toastr
[](https://www.npmjs.com/package/@deveodk/vue-toastr) [](https://vuejs.org/)
> A easy to use toastr plugin inspired by CodeSeven/toastr made without jquery with pure vue.js
# Demo
See a functioning demo
deveo demo site
## Installation
```bash
npm install --save @deveodk/vue-toastr
```
## Usage
### Bundler (Webpack, Rollup)
```js
import Vue from 'vue'
import VueToastr from '@deveodk/vue-toastr'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
// If you would like custom styling of the toastr the css file can be replaced
import '@deveodk/vue-toastr/dist/@deveodk/vue-toastr.css'
Vue.use(VueToastr)
```
### Browser
```html
```
## Configuration
The toastr defaults can be configured in the following way
Available positions:
```js
'toast-top-right'
'toast-bottom-right'
'toast-bottom-left'
'toast-top-left'
'toast-top-full-width'
'toast-bottom-full-width'
'toast-top-center'
'toast-bottom-center'
```
Available types:
```js
'success'
'error'
'info'
'warning'
```
```js
import VueToastr from '@deveodk/vue-toastr'
Vue.use(VueToastr, {
defaultPosition: 'toast-bottom-left',
defaultType: 'info',
defaultTimeout: 1000
})
```
## Usage
The `$toastr` prototype hook and how to use it.
```js
// Make a success toastr
this.$toastr('success', 'i am a toastr success', 'hello')
```
```js
// Make a error toastr
this.$toastr('error', 'i am a toastr error', 'hello')
```
```js
// Make a warning toastr
this.$toastr('warning', 'i am a toastr warning', 'hello')
```
```js
// Make a info toastr
this.$toastr('info', 'i am a toastr info', 'hello')
```
```js
// Make a toastr with custom properties
this.$toastr('add', {
title: 'Heyy', // Toast Title
msg: 'I am a custom property toastr' // Message
timeout: 1000, // Timeout in ms
position: 'toast-bottom-full-width', // Toastr position
type: 'info', // Toastr type
closeOnHover: true, // On mouse over stop timeout can be boolean; default true
clickClose: false, // On click toast close can be boolean; default false
// Available callbacks
onCreated: () => console.log('toast was created'),
onClicked: () => console.log('toast was clicked'),
onClosed: () => console.log('toast was closed'),
onMouseOver: () => console.log('toast was moused over'),
onMouseOut: () => console.log('mouse left the toast')
})
```
## example
```js
// Using toastr in real world application
```
## Special thanks
A special thanks to [s4l1h](https://github.com/s4l1h) for creating the original package. About 30% of the source code is forked from vue-toastr
## License
[MIT](http://opensource.org/licenses/MIT)
[](https://deveo.dk)
---
_Source: https://npm.io/package/@deveodk/vue-toastr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
[](https://www.npmjs.com/package/@deveodk/vue-toastr) [](https://vuejs.org/)
> A easy to use toastr plugin inspired by CodeSeven/toastr made without jquery with pure vue.js
# Demo
See a functioning demo
deveo demo site
## Installation
```bash
npm install --save @deveodk/vue-toastr
```
## Usage
### Bundler (Webpack, Rollup)
```js
import Vue from 'vue'
import VueToastr from '@deveodk/vue-toastr'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
// If you would like custom styling of the toastr the css file can be replaced
import '@deveodk/vue-toastr/dist/@deveodk/vue-toastr.css'
Vue.use(VueToastr)
```
### Browser
```html
```
## Configuration
The toastr defaults can be configured in the following way
Available positions:
```js
'toast-top-right'
'toast-bottom-right'
'toast-bottom-left'
'toast-top-left'
'toast-top-full-width'
'toast-bottom-full-width'
'toast-top-center'
'toast-bottom-center'
```
Available types:
```js
'success'
'error'
'info'
'warning'
```
```js
import VueToastr from '@deveodk/vue-toastr'
Vue.use(VueToastr, {
defaultPosition: 'toast-bottom-left',
defaultType: 'info',
defaultTimeout: 1000
})
```
## Usage
The `$toastr` prototype hook and how to use it.
```js
// Make a success toastr
this.$toastr('success', 'i am a toastr success', 'hello')
```
```js
// Make a error toastr
this.$toastr('error', 'i am a toastr error', 'hello')
```
```js
// Make a warning toastr
this.$toastr('warning', 'i am a toastr warning', 'hello')
```
```js
// Make a info toastr
this.$toastr('info', 'i am a toastr info', 'hello')
```
```js
// Make a toastr with custom properties
this.$toastr('add', {
title: 'Heyy', // Toast Title
msg: 'I am a custom property toastr' // Message
timeout: 1000, // Timeout in ms
position: 'toast-bottom-full-width', // Toastr position
type: 'info', // Toastr type
closeOnHover: true, // On mouse over stop timeout can be boolean; default true
clickClose: false, // On click toast close can be boolean; default false
// Available callbacks
onCreated: () => console.log('toast was created'),
onClicked: () => console.log('toast was clicked'),
onClosed: () => console.log('toast was closed'),
onMouseOver: () => console.log('toast was moused over'),
onMouseOut: () => console.log('mouse left the toast')
})
```
## example
```js
// Using toastr in real world application
```
## Special thanks
A special thanks to [s4l1h](https://github.com/s4l1h) for creating the original package. About 30% of the source code is forked from vue-toastr
## License
[MIT](http://opensource.org/licenses/MIT)
[](https://deveo.dk)
---
_Source: https://npm.io/package/@deveodk/vue-toastr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._