Integrating with Other Frameworks Chapter 19The first
tag is a gallery of cats. Then, build a form to add new images of the cats you
collect.
In the body tag, you can always configure the Feathers service with the following lines:
<script>
const socket = io('http://localhost:3030')
const app = feathers()
.configure(feathers.socketio(socket))
const catService = app.service('cats')This is for configuring the client for the browser that will connect to the WebSockets.
The catService method is a handle to the cat database. Next, we write the Vue instance:
new Vue({
el: '#app',
data: {
cats: [],
newName: '',
newUrl: ''
},
methods: {
addCat () {
catService.create({
name: this.newName,
url: this.newUrl
})
this.newName = ''
this.newUrl = ''
}
},Finally, we need to ask for all the cats in the database on startup, while installing a listener
in case new cats are created (even by other users):
mounted () {
catService.find()
.then(page => {
this.cats = page.data
})
catService.on('created', cat => {
this.cats.push(cat)
})
}
})
</script>