VueJs + Wordpress Headless Boilerplate

VueJs + Wordpress Headless Boilerplate is a project template for building fast, robust, and adaptable web apps or sites based on VueJS for the front-end & Wordpress as Headless CMS for the back-end.

This project is the product of lecture on Zoom, in Hebrew language.

Recording Video of the lecture on Youtube

Source files: https://github.com/Mosharush/wp-vue-boilerplate

Quick start

Clone the git repo — git clone https://github.com/Mosharush/wp-vue-boilerplate.git
Open the project with your favorite IDE — ex: codium wp-vue-boilerplate
Install all dependencies with Yarn — yarn install
Start All dev servers (include Dockers services) — yarn start:all
All is ready! Go to http://localhost to view your app or Go to your WordPress Admin Dashboard.

Features

A finely-tuned starter template to development End-to-End Web application.
A Starter build of VueJs App integration with WordPress Headless.
Docker for servers virtualization and quick startup.
Nginx Reverse Proxy Server & Configs For serve WordPress & VueJS apps both on same port and one origin (CORS).
- SSL Support on local machine.
MySQL Server For a local DataBase to store WordPress data.
- PhpMyAdmin Web-App to access MySQL Data via GUI.
wp-content directory volume access included A headless plugin to write your custom code to integrate with WordPress Hooks and more…
- Feature Ongoing: wp-config.php manipulate.
An example global Yarn (worksapces) package.json file with commands built in to jumpstart application development

Commands

Install all dependencies with Yarn (not NPM, we using Yarn workspaces)

yarn install

Post install action: we generate a SSL certificate for localhost domain to support https connections. you can change the registered domains on nginx/ssl/v3.ext file and run generate yarn generate:ssl

Start All Servers:

yarn start:all

Start Only Docker Services with Docker Compose:

yarn start:docker

Start Only Vue App Dev Server (HMR):

yarn start:client

Contributing

Hundreds of developers have helped to make the HTML5 Boilerplate. Anyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the guidelines:

Download Details:

Author: Mosharush

Source Code: https://github.com/Mosharush/wp-vue-boilerplate

#vuejs #vue #javascript #wordpress