vuejs firebase list

index.html

<div id="app">
  <h2>Firebase List</h2>
  <div v-for="item in items" class="item">
    <button @click="removeItem(item)">&times;</button> {{item.value}} <small>{{new Date(item.ts).toGMTString()}}</small>
  </div>

  <div>
    <form><input v-model="tempItem"><button @click="addItem(tempItem); tempItem = ''" :disabled="tempItem===''"> + </button> </form>
  </div>
</div>

script.js

var config = {
  apiKey: "AIzaSyB_6jCXJa6PJi37FiHaXaBRX3ZAEAD2FmY",
  authDomain: "catcon-5b2a8.firebaseapp.com",
  databaseURL: "https://catcon-5b2a8.firebaseio.com",
};

// requires access to be set to public, or have user logged in
// to set firebase database to public use these permissions:
// {
//   "rules": {
//     ".read": true,
//     ".write": true
//   }
// }

var firebaseApp = firebase.initializeApp(config)

var db = firebaseApp.database()

var vm = new Vue({
  el: '#app',
  data: {
    tempItem: ''
  },
  firebase: {
    items: db.ref('db/items'),
    anObject: {
      source: db.ref('db'),
      // optionally bind as an object
      asObject: true,
      // optionally provide the cancelCallback
      cancelCallback: function () {}
    }
  },
  methods: {
    addItem: function (value) {
      var ts = Date.now() // generate timestamp
      // send value and timestamp to firebase
      this.$firebaseRefs.items.push({value: value, ts: ts})
    },
    removeItem: function (item) {
      this.$firebaseRefs.items.child(item['.key']).remove()
    }
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://gstatic.com/firebasejs/3.5.2/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuefire/1.3.1/vuefire.min.js"></script>

style.sass

//  ffffff-84dcc6-a5ffd6-ffa69e-ff686b
//  0b132b-1c2541-3a506b-5bc0be-6fffe9
$col0: #0b132b
$col1: #1c2541
$col2: #3a506b
$col3: #5bc0be
$col4: #6fffe9

body
  background: $col0

input, button
  background: $col1
  border: none
  color: $col3
  padding: 0.8em
  outline: none
  
  &:disabled
    background: darken($col1, 5%)
    color: darken($col2, 5%)
    &:hover
      background: darken($col1, 5%)
      color: darken($col2, 5%)
  
  &:hover, &:active
    background: $col2
    color: $col4
  
#app
  padding: 2em
  line-height: 2.4em
  
  h2
    color: $col2
    font-size: 2em
    margin: 0.8em 0 0.4em 0
      
  .item
    color: $col4
    padding: 0.2em
    transition: all 0.3s
    
    small
      font-size: 0.6em
      opacity: 0.2
      transition: all 0.3s
    
    button
      display: none
      margin-left: 0.3em
      transition: all 0.3s
      padding: 0.4em
    
    &::before
      content: "»"
      color: $col3
      margin-right: 0.6em
    
    &:hover
      padding-left: 0.4em
      
      small
        opacity: 0.4
      
      &::before
        display: none
        margin: 0em
      button
        margin-left: -0.3em
        margin-right: 0.2em
        display: inline-block
      
        &:hover, &:active
          background: #7A0216
          color: #EDF2F4

vuejs-firebase-list.markdown

vuejs firebase list

A Pen by Daniel on CodePen.

License.