/vuewp

VueJs Wordpress Theme

Primary LanguagePHP

vuewp

An elegant, responsive SPA powered by VueJS and the Wordpress REST v2 API. Unlike archaic PHP templates which are hell to maintain, vuewp promises great developer experience while allowing you to tap onto the rich Wordpress plugin ecosystem.

This solution is trivial to deploy as a Wordpress theme. You can also decouple it from Wordpress and host it as static site on S3 or serve it with Nginx on Heroku.

Features

  • ES6 °(^▿^)/°
  • Component-based architecture with Vue.js
  • Dead simple routing with Vue-router
  • Vuex for state management
  • Webpack for module bundling
  • Stylus for CSS preprocessing
  • Simple asset pipeline with gulp.js
  • Docker for a deterministic and easy to set up development environment
  • Prerendering of the index route with client-side hydration
  • Code splitting of below the fold content for faster page loads

Development

  • Clone this repo git clone https://github.com/lyzs90/vuewp.git
  • Install the dependencies npm install
  • Set up a Docker environment
  • Start Wordpress and MySQL docker-compose up -d
  • Obtain your docker container ip docker-machine ip
  • Add your container ip to .env.example and rename to .env
  • Access the Wordpress server at this url http://container-ip:8000 and perform the famous 5-minute install
  • Once Wordpress is set up, enable the theme
  • For a better development experience, you should run npm run dev to run the Browsersync proxy server and you can access your site at http://localhost:8080, complete with live reloading and other cool stuff.

Tips: By default, vuewp will use Media with slug 'bg' as the background. It also uses permalinks of type 'Post name' to render Posts/Pages. So be sure to enable those settings if you want to use vuewp out of the box.

Deployment

  • Run the production build npm run prod
  • Preview using a http server like zeit/serve eg. serve wp-content/themes/vuewp/dist
  • To use as a theme, simply copy the vuewp directory to your Wordpress themes i.e. /var/www/html/wp-content/themes
  • For a headless setup, one option is to host the dist directory on S3 as a static site.

Recommended Plugins

Credits