Introducing VuePress: WordPress development with Vue and GraphQL.

In this article, I’ll introduce you to VuePress, show you how to create a simple blog, and create a custom layout component.

VuePress currently powers my personal site and the WordExpress doucmentation site.

Preface:

About two years ago I created WordExpress, which was my first attempt at developing WordPress sites using only JavaScript. It got a decent amount of buzz and currently has around over 1400 stars on GitHub. The number of stars isn’t at all important, but it does highlight one thing: developers want to develop WordPress using JavaScript on the front-end.

One of the most difficult things to overcome at the time was server-side rendering with GraphQL. WordPress sites require search engine optimization, and you can’t begin to do SEO without server-side rendering. A lot has changed in two years, and server-side-rendering with GraphQL is now much easier thanks to Apollo.

In the past month, I’ve revisited WordExpress and I’ve come up with a solution using Vue instead of React. This is totally doable using React (in fact a big piece of the puzzle is the WordExpressSchema which is front-end agnostic) but I’ve been using Vue a lot and they have great documentation on server-side rendering, so I decided to give it a go.

I’ve called this new solution VuePress because I’m very clever with words.

The VuePress Architecture

On the back-end, VuePress consists of a node server (using express) that has a GraphQL endpoint. The GraphQL endpoint uses GraphQLExpress from Apollo, which accepts a schema. This is where WordExpressSchema comes in. You can (and should!) read the documentation on the schema. In short, the schema has queries which are resolved by connecting to a WordPress database and getting data directly from it.

On the front-end, VuePress consists of Vue components. Some of these components contain GraphQL queries. When the server gets a request, it determines which components to render, prefetches the required data from GraphQL, pipes that data through a template, and finally renders the HTML.

Making A Blog

Getting Started

The code in the VuePress repo contains pretty much every thing you need to get started. First, clone the repo and follow the instructions in the readme to get started.

A note about custom fields: I personally use the advanced-custom-fields plugin for WordPress, and I use the pro version. You absolutely don’t need to use this plugin, but it makes life much easier, and all the VuePress documentation assumes you are using it.

After following the directions, you can start the development server.

$ npm run dev

You should get something like this:

Admittedly, not much to look at.

Lets change the layout of the homepage to include a page header.

Now it should look a little nicer:

Creating A Post List

First, lets create a page that will show all of our posts.

Notice the value for the Layout Component is PostList, which generates some extra custom fields (this is why ACF is nice!). The PostType drop down will tell the PostList component which post type in WordPress to render. Right now, we only have posts which is the default. VuePress also allows you to render different Post Item Components for each post list. Imagine you had two pages — a list of Articles and a list of Photographs. The list items in each page would probably be designed differently (articles would have text, photographs would have images), so you’d probably want to use a different component to render that item. You could create a whole new Layout Component with a different list, but that is more work.

Now, lets add the new Posts page to our primary-navigation menu.