# vue2-toast

> A mobile toast plugin for vue2.

Latest version **2.1.0** (published 2019-04-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue2-toast
pnpm add vue2-toast
yarn add vue2-toast
bun add vue2-toast
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2019-04-23 |
| First published | 2017-03-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 308 |
| Author | linxin |
| Maintainers | linxin |
| Keywords | vue.js, vue-plugin, toast |

## Links

- npm: https://www.npmjs.com/package/vue2-toast
- Repository: https://github.com/lin-xin/vue-toast
- Homepage: https://github.com/lin-xin/vue-toast#readme
- Issues: https://github.com/lin-xin/vue-toast/issues
- npm.io page: https://npm.io/package/vue2-toast

## 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

- 2.1.0 (latest) — 2019-04-23
- 2.0.2 — 2018-08-30
- 2.0.1 — 2018-08-01
- 2.0.0 — 2018-07-31
- 1.3.2 — 2018-04-25
- 1.3.1 — 2017-12-23
- 1.3.0 — 2017-07-28
- 1.2.1 — 2017-07-11
- 1.2.0 — 2017-07-05
- 1.1.3 — 2017-05-20
- 1.1.2 — 2017-04-24
- 1.1.1 — 2017-03-31
- 1.1.0 — 2017-03-30
- 1.0.4 — 2017-03-29
- 1.0.3 — 2017-03-28
- … 3 more at https://npm.io/package/vue2-toast/versions

## README

# vue2-toast
A mobile toast plugin for vue2. [中文文档](https://github.com/lin-xin/vue-toast/blob/master/README_zh.md)

<p>
  <a href="https://www.npmjs.com/package/vue2-toast"><img src="https://img.shields.io/npm/dm/vue2-toast.svg" alt="Downloads"></a>
  <a href="https://www.npmjs.com/package/vue2-toast"><img src="https://img.shields.io/npm/v/vue2-toast.svg" alt="Version"></a>
  <br>
</p>

[Interactive Demo](http://blog.gdfengshuo.com/example/#/vue2-toast)

## Usage
Install:

```
npm install vue2-toast -S
```
Import:

```javascript
import 'vue2-toast/lib/toast.css';
import Toast from 'vue2-toast';
Vue.use(Toast);
```
or
```javascript
import 'vue2-toast/lib/toast.css';
import Toast from 'vue2-toast';
Vue.use(Toast, {
    type: 'center',
    duration: 3000,
    wordWrap: true,
    width: '150px'
});
```

Use in component:

```javascript
<template>
    <div id="app">
        <button @click="openTop()">top</button>
        <button @click="openCenter()">center</button>
        <button @click="openBottom()">bottom</button>
		<button @click="openLoading()">loading</button>
    </div>
</template>
export default {
    methods:{
        openTop(){
            this.$toast.top('top');
        },
        openCenter(){
            this.$toast.center('center');
        },
        openBottom(){
            this.$toast('bottom');  // or this.$toast.bottom('bottom'); 
        },
        openLoading(){
            this.$loading('loading...');
			let self = this;
	        setTimeout(function () {
	          self.closeLoading()
	        }, 2000)
        },
        closeLoading(){
            this.$loading.close();
        }
    }
}
```
## work in Nuxt.js
config it in nuxt.config.js

```js
build: {
	vendor: ['vue2-toast'],
	extend (config, ctx) {
	  if (ctx.isClient) {
	    config.resolve.alias['vue'] = 'vue/dist/vue.js';
	  }
	}
}
```

## options

    Vue.use(Toast, [options])

- type : position of Toast. | String | default: 'bottom' | possible 'top, center,bottom'
- duration : Number | default 2500ms
- wordWrap : word wrap. | Boolean | default: false
- width : width of Toast. | String | default: 'auto'

## source code
download in [Github](https://github.com/lin-xin/vue-toast).

## demo
![image](https://raw.githubusercontent.com/lin-xin/vue-toast/master/screenshots/1.gif)

---
_Source: https://npm.io/package/vue2-toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._