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: 




  • 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: 



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: 

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

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


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