WordExpress Starter - Vue (AKA VuePress)
WordPress development using Vue, GraphQL, and Express.
This repo is a starting off point for working with WordExpress using Vue. Its meant to work with WordExpress Server.
Node Version Requirement
node 6.* node 7.*
Before Doing Anything Else
Please make sure you have cloned the WordExpress Server repo and have followed the instructions for getting it up and running. WordExpress server provides you with a connection to your WordPress database using GraphQL.
/config/sample-client.config.json file as an example, create a
client.json file. As of now, this the config files just point to the url of where your WordExpress Server is running, and which theme in the
src/themes directory to use.
yarn yarn build yarn start ======= npm install npm run build
yarn yarn serve
Working With WordPress
In a fresh WordPress install, you'll need to do a few basic setup items:
- Create a page called 'Homepage'
- Create a menu called 'primary-navigation'
- Install Advanced Custom Fields plugin (see below)
Advanced Custom Fields
VuePress uses some custom post fields. You're best bet is to install the Advanced Custom Fields plugin into your WordPress backend. I've included am
acf-export JSON file in this repo that you should import. This will give you just a few basic custom page fields that can be used to give your pages custom layout components.
Currently there are only three layout components -
PostList. In order to set the layout component, simply type the name of the component in the custom field. If there is nothing in the layout component field,
DefaultPage will be used.
In the backend:
In the backend: