examples/TodoApp/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>VuexFire Todo App Demo</title>
    <script src="https://www.gstatic.com/firebasejs/3.7.5/firebase.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex/dist/vuex.js"></script>
    <script src="../../dist/vuexfire.js"></script>
  </head>
  <body>

    <!--
      To see a live example, head to
      https://jsfiddle.net/posva/6w3ks04x/
    -->

    <div id="app">
      <ul>
        <li v-for="item in items" :key="item['.key']">
          {{ item.text }}
          <button @click="removeTodo(item['.key'])">X</button>
        </li>
      </ul>
      <form @submit.prevent="addTodo">
        <input v-model="newTodo">
        <button>Add #{{ items.length }}</button>
      </form>

      <br/>
      <br/>

      <button @click="toggleSource">Toggle Source</button>
    </div>

    <script>
    /* global Vue, Vuex, firebase, VuexFire */
    var config = {
      databaseURL: 'https://vuexfire.firebaseio.com',
    }
    var firebaseApp = firebase.initializeApp(config)
    var db = firebaseApp.database()
    var itemsRef = db.ref('test')
    var todosRef = db.ref('test_2')

    var store = new Vuex.Store({
      // VuexFire will check the type of the property to bind as an array or as
      // an object
      strict: true,
      state: { items: [] },
      mutations: VuexFire.firebaseMutations,
      getters: {
        items: state => state.items,
      },
      actions: {
        setItemsRef: VuexFire.firebaseAction(({ bindFirebaseRef }, ref) => {
          bindFirebaseRef('items', ref, { wait: true })
        }),
      },
    })

    window.vm = new Vue({
      el: '#app',
      store: store,
      computed: Vuex.mapGetters([ 'items' ]),
      data: {
        newTodo: '',
      },

      methods: {
        removeTodo (key) {
          this.source.child(key).remove()
        },
        addTodo () {
          if (this.newTodo.trim()) {
            this.source.push({
              text: this.newTodo,
            })
            this.newTodo = ''
          }
        },
        toggleSource () {
          this.source = this.source === itemsRef
            ? todosRef
            : itemsRef
          this.$store.dispatch('setItemsRef', this.source)
        },
      },

      created () {
        this.source = itemsRef
        this.$store.dispatch('setItemsRef', this.source)
      },
    })
    </script>
  </body>
</html>