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.
- 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
- 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.exampleand 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 devto 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.
- 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
vuewpdirectory to your Wordpress themes i.e./var/www/html/wp-content/themes - For a headless setup, one option is to host the
distdirectory on S3 as a static site.
- Better REST API Featured Images
- ACF to Rest API
- Advanced Custom Fields
- Custom Post Type UI
- Fakerpress
- Adapted from bedakb/vuewp
- Design inspired by @Radium
- Image credits @MUJI