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

VueFire will automatically detect Vue (so the order is important) and install itself as a

plugin. We will build a very simple database to keep track of the odor of things that
surround us. The following is the HTML layout of our app:

<div id="app">

<ul>

<li v-for="item in items">

{{item.name}}: {{item.smell}}

<button @click="removeItem(item['.key'])">X</button>

</li>

</ul>

<form @submit.prevent="addItem">

<input v-model="newItem" />

smells like

<input v-model="newSmell" />

<button>Add #{{items.length}}</button>

</form>

</div>

In the JavaScript part of our app, we need to specify the API key to authenticate with

Firebase, write the following:

const config = {

databaseURL: 'https://smell-diary.firebaseio.com/'

}

Then, we feed the configuration to Firebase and get a hold of the database:

const firebaseApp = firebase.initializeApp(config)

const db = firebaseApp.database()

This can be done outside the Vue instance. The VueFire plugin installs a new option in the

Vue instance, named firebase; we have to specify that we want to access the /items in

the Firebase app with the item variable:

new Vue({

el: '#app',

firebase: {

items: db.ref('/items')

}

})