Vue.js Wordpress Theme Starter

vuejs-wordpress-theme-starter

A WordPress theme with the guts ripped out and replaced with Vue. It is a based on the BlankSlate WP starter theme.

The official and original BlankSlate HTML5 WordPress theme boilerplate most commonly known to designers and developers. Released under the GPL.

The starter theme is modified into vue components and its making use of vue-router and vuex. It is a headless WordPress theme which fulfills the need to run the front and backend on the same host.

Features

• VueRouter integrated
• Vuex integrated (with sample WordPress-centric modules)
• jQuery integrated, if that's your thing
• Firebase support and sample config
• Axios for API requests
• Follows the development guidelines/structure set forth by Vuejs
• Bare essentials needed for a functional WordPress theme
• All requests are redirected back to the index.php so your Vue routing is respected.
• SCSS support
• Bootstrap 4 Beta

Make it your own

• Clone the repo inside of your wp-content/themes/ directory
• Navigate to the theme directory and run npm install npm run watch for development npm run production when you're ready to deploy the theme.

Code Structure

The code needed is located under /src/.

• /src
  • /api for API requests
  • /assets for images mostly
  • /components Vue components
  • /router vue-router directives
  • /store vuex store and modules
  • /styles SCSS styles
  • /vendor 3rd party scripts and libraries

All scripts and styles in /src are compiled down to the /dist directory, which is what you will deploy. When you're ready to deploy don't deploy the src/ directory.

References

• Creating Vuex Modules
• vue-router
• WordPress REST API

The WordPress starter theme is open-source & hosted on GitHub under an MIT license.