ramsaylanier / wordexpress-starter-vue

WordPress with Vue, GraphQL, and Node

WordExpress Starter - Vue (AKA VuePress)

WordPress development using Vue, GraphQL, and Express.

Read the Introduction to Vue Press

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

Using the /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.

Build Setup

yarn
yarn build
yarn start
=======
npm install
npm run build

Development Setup

yarn
yarn serve

Working With WordPress

First Steps

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.

Layout Components

Currently there are only three layout components - DefaultPage, PageWithHeader, and 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.

PageWithHeader

In the backend:

Result:

PostList

In the backend:

Result:

License

MIT