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 (currently in alpha) 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 | Alpha |
@wpnuxt/blocks | Render Gutenberg blocks as Vue components | Alpha |
@wpnuxt/auth | WordPress authentication (password, OAuth) | Alpha |
WPNuxt v2 is currently in alpha. APIs may change before the stable release. Check the GitHub releases for the latest version and changelog.
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 SWR caching for GraphQL requests |
| @wpnuxt/auth | New authentication module with OAuth support |
| @wpnuxt/blocks | Improved Gutenberg block rendering with Nuxt UI integration |
| AI Tooling | MCP server for AI-assisted development |
Migrating from v1? See the Migration Guide.