# @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:
```code
'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:
```code
'success'
'error'
'info'
'warning'
```
```code
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.
```code
# Make a success toastr
this.$toastr('success, 'i am a toastr success', 'hello')
```
```code
# Make a error toastr
this.$toastr('error, 'i am a toastr error', 'hello')
```
```code
# Make a warning toastr
this.$toastr('warning, 'i am a toastr warning', 'hello')
```
```code
# Make a info toastr
this.$toastr('info, 'i am a toastr info', 'hello')
```
```code
# Make a toastr with custom properties
this.$toastr('add, {
title: 'Heyy', // Toast Title
msg: 'I am a custom property toastr' // Message
clickClose: false, // Click Close Disable
timeout: 1000, // Timeout in ms
position: 'toast-bottom-full-width', // Toastr position
type: 'info', // Toastr type
# Available callbacks
closeOnHover: On mouse over stop timeout can be boolean; default true
clickClose: On click toast close can be boolean; default false
onCreated: On created toast event can be function
onClicked: On clicked toast event can be function
onClosed: On closed toast event can be function
onMouseOver: On mouse over toast event can be function
onMouseOut: On mouse over toast event can be function
})
```
## example
```code
# 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://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:
```code
'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:
```code
'success'
'error'
'info'
'warning'
```
```code
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.
```code
# Make a success toastr
this.$toastr('success, 'i am a toastr success', 'hello')
```
```code
# Make a error toastr
this.$toastr('error, 'i am a toastr error', 'hello')
```
```code
# Make a warning toastr
this.$toastr('warning, 'i am a toastr warning', 'hello')
```
```code
# Make a info toastr
this.$toastr('info, 'i am a toastr info', 'hello')
```
```code
# Make a toastr with custom properties
this.$toastr('add, {
title: 'Heyy', // Toast Title
msg: 'I am a custom property toastr' // Message
clickClose: false, // Click Close Disable
timeout: 1000, // Timeout in ms
position: 'toast-bottom-full-width', // Toastr position
type: 'info', // Toastr type
# Available callbacks
closeOnHover: On mouse over stop timeout can be boolean; default true
clickClose: On click toast close can be boolean; default false
onCreated: On created toast event can be function
onClicked: On clicked toast event can be function
onClosed: On closed toast event can be function
onMouseOver: On mouse over toast event can be function
onMouseOut: On mouse over toast event can be function
})
```
## example
```code
# 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)
