In this series, we're going to use VueJS to create a WordPress theme using the WordPress REST API to display your WordPress content. I'll try to go through all the steps of creating a WordPress theme such as setting up your project, creating an homepage, creating your posts, creating the category pages, then any additional pages such as contact forms.

Creating The Project

The first thing we need to do is setup the project correctly, first we need to decide how we want to use VueJS. You can either include VueJS using the script tag and include it on your page by using the CDN.

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

The other option is to take advantage of using a package manager such as npm to bring in VueJS and it's dependencies. I'm going to assume that you understand how to use npm and have this installed as it's out of scope for this tutorial. If you need help with getting this setup send me a message and I'll help out. To install VueJS from the command line we need to use the command npm install vue To compile our Vue components we're going to use webpack there is a library with Vue that makes this very easy. First install the vue-cli library.

npm install -g vue-cli

Now we can create our project using webpack as the builder.

vue init webpack vue-wordpress-theme

This will then ask you a number of options such as Project name, project description etc. It will also ask you to install vue-router you need to click Y on this option. You'll see that this has generated a folder in our project called vue-wordpress-theme we can now get this up and running by using the command

cd vue-wordpress-theme
npm install
npm run dev

When you run npm run dev you'll see a browser will open up at URL http://localhost:8080/ displaying the Welcome to Your Vue.js App

The best thing about this setup is that webpack will watch for changes on your files and automatically compile your VueJS components and change your dev site on http://localhost:8080/ in real time. To see this real time update you can edit the message on the Welcome To VueJS App, navigate to vue-wordpress-theme/src/components/Hello.vue on line 28 you can change the message and save your file. On save your Vue components will be compiled and your web page will be updated in real time. Your project is now setup and ready for you to start developing the WordPress theme.