Vue Templates Logo Vue Templates
Vuewp screenshot

Vuewp

Author Avatar Theme by Lyzs90
Updated: 15 Aug 2018
107 Stars

VueJs Wordpress Theme

Github

Overview

vuewp is an elegant and responsive single-page application (SPA) powered by VueJS and the Wordpress REST v2 API. Unlike traditional PHP templates, vuewp offers a great developer experience while still leveraging the rich Wordpress plugin ecosystem. It can be deployed as a Wordpress theme or as a standalone static site on S3 or served with Nginx on Heroku.

Features

  • ES6: Built with modern ECMAScript 6 syntax.
  • Component-based architecture with Vue.js: Provides a modular and organized approach to building the application.
  • Dead simple routing with Vue-router: Easily manage client-side routing and navigation.
  • Vuex for state management: Centralized state management for better performance and code organization.
  • Webpack for module bundling: Efficiently bundle and optimize code assets.
  • Stylus for CSS preprocessing: Utilize the power and simplicity of Stylus for styling.
  • Simple asset pipeline with gulp.js: Automate repetitive tasks and streamline development workflow.
  • Docker for a deterministic and easy to set up development environment: Simplifies the setup and configuration of the development environment.
  • Prerendering of the index route with client-side hydration: Improve initial page load performance by prerendering the index route.
  • Code splitting of below the fold content for faster page loads: Split code into smaller chunks to load only what is needed for better performance.
  • Recommended Plugins: Better REST API Featured Images, ACF to Rest API, Advanced Custom Fields, Custom Post Type UIFakerpress.

Installation

  1. Clone this repo: git clone https://github.com/lyzs90/vuewp.git
  2. Install the dependencies: npm install
  3. Set up a Docker environment.
  4. Start Wordpress and MySQL: docker-compose up -d
  5. Obtain your Docker container IP.
  6. Add your container IP to .env.example and rename it to .env.
  7. Access the Wordpress server at http://container-ip:8000 and perform the famous 5-minute install.
  8. Once Wordpress is set up, enable the theme.
  9. For a better development experience, run npm run dev to start the Browsersync proxy server and access your site at http://localhost:8080 with live reloading and other cool features.

Tips: By default, vuewp uses the Media with slug ‘bg’ as the background and permalinks of type ‘Post name’ to render Posts/Pages. Be sure to enable those settings if you want to use vuewp out of the box.

Summary

vuewp is a modern and developer-friendly SPA built with VueJS and the Wordpress REST v2 API. It offers features like component-based architecture, simple routing, state management, and more. The installation process involves cloning the repository, setting up a Docker environment, and configuring Wordpress. Overall, vuewp provides an elegant solution for building responsive applications with VueJS and Wordpress.