Implementing page templates

functions.php

@@ -37,10 +37,26 @@ function rest_theme_routes() {
 				'id'   => get_the_ID(),
 				'type' => get_post_type(),
 				'slug' => basename( get_permalink() ),
+				'template' => get_page_template_slug( get_the_ID() ),
 			);
 		}
 	}
 	wp_reset_postdata();
 
 	return $routes;
-}
+}
+
+function rest_theme_attach_template_to_page( $page_name, $template_name ) {
+
+    $page = get_page_by_title( $page_name, OBJECT, 'page' );
+    $page_id = null == $page ? -1 : $page->ID;
+
+    if( -1 != $page_id ) {
+        update_post_meta( $page_id, '_wp_page_template', $template_name );
+    }
+
+    return $page_id;
+}
+
+/* Attach templates to pages here : */
+//rest_theme_attach_template_to_page( 'Page name', 'template' );

rest-theme/src/main.js

@@ -9,10 +9,16 @@ 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 Page_template from './page-template.vue'
+Vue.component('Page_template', Page_template)
+
 import Header from './theme-header.vue'
 Vue.component('theme-header', Header)
+
 import Footer from './theme-footer.vue'
 Vue.component('theme-footer', Footer)
 
@@ -27,7 +33,7 @@ var App = Vue.extend({
 
     methods: {
         updateTitle(pageTitle) {
-            document.title = (pageTitle ? pageTitle + ' - ' : '') + wp.site_name;
+            document.title = (pageTitle ? pageTitle + ' | ' : '') + wp.site_name;
         }
     },
 
@@ -37,6 +43,7 @@ var App = Vue.extend({
         }
     }
 });
+
 var router = new VueRouter({
     hashbang: false,
     history: true
@@ -49,7 +56,7 @@ router.on(wp.base_path, {
 for (var key in wp.routes) {
     var route = wp.routes[key];
     router.on(wp.base_path + route.slug, {
-        component: Vue.component(capitalize(route.type)),
+        component: Vue.component(capitalize(route.type) + (route.template != '' ? '_' + route.template : '')),
         postId: route.id
     });
 }

rest-theme/src/mixins/page.js

@@ -0,0 +1,34 @@
+var pageMixin = {
+    ready() {
+        this.getPage();
+    },
+
+    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);
+            });
+        }
+    },
+
+    route: {
+        canReuse() {
+            return false;
+        }
+    }
+};
+export default pageMixin;

rest-theme/src/page-template.vue

@@ -0,0 +1,22 @@
+<style>
+
+</style>
+
+<template>
+    <div class="page">
+        <h1 class="entry-title">{{ page.title.rendered }}</h1>
+
+        <h2>With a different template this time ...</h2>
+
+        <div class="entry-content">
+            {{{ page.content.rendered }}}
+        </div>
+    </div>
+</template>
+
+<script>
+    import pageMixin from './mixins/page.js';
+    export default{
+        mixins:[pageMixin],
+    }
+</script>

rest-theme/src/page.vue

@@ -4,7 +4,7 @@
 
 <template>
     <div class="page">
-        <h1 class="entry-title">{{ page.title.rendered }}</h1>
+        <h1 class="entry-title">{{{ page.title.rendered }}}</h1>
 
         <div class="entry-content">
             {{{ page.content.rendered }}}
@@ -13,37 +13,8 @@
 </template>
 
 <script>
-    export default {
-        ready() {
-            this.getPage();
-        },
-
-        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);
-                });
-            }
-        },
-
-        route: {
-            canReuse() {
-                return false;
-            }
-        }
+    import pageMixin from './mixins/page.js';
+    export default{
+        mixins:[pageMixin],
     }
 </script>

rest-theme/src/theme-header.vue

@@ -23,11 +23,11 @@
     <header class="header">
         <div class="container">
             <div class="site-title">
-                <a v-link="{ path: base_path }">{{ site_name }}</a>
+                <a v-link="{ path: base_path }">{{{ site_name }}}</a>
             </div>
             <ul class="nav">
                 <li v-for="page in pages">
-                    <a v-link="{ path: base_path + page.slug }">{{ page.title.rendered }}</a>
+                    <a v-link="{ path: base_path + page.slug }">{{{ page.title.rendered }}}</a>
                 </li>
             </ul>
         </div>

style.css

@@ -1,5 +1,5 @@
 /*
-Theme Name: WP REST Theme
+Theme Name: WP Vue Theme
 Theme URI: http://gilbert.pellegrom.me
 Author: Gilbert Pellegrom
 Author URI: http://gilbert.pellegrom.me