https://github.com/sunabozu/vue-feathers
Integration with the Feathers framework for Vue.js
https://github.com/sunabozu/vue-feathers
feathers vue
Last synced: 3 months ago
JSON representation
Integration with the Feathers framework for Vue.js
- Host: GitHub
- URL: https://github.com/sunabozu/vue-feathers
- Owner: sunabozu
- License: mit
- Created: 2016-09-08T13:32:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-21T09:27:33.000Z (over 7 years ago)
- Last Synced: 2025-01-17T17:08:47.108Z (3 months ago)
- Topics: feathers, vue
- Language: JavaScript
- Size: 6.84 KB
- Stars: 78
- Watchers: 5
- Forks: 9
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-feathers
> [Feathers](http://feathersjs.com/) is a minimalist real-time web framework written in JavaScript.
> Vue-Feathers is a plugin for Vue.js that integrates it with Feathers.
**NOTE:** It's supposed to be compatible both with Vue 1.x and 2.x. It requires IE9+ or Safari 5+
### Install
``` bash
npm install vue-feathers --save
```
### Usage
``` js
// Include and set up feathers client
const Feathers = require('feathers/client')
const hooks = require('feathers-hooks')
const authentication = require('feathers-authentication/client')
const socketio = require('feathers-socketio/client')
const io = require('socket.io-client')
const socket = io('http://localhost:3030/')
const feathers = Feathers()
.configure(socketio(socket))
.configure(hooks())
.configure(authentication({storage: window.localStorage}))
// Include it as a CommonJS module
const Vue = require('vue')
const vueFeathers = require('vue-feathers')
// And plug it in
Vue.use(vueFeathers, feathers)
```
Now in every component you get a new property called `$services`, which allows you to interact with all of your Feathers services:
``` js
this.$services.messages.find()
// or
this.$services.messages.create(...)
```
To subscribe on the [events](http://docs.feathersjs.com/real-time/events.html) your services generate, you just need to use a separate `feathers` section in your component:
``` js
export default {
data() {
return {
...
}
},
methods: {
...
}
feathers: { // here is our section
messages: { // here is the subsection for the 'messages' service
created(data) {
...
},
updated(data) {
...
}
}
}
}
```
Vue-feathers does all the clean up before your component is destroyed (using the `removeListener` function).
In case you need to do something more complex, there is a `$feathers` property for that:
``` js
this.$feathers.service('messages').on(...)
```
### License
[MIT](http://opensource.org/licenses/MIT)