Getting Started
Introduction
WordPress + Nuxt via GraphQL
WPNuxt connects WordPress to Nuxt 4 via GraphQL, giving you type-safe composables for fetching content.
WPNuxt v2 is a complete rewrite for Nuxt 4, with a simplified API, better TypeScript support, and new features like server-side caching and AI tooling. See what's new →
New to WPNuxt? Start with How WPNuxt Works to understand the architecture, then follow the Quick Start to build your first project.
Why WPNuxt?
- Type-safe - Auto-generated TypeScript types from your WordPress schema
- Simple API -
usePosts(),usePages(),useMenu()- just works - Extensible - Add custom queries, get custom composables
Packages
| Package | Purpose | Status |
|---|---|---|
@wpnuxt/core | GraphQL integration, composables | Stable |
@wpnuxt/blocks | Render Gutenberg blocks as Vue components | Stable |
@wpnuxt/auth | WordPress authentication (password, OAuth) | Stable |
wpnuxi | CLI for scaffolding and diagnostics | Stable |
Quick Look
<script setup lang="ts">
const { data: posts } = await usePosts()
</script>
<template>
<article v-for="post in posts" :key="post.id">
<h2>{{ post.title }}</h2>
<div v-sanitize-html="post.excerpt" />
</article>
</template>
That's it. No GraphQL queries to write, no types to define.
What's New in v2
WPNuxt v2 is a complete rewrite built for Nuxt 4:
| Feature | Description |
|---|---|
| Simplified API | usePosts() instead of useWPPosts() — cleaner, more intuitive |
| Better TypeScript | Full type inference from your WordPress GraphQL schema |
| Server Caching | Built-in multi-layer SWR caching for GraphQL requests |
| @wpnuxt/auth | Authentication module with password, OAuth, and external providers |
| @wpnuxt/blocks | Gutenberg block rendering with Nuxt Image and Nuxt UI integration |
| AI Tooling | MCP server for AI-assisted development and code generation |
| Serverless Ready | Built-in sanitization that works on Vercel and other serverless platforms |
Migrating from v1? See the Migration Guide.