After table style, before redux

package.json

@@ -62,6 +62,7 @@
     "webpack": "^2.2.1",
     "webpack-dev-middleware": "^1.8.4",
     "webpack-hot-middleware": "^2.17.0",
-    "webpack-merge": "^4.0.0"
+    "webpack-merge": "^4.0.0",
+    "whatwg-fetch": "^2.0.3"
   }
 }

src/components/Index.vue

@@ -6,26 +6,51 @@
       </q-toolbar-title>
     </div>
 
-    <!--
-      Replace following "div" with
-      "<router-view class="layout-view">" component
-      if using subRoutes
-    -->
     <div class="layout-view">
-      <spell-list></spell-list>
+      <spell-list :spells="store.data"></spell-list>
     </div>
   </q-layout>
 </template>
 
 <script>
+import { Loading } from 'quasar'
 import Vue from 'vue'
 import SpellList from './Spelllist'
+import 'whatwg-fetch'
+
+let temporaryData = {
+  loaded: true,
+  data: [
+    {
+      title: 'example 1',
+      description: 'foo'
+    }, {
+      title: 'example 2',
+      description: 'bar'
+    }
+  ]
+}
 
 Vue.component('spell-list', SpellList)
 
 export default {
   data () {
-    return {}
+    return {
+      store: {
+        loaded: false,
+        data: []
+      }
+    }
+  },
+  mounted () {
+    if (this.store.loaded === false) {
+      Loading.show()
+    }
+
+    setTimeout(() => {
+      this.store = temporaryData
+      Loading.hide()
+    }, 2000)
   }
 }
 </script>

src/components/Spellitem.vue

@@ -1,7 +1,14 @@
 <template>
-  <q-collapsible :label="spell.title" group="spells">
+  <tr>
+    <td colspan="3">
+      <q-collapsible
+        :label="spell.title"
+        group="spells"
+      >
         {{spell.description}}
       </q-collapsible>
+    </td>
+  </tr>
 </template>
 
 <script>

src/components/Spelllist.vue

@@ -1,5 +1,18 @@
 <template>
-  <table class="list">
+  <table class="spell-list q-table highlight compact striped-even">
+    <thead>
+      <tr>
+        <th class="text-left">
+          <big>Name</big>
+        </th>
+        <th class="text-left">
+          <big>School</big>
+        </th>
+        <th class="text-right">
+          <big>Level</big>
+        </th>
+      </tr>
+    </thead>
     <tr
       is="spell-item"
       v-for="spell in spells"
@@ -16,23 +29,13 @@ import SpellItem from './Spellitem'
 Vue.component('spell-item', SpellItem)
 
 export default {
-  data () {
+  props: [
-    return {
+    'spells'
-      spells: [
-        {
-          title: 'example 1',
-          description: 'foo'
-        }, {
-          title: 'example 2',
-          description: 'bar'
-        }
   ]
-    }
-  }
 }
 </script>
 
 <style scoped lang="stylus">
-  .list
+  .spell-list
     width: 100%
 </style>