https://github.com/sebastiansulinski/vue-notification
Component for displaying notifications with help of also included Vuex module.
https://github.com/sebastiansulinski/vue-notification
vue-composition-api vue-notification vuejs vuejs3 vuex
Last synced: 4 months ago
JSON representation
Component for displaying notifications with help of also included Vuex module.
- Host: GitHub
- URL: https://github.com/sebastiansulinski/vue-notification
- Owner: sebastiansulinski
- Created: 2020-06-11T12:25:59.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-15T09:48:34.000Z (almost 5 years ago)
- Last Synced: 2024-04-26T07:00:33.394Z (about 1 year ago)
- Topics: vue-composition-api, vue-notification, vuejs, vuejs3, vuex
- Language: Vue
- Homepage:
- Size: 12.7 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Notification
Component for displaying notifications with help of also included Vuex module.
> Please note that this component uses Vue 3 composition api
## Installation
```bash
npm install -D @ssdcode/vue-notification
```
## Usage
First register the module with your vuex store - there are 2 options:
**notification**: displays only a single notification at any given time replacing previous with the new one
```javascript
import Vue from 'vue';
import Vuex from 'vuex';
import { notification } from '@ssdcode/vue-notification';
Vue.use(Vuex);
export default new Vuex.Store({
modules: { notification },
});
```
**notifications**: displays multiple notifications as they are dispatched
```javascript
import Vue from 'vue';
import Vuex from 'vuex';
import { notifications } from '@ssdcode/vue-notification';
Vue.use(Vuex);
export default new Vuex.Store({
modules: { notification: notifications },
});
```
Register `NotificationContainer` component and add it to your application's html structure.
```javascript
import { NotificationContainer } from '@ssdcode/vue-notification';
new Vue({
store,
components: { NotificationContainer },
render: h => h(App),
}).$mount('#app');
```
Example layout using [tailwindcss](https://tailwindcss.com/):
```html
```
You can now call it from anywhere using:
```vue
SHOW NOTIFICATION
import { mapActions } from 'vuex';
export default {
name: 'DemoComponent',
setup() {
const { add } = mapActions('notification', ['add']);
return { add };
},
};
```
## Tests
You can execute tests by calling
```bash
npm run test:unit
```
## Contributions
Contributions are welcome - please make sure all PRs have their associated test.