vue component

Author: danielabar

README.md

@@ -1,3 +1,22 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [Single Page Applications with Vue.js](#single-page-applications-with-vuejs)
+  - [Environment Setup - Build Process](#environment-setup---build-process)
+    - [Project Files](#project-files)
+    - [Package Management](#package-management)
+    - [Web Server](#web-server)
+    - [Web Server - Index.html](#web-server---indexhtml)
+    - [Webpack - Setup](#webpack---setup)
+    - [Dev Middleware](#dev-middleware)
+    - [Hot Reloading](#hot-reloading)
+    - [Linting](#linting)
+  - [Single File Components](#single-file-components)
+    - [Vue Component](#vue-component)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
 # Single Page Applications with Vue.js
 
 > Notes from Pluralsight [course](https://app.pluralsight.com/library/courses/vue-js-single-page-applications/table-of-contents)
@@ -126,3 +145,27 @@ npm install [email protected] [email protected] [email protected] eslint-con
 Modify [build/webpack.base.config.js](build/webpack.base.config.js) to hook up linting into build process.
 
 Now when server is restarted, build will fail on lint errors.
+
+## Single File Components
+
+Vue uses single file components, each file contains a template for html, a script for js and style for css.
+
+### Vue Component
+
+One way to do things is to declare a component using `Vue.component` method.
+
+On first load, client entry will mount view instance to the div with id of `app` and create an `<app></app>` element.
+`<app></app>` element is configured in app.js with a template:
+
+```javascript
+Vue.component('app', {
+  template: `
+    <div id="app">
+    ...
+
+const app = new Vue({
+  render: h => h('app')
+})
+```
+
+Therefore `<app></app>` element will be replaced with app template configuration.

src/app.js

@@ -1,12 +1,40 @@
 import Vue from 'vue'
 
-// Initialize vue
+// Use component method to create a component named `app`.
+// Template has a div with id of `app` used for initial binding.
+// Webapp has navigation section
+// Classes are linked with a css library that will be included later.
+// Main section is container for site's data.
+// Footer section is last.
+Vue.component('app', {
+  template: `
+    <div id="app">
+      <nav class="nav has-shadow">
+        <div class="container">
+          <a href="/">
+            <img src="http://bit.ly/vue-img"
+              alt="Vue SPA" />
+          </a>
+        </div>
+      </nav>
+      <section class="main-section section"></section>
+      <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>
+  `
+})
+
+// `render` property is a Vue.js function that returns an element
+// element to be returned is the `app` element.
 const app = new Vue({
-  data: {
-    hello: 'hi there test is this thing on?'
-  },
-  // HMR support so Vue can know how to re-render the section it's mounted on
-  template: '<div id="app">{{ hello }}</div>'
+  render: h => h('app')
 })
 
 export { app }

src/client-entry.js

@@ -1,6 +1,7 @@
 import {app} from './app'
 
 // mount vue instance to a dom element with id of `app`, which must exist in index.html
+// i.e. <div id="app"></div>
 app.$mount('#app')
 
 // hot module reloading (dev only???)