Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Integrating with Other Frameworks Chapter 19

Now, run feathers generate, which will create all the boilerplate for you. When asked

about the API, select Socket.io:

All the other questions can be left to the default value. While still in the Feather console,
type generate service to create a new service. You can call it cats and leave the other

questions to their default values.

Inside the public folder, open index.html and delete everything except a HTML5

boilerplate. You will need three dependencies in the head:

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>

<script

src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></scrip

t>

<script src="//unpkg.com/feathers-

client@^1.0.0/dist/feathers.js"></script>

Write the HTML layout, as follows, in the body tag:

<div id="app">

<div v-for="cat in cats" style="display:inline-block">

<img width="100" height="100" :src="cat.url" />

<p>{{cat.name}}</p>

</div>

<form @submit.prevent="addCat">

<div>

<label>Cat Name</label>

<input v-model="newName" />

</div>

<div>

<label>Cat Url</label>

<input v-model="newUrl" />

</div>

<button>Add cat</button>

<img width="30" height="30" :src="newUrl" />

</form>

</div>