JSFiddle - React, Tailwind, and code Playground

by dvdgdnjsph

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>
<script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>
<div id="app">


  <div id="tags">
    <ul class="list-group">
      <tag v-for="tag in tags" :tag="tag" :key="tag['.key']">{{ tag }}</tag>
    </ul>
  </div>
</div>
<template id="tag-template">
  <li>
    <span class="">
              <slot></slot>
          </span>
  </li>
</template>

JavaScript

var config = {
  apiKey: "AIzaSyD3bzqXrH2eTaiyBdoqihbsfEU-52xNulM",
  authDomain: "torrential-times.firebaseapp.com",
  databaseURL: "https://torrential-times.firebaseio.com",
  storageBucket: "torrential-times.appspot.com",
  messagingSenderId: "840694220845"
};
firebase.initializeApp(config);
var database = firebase.database();
var tagsRef = database.ref('tags');

var tags = [{'name':'bob'}, {'name':'chester'}];

Vue.component('tag', {
  templates: "#tag-template",
  props: ['tag']


});



var vm = new Vue({
  el: '#app',
  data: {
  	tags: tags
  }
  firebase: {
//    tags: tagsRef
  },
});