Some beautiness

rest-theme/src/main.js

@@ -1,61 +1,73 @@
+/* global wp */
+
+String.prototype.capitalize = function () {
+  return this.charAt(0).toUpperCase() + this.slice(1)
+}
+
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
-Vue.use(require('vue-resource'));
-Vue.use(VueRouter);
+Vue.use(require('vue-resource'))
+Vue.use(VueRouter)
 
 Vue.config.debug = true
 
 import Posts from './posts.vue'
 import Post from './post.vue'
-Vue.component('Post', Post)
 import Page from './page.vue'
-Vue.component('Page', Page)
 import Header from './theme-header.vue'
-Vue.component('theme-header', Header)
 import Footer from './theme-footer.vue'
+
+Vue.component('Post', Post)
+Vue.component('Page', Page)
+Vue.component('theme-header', Header)
 Vue.component('theme-footer', Footer)
 
-var App = Vue.extend({
-    template: '<theme-header></theme-header>' +
-              '<div class="container"><router-view></router-view></div>' +
-              '<theme-footer></theme-footer>',
+var
+  App = Vue.extend({
+    template: `
+<div>
+  <theme-header></theme-header>
+  <div class="container">
+    <router-view></router-view>
+  </div>
+  <theme-footer></theme-footer>
+<div>`,
 
     ready() {
-        this.updateTitle('');
+      this.updateTitle('')
     },
 
     methods: {
-        updateTitle(pageTitle) {
-            document.title = (pageTitle ? pageTitle + ' - ' : '') + wp.site_name;
-        }
+      updateTitle(pageTitle) {
+        document.title = (pageTitle ? pageTitle + ' - ' : '') + wp.site_name
+      }
     },
 
     events: {
-        'page-title': function(pageTitle) {
-            this.updateTitle(pageTitle);
-        }
+      'page-title': function (pageTitle) {
+        this.updateTitle(pageTitle)
+      }
     }
-});
-var router = new VueRouter({
+  }),
+
+  router = new VueRouter({
     hashbang: false,
     history: true
-});
+  }),
+
+  key, route
 
 router.on(wp.base_path, {
-    component: Posts
-});
-
-for (var key in wp.routes) {
-    var route = wp.routes[key];
-    router.on(wp.base_path + route.slug, {
-        component: Vue.component(capitalize(route.type)),
-        postId: route.id
-    });
-}
+  component: Posts
+})
 
-router.start(App, '#app');
+for (key in wp.routes) {
+  route = wp.routes[key]
+  router.on(wp.base_path + route.slug, {
+    component: Vue.component(route.type.capitalize()),
+    postId: route.id
+  })
+}
 
-function capitalize(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
-}
+router.start(App, '#app')

rest-theme/src/page.vue

@@ -1,49 +1,52 @@
-<style>
-
-</style>
-
 <template>
-    <div class="page">
-        <h1 class="entry-title">{{ page.title.rendered }}</h1>
-
-        <div class="entry-content">
-            {{{ page.content.rendered }}}
-        </div>
+  <div class="page">
+    <h1 class="entry-title">{{ page.title.rendered }}</h1>
+    <div class="entry-content">
+      {{{ page.content.rendered }}}
     </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        ready() {
-            this.getPage();
-        },
+export default {
+  ready() {
+    this.getPage()
+  },
 
-        data() {
-            return {
-                page: {
-                    id: 0,
-                    slug: '',
-                    title: { rendered: '' },
-                    content: { rendered: '' }
-                }
-            }
+  data() {
+    return {
+      page: {
+        id: 0,
+        slug: '',
+        title: {
+          rendered: ''
         },
+        content: {
+          rendered: ''
+        }
+      }
+    }
+  },
 
-        methods: {
-            getPage() {
-                this.$http.get(wp.root + 'wp/v2/pages/' + this.$route.postId).then(function(response) {
-                    this.page = response.data;
-                    this.$dispatch('page-title', this.page.title.rendered);
-                }, function(response) {
-                    console.log(response);
-                });
-            }
+  methods: {
+    getPage() {
+      this.$http.get(wp.root + 'wp/v2/pages/' + this.$route.postId).then(
+        function(response) {
+          this.page = response.data
+          this.$dispatch('page-title', this.page.title.rendered)
         },
+        function(response) {
+          console.log(response)
+        })
+    }
+  },
 
-        route: {
-            canReuse() {
-                return false;
-            }
-        }
+  route: {
+    canReuse() {
+      return false
     }
-</script>
+  }
+}
+
+</script>
+

rest-theme/src/post.vue

@@ -1,58 +1,63 @@
-<style>
-
-</style>
-
 <template>
-    <div class="post">
-        <h1 class="entry-title" v-if="isSingle">{{ post.title.rendered }}</h1>
-        <h2 class="entry-title" v-else><a v-link="{ path: base_path + post.slug }">{{ post.title.rendered }}</a></h2>
-
-        <div class="entry-content">
-            {{{ post.content.rendered }}}
-        </div>
+  <div class="post">
+    <h1 class="entry-title" v-if="isSingle">{{ post.title.rendered }}</h1>
+    <h2 class="entry-title" v-else>
+      <a v-link="{ path: basePath + post.slug }">{{ post.title.rendered }}</a>
+    </h2>
+    <div class="entry-content">
+      {{{ post.content.rendered }}}
     </div>
+  </div>
 </template>
 
 <script>
-    export default {
-        props: {
-            post: {
-                type: Object,
-                default() {
-                    return {
-                        id: 0,
-                        slug: '',
-                        title: { rendered: '' },
-                        content: { rendered: '' }
-                    }
-                }
-            }
-        },
+export default {
+  props: {
+    post: {
+      type: Object,
+      default () {
+        return {
+          id: 0,
+          slug: '',
+          title: {
+            rendered: ''
+          },
+          content: {
+            rendered: ''
+          }
+        }
+      }
+    }
+  },
 
-        ready() {
-            // If post hasn't been passed by prop
-            if (!this.post.id) {
-                this.getPost();
-                this.isSingle = true;
-            }
-        },
+  ready() {
+    // If post hasn't been passed by prop
+    if (!this.post.id) {
+      this.getPost()
+      this.isSingle = true
+    }
+  },
 
-        data() {
-            return {
-                base_path: wp.base_path,
-                isSingle: false
-            }
-        },
+  data() {
+    return {
+      basePath: wp.base_path,
+      isSingle: false
+    }
+  },
 
-        methods: {
-            getPost() {
-                this.$http.get(wp.root + 'wp/v2/posts/' + this.$route.postId).then(function(response) {
-                    this.post = response.data;
-                    this.$dispatch('page-title', this.post.title.rendered);
-                }, function(response) {
-                    console.log(response);
-                });
-            }
-        }
+  methods: {
+    getPost() {
+      this.$http.get(wp.root + 'wp/v2/posts/' + this.$route.postId)
+      .then(function(response) {
+        this.post = response.data
+        this.$dispatch('page-title', this.post.title.rendered)
+      })
+      .catch(function(error) {
+        console.log(error)
+      })
     }
-</script>
+  }
+}
+
+</script>
+

rest-theme/src/posts.vue

@@ -1,34 +1,32 @@
-<style>
-
-</style>
-
 <template>
-    <div class="posts">
-        <Post v-for="post in posts" :post="post"></Post>
-    </div>
+  <div class="posts">
+    <Post v-for="post in posts" :post="post"></Post>
+  </div>
 </template>
 
 <script>
-    export default {
-        ready() {
-            this.getPosts();
-        },
+export default {
+  ready() {
+    this.getPosts()
+  },
 
-        data() {
-            return {
-                posts: []
-            }
-        },
+  data() {
+    return {
+      posts: []
+    }
+  },
 
-        methods: {
-            getPosts() {
-                this.$http.get(wp.root + 'wp/v2/posts').then(function(response) {
-                    this.posts = response.data;
-                    this.$dispatch('page-title', '');
-                }, function(response) {
-                    console.log(response);
-                });
-            }
-        }
+  methods: {
+    getPosts() {
+      this.$http.get(wp.root + 'wp/v2/posts').then(function(response) {
+        this.posts = response.data
+        this.$dispatch('page-title', '')
+      }, function(response) {
+        console.log(response)
+      })
     }
-</script>
+  }
+}
+
+</script>
+