# @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)
[](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)