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)