vuejs-noty
Version:
Noty plugin for Vue.js 2
103 lines (70 loc) • 2.02 kB
Markdown
# vuejs-noty
A Vue JS wrapper around [Noty](http://ned.im/noty/). Developped for Vue 2.
## Getting Started
Install using npm:
```bash
$ npm install vuejs-noty
```
Import and register Vue plugin:
```js
import Vue from 'vue'
import VueNoty from 'vuejs-noty'
Vue.use(VueNoty)
```
#### Import noty styles
Import stylesheet in your vue / js components:
```js
import 'vuejs-noty/dist/vuejs-noty.css'
```
Or, import styles in your less / scss stylesheet:
```less
@import '~vuejs-noty/dist/vuejs-noty.css';
```
## Usage
In your Vue.js components, simply call one of these methods:
```js
// Basic alert
this.$noty.show("Hello world!")
// Success notification
this.$noty.success("Your profile has been saved!")
// Error message
this.$noty.error("Oops, something went wrong!")
// Warning
this.$noty.warning("Please review your information.")
// Basic alert
this.$noty.info("New version of the app is available!")
```
All of these methods will return a Noty object instance, so you can use available [API methods](https://ned.im/noty/#/api). Example:
```js
this.$noty.show("Hello world!").setTimeout(4500);
```
Create your own notification with access to the [full list of options](https://ned.im/noty/#/options). Example:
```js
this.$noty.create({
text: 'This is a custom notification!',
type: 'warning',
layout: 'topCenter',
timeout: 4500,
progressBar: false
}).show();
```
## Configuration
#### Config defaults
You can set a default configuration object when registering the plugin. Example:
```js
Vue.use(VueNoty, {
timeout: 4000,
progressBar: true,
layout: 'topCenter'
})
```
#### Config override
All of the alert methods can accept a config object as second parameter if you need to override the defaults. Example:
```js
this.$noty.info("Hey! Something very important here...", {
killer: true,
timeout: 6000,
layout: 'topRight'
})
```
For more information about available configuration properties, please read [Noty's documentation](https://ned.im/noty/#/options).