A small reminder/checklist for myself in future projects

• vue.js webpack template
• my regular setup (with sass, prettier/eslint, vuex)
• axios

• ACF PRO
• ACF to REST API
• Custom Post Type UI
• Disable Comments
• Post Types Order
• WP Migrate DB

# go through regular cli install, this is for vue-cli 2 npm init webpack my-project ..... npm i axios -S npm run dev

Download the latest wordPress and unzip it at the root.

Go through the regular local wordpress install:

• start your local server to it (I use MAMP, localhost:8888)
• create your local empty database in phpmyadmin
• visit localhost:8888 and enter wp info
• install your plugins (if you use ACF, be sure to add ACF to REST API)

• Delete all default themes (wordpress/wp-content/themes/)
• Create your own theme, with these necessary files:
  • functions.php
  • index.php
  • screenshot.png (1200x800)
  • style.css
• Activate the theme in the wp dashboard
• Don't forget to edit gitignore

• config/dev.env.js

   'use strict'; const merge = require('webpack-merge'); const prodEnv = require('./prod.env'); module.exports = merge(prodEnv, { NODE_ENV: '"development"', WP_REST_API: '"http://localhost:8888/wp-json/wp/v2/"', }); 

• config/prod.env.js

   'use strict'; module.exports = { NODE_ENV: '"production"', WP_REST_API: '"https://your-production-website.com/wordpress/wp-json/wp/v2/"', };

• src/axios-config.js

   import axios from 'axios'; export const api = axios.create({ baseURL: process.env.WP_REST_API, });

Restart your server with npm run dev

Take a look at these components as quick examples:

• Home.vue (example of getting a page's content)
• Posts.vue (example of getting latest posts)

=> WP REST API Handbook