WordPress Single Page Application Theme Boilerplate
A JavaScript SPA WordPress theme boilerplate using Vue and the WordPress REST API.
Install
Install this theme just as you would install any modern theme boilerplate:
-
Navigate to your themes folder (usually /wp-content/themes/):
cd /wp-content/themes/ -
Clone this repo:
git clone https://github.com/alt-design/wp-spa-boilerplate NAME_OF_DIRECTORY -
Enter the new folder (NAME_OF_DIRECTORY):
cd NAME_OF_DIRECTORY -
Install dependencies via npm or yarn:
npm installor
yarn
Running and Building
npm run dev // starts a hot reload dev server (make sure to update your development URL in the .env file before running this)
npm run watch // watches and compiles files to the dist folder, no hot reload though
npm run build // compiles to the dist folder
npm run production // optimises and compresses before compiling to the dist folder (this will disable Vue Devtools)
VueX and Data Structure
All of your pages data is kept in a VueX store, by default the store will look like this:
{
adminUrl:"http://theme.dev/wp/wp-admin/"
global:false // Global ACF Fields (Options Pages)
theme:"http://theme.dev/app/themes/vue-theme"
name:"Test"
post:Object
post_name:"sample-page"
ID:2
acf:false // ACF Fields
breadcrumbs:Array[2]
0:Object
permalink:"http://theme.dev/"
title:"Home"
1:Object
permalink:"http://theme.dev/sample-page/"
title:"Sample Page"
featured_image:null
post_content:"This is an example page..."
post_date:"2017-03-24 12:26:39"
post_excerpt:""
post_parent:0
post_title:"Sample Page"
post_type:"page"
url:"http://theme.dev"
}
Components
Menu
The menu component is used to retrieve & display WordPress menus:
<app-menu location="main" emit-on-complete="mainMenuLoaded"></app-menu>
Props
- location : string (required) - the menu's registered theme location
- emitOnComplete : string (optional) - an optional Vue.$emit to be called after the menu is loaded
Breadcrumbs
The breadcrumb component is used to retrieve & display breadcrumbs for the current path:
<breadcrumbs></breadcrumbs>