Headless WordPress Development with GraphQL and NuxtJS

by Matthew Hinton, Senior Developer

2wav likes NuxtPress development mostly because it doesn’t have the constraints of the WordPress environment. We can use Vue, our preferred front-end framework and component library. Our pages are constructed of small, focused components that perform a specific task, and can be reused wherever needed. If any component is changed, it cascades through the whole site. That helps speed up development and ensures site consistency.

Navigation is a component, the header and footer are components, that’s obvious. But the features that include custom programming are also components. In Hunt Illinois, the Hunt Planner is a component.

In fact, every page is made up of components. The search bar, the announcement banner, etc. Most pages pull content from the WP database and take on styling from the master CSS.

Right now, the Gutenberg editor does not map blocks to GraphQL data but sends the entire page content. I hope in the future to be able to see all the Gutenberg editor blocks and map them to components. Other block editors such as Elementor allow some of the benefits of reusable components, but still does not give us the full software development environment we like. 2wav’s primary focus is on writing software; using Vue lets us play to our strengths.

NuxtJS allows us to render pages on the server and send them out to the browser. In a Javascript environment, we have complete control over the process. We use WordPress only as a database against which we can make queries for content. The Hunt Planner is all custom programming and doesn’t draw anything from the WP database. But users don’t see that. To them, it is one seamless website.

A little history for non-techies. Vue’s frontend library competitor is React. The server-side framework for React is named Next.js. When Vue hit the scene, they followed the naming convention and substituted a “u” to arrive at NuxtJS.

Nuxt controls routing, all server-side functionality, and returning results from user inputs.

WordPress has two ways to query for data:

• Rest API that’s been around from early days
• The new WPGraphQL plugin

GraphQL is easier for a software developer like me to work with. It provides a nice query interface in the WP admin where I can test and run queries. It also allows us to do custom WP plugin work, such as with the events calendar. GraphQL keeps all our customizations in one place.

To summarize, our clients produce content within the familiar WordPress admin dashboard. The NuxtJS website that we build queries the WP database for content, constructs the page using Vue components, and then the page is delivered to the browser.