How I created headless WordPress Blog with Nuxt

If you want your website to be fast, secure, and modern, it helps to mix and match the right tools for the job. By pairing a headless WordPress backend with a Nuxt frontend, you get a powerful content management system and a flexible, high-performance user interface. This guide will walk you through the entire process—from setting up your WordPress instance to deploying your live Nuxt site on Netlify—so you can create your own website.

For inspiration, check out this example blog I created, or explore a detailed tutorial on WP Engine’s Headless WordPress with Nuxt 3 and Vue 3.

We will cover four main steps: setting up WordPress, adding GraphQL extensions for data fetching, configuring your Nuxt application to communicate with WordPress, and finally, deploying your project. By the end, you’ll have a fully functional headless website.

1. Setting Up Your WordPress Backend

The first step is to get your WordPress site running. Since Nuxt will handle the frontend, we only need WordPress to manage content.

Choose a Hosting Provider

Select a reliable hosting provider for your WordPress installation. Managed WordPress hosts are an excellent choice for performance, security, and scalability. They often provide optimized environments that work well for headless setups.

Install and Configure WordPress

Once you have your hosting, install WordPress. Most providers offer simple one-click installations. After the installation is complete, log in to your WordPress admin dashboard and perform these initial configurations:

• Set Site Title and Tagline: Go to Settings > General to update your site’s basic information.
• Update Permalinks: Navigate to Settings > Permalinks and select “Post name.” This creates clean, SEO-friendly URLs that are easier to work with.
• Install a Minimal Theme: Since the frontend will be separate, you don’t need a complex theme. A default theme like “Twenty Twenty-Four” is perfectly fine. The goal is to keep the backend lightweight.

2. Adding GraphQL Extensions

To enable your Nuxt app to request data from WordPress efficiently, you’ll use GraphQL. This requires installing a key plugin and a few optional but helpful extensions.

Install the WPGraphQL Plugin

WPGraphQL is the engine that exposes your WordPress data through a GraphQL API.

1. In your WordPress dashboard, go to Plugins > Add New.
2. Search for “WPGraphQL”.
3. Click “Install Now” and then “Activate”.

After activation, a new “GraphQL” menu item will appear in your admin sidebar. You can use the built-in GraphiQL IDE (GraphQL > GraphiQL IDE) to test queries and explore your data schema. Your GraphQL endpoint is typically located at an address like this one used in the official guide: https://wpengine.com/builders/headless-wordpress-nuxt-3-vue-3/.

Install Recommended WPGraphQL Extensions

To enhance your headless setup, consider adding these extensions. They expose more data and functionality to your GraphQL API.

• WPGraphQL for Advanced Custom Fields (ACF): If you use the Advanced Custom Fields plugin to create custom content models, this extension is essential. It makes your ACF fields available in GraphQL queries.
• WPGraphQL Yoast SEO: If you use Yoast SEO, this plugin exposes all your SEO metadata, like titles and meta descriptions, allowing you to manage SEO from WordPress.
• WPGraphQL JWT Authentication: For applications that require user-specific data or protected content, this plugin provides secure authentication using JSON Web Tokens (JWT).

Install these the same way you installed WPGraphQL: search for them under Plugins > Add New, then install and activate.

3. Configuring Nuxt to Call WordPress

Now it’s time to build the frontend. With your WordPress backend ready, you need to configure your Nuxt application to fetch data from the GraphQL endpoint.

Set Up a New Nuxt Project

If you don’t have one already, create a new Nuxt project:

npx nuxi@latest init your-nuxt-project
cd your-nuxt-project
npm install

Install Apollo Client

Apollo Client is a popular and powerful state management library for JavaScript that simplifies working with GraphQL APIs. Install the necessary dependencies for your Nuxt project.

npm install @nuxtjs/apollo graphql

Configure the Apollo Module

Next, configure the Apollo module in your nuxt.config.ts file. This tells your Nuxt app where to find the WordPress GraphQL endpoint.

export default defineNuxtConfig({
  modules: ['@nuxtjs/apollo'],
  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://your-wordpress-site.com/graphql' // Replace with your endpoint
      }
    }
  }
})

Fetch Data in Your Pages

With Apollo configured, you can now fetch data in your Vue components. For example, let’s create a page that lists all your blog posts.

Create a file at pages/blog/index.vue and add the following code:

<template>
  <div>
    <h1>Blog Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.slug">
        <NuxtLink :to="`/blog/${post.slug}`">{{ post.title }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { gql } from 'graphql-tag';

const query = gql`
  query GetPosts {
    posts {
      nodes {
        title
        slug
      }
    }
  }
`;

const { data } = await useAsyncQuery(query);
const posts = data.value.posts.nodes;
</script>

This script defines a GraphQL query to get the title and slug of all posts, fetches the data using useAsyncQuery, and displays them as a list of links.

4. Deploying Your Nuxt Website to Netlify

The final step is to deploy your Nuxt application to a hosting platform. Netlify is a fantastic choice for static and server-rendered sites due to its ease of use, continuous deployment, and global CDN.

Prepare Your Nuxt Project

Before deploying, ensure your project is ready. Push your code to a Git provider like GitHub, GitLab, or Bitbucket. Netlify will connect directly to your repository.

Connect Your Repository to Netlify

1. Sign up for a Netlify account and log in.
2. Click “Add new site” and select “Import an existing project”.
3. Connect to your Git provider and choose the repository for your Nuxt project.

Configure Build Settings

Netlify will automatically detect that you are deploying a Nuxt 3 project and pre-fill the build settings. For most projects, the default settings are correct:

• Build command: npm run build
• Publish directory: .output/public

If your application requires environment variables (like your GraphQL endpoint URL), you can add them under Site settings > Build & deploy > Environment. This is a secure way to manage sensitive keys.

Deploy Your Site

Click the “Deploy site” button. Netlify will pull your code, run the build command, and deploy the generated files to its global CDN. Once the deployment is complete, you will receive a unique Netlify URL (e.g., your-site-name.netlify.app).

Every time you push a change to your connected Git branch, Netlify will automatically trigger a new build and deploy it, creating a seamless development workflow.

The Benefits of Headless WordPress with Nuxt and Netlify

By following these steps, you have successfully combined a trusted CMS with a modern frontend framework and a powerful deployment platform. This architecture offers several key advantages:

• Superior Performance: Nuxt generates pre-rendered pages that load incredibly fast. Netlify’s CDN serves these static assets from locations close to your users, further reducing latency.
• Enhanced Security: Decoupling your frontend from your WordPress backend reduces the attack surface. Your public-facing site is static, while your WordPress admin can be secured behind a firewall or IP whitelist.
• Excellent Developer Experience: Nuxt provides a modern, component-based workflow with features like file-based routing and auto-imports. The continuous deployment process with Netlify simplifies shipping updates.
• Scalability: Both Nuxt and Netlify are built to handle high traffic loads with ease. Your site can scale effortlessly without the need for complex server management.

This setup empowers you to build fast, secure, and scalable web experiences while allowing your content team to continue using the familiar WordPress interface.