Building a Vue.js Theme on top of the WP-API Pt. 1

In: Tutorial

The First in a series on Building a WP Theme in Vue.js. Introduction can be found here.

 

First I pulled in a bootstrap Vue.js project in my themes folder using vue-cli: 

vue init webpack-simple name-of-project

You'll receive a series of prompts: Project name, Project description, Author, Use sass, which can be filled out or left to defaults. Then the following command: 

   vue-cli · Generated "name-of-project".

   To get started:

     cd name-of-project
     npm install
     npm run dev.

This generates a boostrapped Vue theme: 

-index.html

-package.json

-README.md

src: 

  • App.vue
  • main.js
  • assets
    • logo.png. 

To this I added: 

  • index.php
  • functions.php
  • header.php
  • footer.php

And of course, since a WP theme will not register in the admin withouth this: 

  • style.css

With the usual registration of the theme. 

In index.php, I added: 

<div id="app"></div>

And in functions.php call the compiled style.css and build.js from the 'dist' folder.

 

By default, the Vue bootstrap comes with: 

src/main.js

src/App.vue

By Default, in our main.js:

import Vue from 'vue'

import App from './App.vue'

new Vue({

  el: '#app',

  render: h => h(App)

});

In App.vue, we find template information for the Vue logo, a series of links. After stripping out the Links in our template, we are left with: 

<template>
<div id="app">
<h1>{{ msg }}</h1>
</div>
</template>

<script>
    export default {
       name: 'app',
      data () {
      return {
         msg: 'Welcome to Your Vue.js App'
      }
   }
}
</script>

 

Because this is a theme inside our Wordpress install, we can't just run npm run dev. Or we CAN, but we'll have to look for our template in a separate URL http://8888, when it would be preferable to stay within our WP url. So we can run webpack directly with: 

webpack --progress --colors --watch

 

Go to your WP local url and you should see our basic message: 'Welcome to Your Vue.js App'. 

 

NEXT: Part II - Listing Posts On Front Page