Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcius-studio/vue-notice
Vue.js non-blocking notifications, based on Noty.js
https://github.com/marcius-studio/vue-notice
notifications noty notyjs vue vue-notice
Last synced: about 1 month ago
JSON representation
Vue.js non-blocking notifications, based on Noty.js
- Host: GitHub
- URL: https://github.com/marcius-studio/vue-notice
- Owner: marcius-studio
- License: mit
- Created: 2017-07-07T19:31:54.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-06-22T19:03:36.000Z (almost 4 years ago)
- Last Synced: 2024-01-02T23:28:28.735Z (5 months ago)
- Topics: notifications, noty, notyjs, vue, vue-notice
- Language: CSS
- Homepage: http://ned.im/noty/
- Size: 31.3 KB
- Stars: 48
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - vue-notice - Vue.js 2 wrapper around Noty.js with native API (Components & Libraries / UI Components)
- awesome-vue - vue-notice - Vue.js 2 wrapper around Noty.js with native API (Components & Libraries / UI Components)
- awesome-vue - vue-notice - Vue.js 2 wrapper around Noty.js with native API (Components & Libraries / UI Components)
- awesome-vue - vue-notice - Vue.js 2 wrapper around Noty.js with native API (Components & Libraries / UI Components)
- awesome-vue - vue-notice - Vue.js 2 wrapper around Noty.js with native API (Components & Libraries / UI Components)
- awesome-vue - vue-notice - Vue.js 2 wrapper around Noty.js with native API (Components & Libraries / UI Components)
- awesome-vue - vue-notice - Vue.js 2 wrapper around Noty.js with native API (Components & Libraries / UI Components)
- awesome-vue - vue-notice - Vue.js 2 wrapper around Noty.js with native API (Components & Libraries / UI Components)
README
# Vue Notice
Vue.js non-blocking notifications, based on [Noty.js](https://ned.im/noty)
## How to start
1) Install in your project
```sh
npm i @marcius-studio/vue-notice
yarn add @marcius-studio/vue-notice
```
2) Import as plugin. Full list [Noty API](https://ned.im/noty/#/options) options.
```js
import Vue from 'vue'
import VueNotice from '@marcius-studio/vue-notice'
Vue.use(VueNotice)
// OR rewrite default options
Vue.use(VueNotice, {
layout: 'topRight', // position: 'top', 'topLeft', etc. https://ned.im/noty/#/types
theme: 'mint', // deffrents themes https://ned.im/noty/#/themes
timeout: 5000, // default 5s. Set 0 if need no countdown, can be override for each notice
progressBar: true,
})
```
3) Connect theme styles to your project. Style depends on theme: `mint`, `sunset`, `relax` etc.
```scss
// import base styles
@import "~@marcius-studio/vue-notice/static/main.scss";
// import theme. Change "mint.scss" to another theme if nedded
@import "~@marcius-studio/vue-notice/static/themes/mint.scss";
```
OR download the latest version of styles [noty.css](https://github.com/needim/noty/blob/master/lib/noty.css)
## Usage
```js
this.$notice.success('success notice') // green
this.$notice.error('error notice') // red
this.$notice.warning('warning notice') // yellow
this.$notice.info('info notice') // blue
```
Example with options. Same for `error`, `warning`, `info`.
```js
this.$notice.success('Success notice with overrided options', {
timeout: 5000, // 5s. Set 0 if need no countdown
})
```
## Contributors
## Licence
[MIT](http://opensource.org/licenses/MIT)