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.

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.

Build websites & apps with Vue.js


WordPress, Contentful, Drupal, Prismic, GraphCMS, etc.

Local files

Markdown, YAML, CSV, JSON, Image folders, etc.


AirTable, Google Spreadsheet, MongoDB, Prisma, etc.

Gridsome brings all your data into a unified GraphQL data layer. The data can be browsed and explored in a simple local interface (GraphQL Playground) and inserted to any Vue Component.

  •  Pull data from any CMS, files or data APIs
  •  Browse data and test queries locally
  •  Query only the data fields you need
  •  Built-in pagination support for queries