# wordexpress-starter-vue

**Repository Path**: jimixy/wordexpress-starter-vue

## Basic Information

- **Project Name**: wordexpress-starter-vue
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-01-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WordExpress Starter - Vue (AKA VuePress)

> WordPress development using Vue, GraphQL, and Express.

[Read the Introduction to Vue Press](https://medium.com/@rmmmsy/introducing-vuepress-wordpress-development-with-vue-and-graphql-f5063a97bb69)

This repo is a starting off point for working with WordExpress using Vue. Its meant to work with [WordExpress Server](https://github.com/ramsaylanier/WordExpress-Server). 

## Node Version Requirement

```bash
node 6.*
node 7.*
```

## Before Doing Anything Else

Please make sure you have cloned the [WordExpress Server](https://github.com/ramsaylanier/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.config.json` file as an example, create a `development.json` and `production.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

``` bash
npm install
npm run build
npm start
```

## Development Setup

```bash
npm install
npm run dev
```

# 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](https://github.com/ramsaylanier/VuePress/tree/master/src/components/page/layouts) - `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:

<img width="965" alt="screen shot 2017-12-19 at 8 54 27 pm" src="https://user-images.githubusercontent.com/2359852/34187337-dadf8bec-e4fe-11e7-84a0-3f1d885437d7.png">


Result:

<img width="1428" alt="screen shot 2017-12-19 at 9 06 14 pm" src="https://user-images.githubusercontent.com/2359852/34187651-80791a72-e500-11e7-8c9d-ec7bdbeb62be.png">

### PostList

In the backend: 

<img width="962" alt="screen shot 2017-12-19 at 9 10 04 pm" src="https://user-images.githubusercontent.com/2359852/34187773-0762ff30-e501-11e7-8b82-bd16d2b77c94.png">

Result:

<img width="1440" alt="screen shot 2017-12-19 at 9 08 38 pm" src="https://user-images.githubusercontent.com/2359852/34187730-d36b6442-e500-11e7-9af3-a52674dbfd6a.png">

## License

[MIT](http://opensource.org/licenses/MIT)