A working componentized example app

build/webpack.base.config.js

@@ -32,7 +32,11 @@
         },
         {
           test: /\.vue$/,
-          loader: 'vue-loader'
+          loader: 'vue-loader',
+          options: {
+            css: 'css-loader',
+            'scss': 'css-loader|sass-loader'
+          }
         },
         {
           test: /\.js$/, // This rule applies after the .vue files are transpiled to .js files through the vue loader

package.json

@@ -10,6 +10,7 @@
   "author": "Drew Bednar",
   "license": "MIT",
   "dependencies": {
+    "bulma": "^0.6.1",
     "express": "^4.16.2",
     "vue": "^2.5.6"
   },
@@ -19,6 +20,7 @@
     "babel-loader": "^7.1.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
+    "css-loader": "^0.28.7",
     "eslint": "^4.5.0",
     "eslint-config-standard": "^10.2.1",
     "eslint-loader": "^1.9.0",
@@ -27,6 +29,8 @@
     "eslint-plugin-node": "^5.1.1",
     "eslint-plugin-promise": "^3.5.0",
     "eslint-plugin-standard": "^3.0.1",
+    "node-sass": "^4.7.1",
+    "sass-loader": "^6.0.6",
     "vue-loader": "^13.5.0",
     "vue-template-compiler": "^2.5.6",
     "webpack": "^3.8.1",

src/app.js

@@ -5,6 +5,9 @@ const app = new Vue({
   // render is a Vuejs function that will return an elements
   // This is equivalent to template: '<app></app>'
   render: h => h(AppLayout)
+  // Because fucktards in javascript want to make everything fucking insane
+  // we are going to use the "spread"
+  // ...AppLayout
 })
 
 export { app }

src/theme/AppFooter.vue

@@ -0,0 +1,10 @@
+<template>
+  <footer class="footer">
+    <div class="container">
+      <div class="content has-text-centered">
+        Follow us on
+        <a href="https://twitter.com/bstavroulakis" target="_blank">Twitter</a>
+      </div>
+    </div>
+  </footer>
+</template>

src/theme/AppHeader.vue

@@ -0,0 +1,10 @@
+<template>
+  <nav class="navbar has-shadow">
+    <div class="container">
+      <a href="/">
+        <img src="http://bit.ly/vue-img"
+          alt="Vue SPA" />
+      </a>
+    </div>
+  </nav>
+</template>

src/theme/Category.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="columns">
+    <div class="column is-one-third" v-for="(post, title) in posts" v-bind:key="post.id">
+      <div class="card">
+        <div class="card-content">
+          <h3>{{ post.title }}</h3>
+          {{ post.content }}
+        </div>
+        <footer class="card-footer">
+          <a class="card-footer-item" v-bind:href="post.link" target="_blank">Read More</a>
+        </footer>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        posts: [
+          { id: 1, title: 'PWA Stats', content: 'A community-driven list of stats and news related to Progressive Web Apps', link: 'https://www.pwastats.com/' },
+          { id: 2, title: 'A Comprehensive Guide To HTTP/2 Server Push', content: 'No longer is HTTP/2 a feature we pine for. It has arrived, and with it comes server push!', link: 'https://www.smashingmagazine.com/2017/04/guide-http2-server-push/' },
+          { id: 3, title: 'So what’s this GraphQL thing I keep hearing about?', content: 'Why now is the perfect time to learn what exactly this GraphQL thing you keep hearing about really is.', link: 'https://medium.freecodecamp.com/so-whats-this-graphql-thing-i-keep-hearing-about-baf4d36c20cf' },
+          { id: 4, title: 'State of The Mobile Gap Between Native and Web', content: 'Clearly PhoneGap, and Cordova are still required today in the mobile world, but when is it really needed? Did the web ever catch up?', link: 'https://remysharp.com/2016/05/28/state-of-the-gap' },
+          { id: 5, title: 'Learning JavaScript Design Patterns', content: 'Design patterns are reusable solutions to commonly occurring problems in software design.', link: 'https://addyosmani.com/resources/essentialjsdesignpatterns/book/' },
+          { id: 6, title: 'The Power of Custom Directives in Vue', content: 'The beautiful thing about Vue is that it\'s incredibly feature-rich.', link: 'https://css-tricks.com/power-custom-directives-vue/' }
+        ]
+      }
+    }
+  }
+</script>

src/theme/Layout.vue

@@ -1,23 +1,32 @@
 <template>
   <div id="app">
-    <nav class="nav has-shadow">
+    <app-header></app-header>
-      <div class="container">
+    <section class="main-section section">
-        <a href="/">
+      <div class="container content">
-          <img src="http://bit.ly/vue-img" alt="Vue SPA" />
+        <category></category>
-        </a>
       </div>
-    </nav>
+    </section>
-    <section class="main-section section"></section>
+    <app-footer></app-footer>
-    <footer class="footer">
-      <div class="container">
-        <div class="content has-text-centered">
-          Follow us on
-          <a href="https://twitter.com/bstavroulakis" target="_blank">Twitter</a>
-        </div>
-      </div>
-    </footer>
   </div>
 </template>
 <script>
-  export default {}
+  import AppHeader from './AppHeader.vue'
+  import AppFooter from './AppFooter.vue'
+  import Category from './Category.vue'
+  export default {
+    components: {
+      'app-header': AppHeader,
+      'app-footer': AppFooter,
+      'category': Category
+    }
+  }
 </script>
+<style lang="scss">
+$primary: #287ab1;
+@import '~bulma';
+
+.columns{
+ flex-wrap: wrap
+}
+
+</style>