---
title: "Introduction"
description: "WordPress + Nuxt via GraphQL"
canonical_url: "https://wpnuxt.com/getting-started"
---
# Introduction

> WordPress + Nuxt via GraphQL

WPNuxt connects WordPress to Nuxt 4 via GraphQL, giving you type-safe composables for fetching content.

<callout type="success" icon="i-heroicons-sparkles">

**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 →](#whats-new-in-v2)

</callout>

<callout type="tip">

**New to WPNuxt?** Start with [How WPNuxt Works](https://wpnuxt.com/getting-started/how-it-works) to understand the architecture, then follow the [Quick Start](https://wpnuxt.com/getting-started/quick-start) to build your first project.

</callout>

## 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

<table>
<thead>
  <tr>
    <th>
      Package
    </th>
    
    <th>
      Purpose
    </th>
    
    <th>
      Status
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        @wpnuxt/core
      </code>
    </td>
    
    <td>
      GraphQL integration, composables
    </td>
    
    <td>
      Stable
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        @wpnuxt/blocks
      </code>
    </td>
    
    <td>
      Render Gutenberg blocks as Vue components
    </td>
    
    <td>
      Stable
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        @wpnuxt/auth
      </code>
    </td>
    
    <td>
      WordPress authentication (password, OAuth)
    </td>
    
    <td>
      Stable
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        wpnuxi
      </code>
    </td>
    
    <td>
      CLI for scaffolding and diagnostics
    </td>
    
    <td>
      Stable
    </td>
  </tr>
</tbody>
</table>

## Quick Look

```vue
<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:

<table>
<thead>
  <tr>
    <th>
      Feature
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Simplified API
      </strong>
    </td>
    
    <td>
      <code>
        usePosts()
      </code>
      
       instead of <code>
        useWPPosts()
      </code>
      
       — cleaner, more intuitive
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Better TypeScript
      </strong>
    </td>
    
    <td>
      Full type inference from your WordPress GraphQL schema
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Server Caching
      </strong>
    </td>
    
    <td>
      Built-in multi-layer SWR caching for GraphQL requests
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        @wpnuxt/auth
      </strong>
    </td>
    
    <td>
      Authentication module with password, OAuth, and external providers
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        @wpnuxt/blocks
      </strong>
    </td>
    
    <td>
      Gutenberg block rendering with Nuxt Image and Nuxt UI integration
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        AI Tooling
      </strong>
    </td>
    
    <td>
      MCP server for AI-assisted development and code generation
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Serverless Ready
      </strong>
    </td>
    
    <td>
      Built-in sanitization that works on Vercel and other serverless platforms
    </td>
  </tr>
</tbody>
</table>

<read-more to="https://wpnuxt.com/getting-started/whats-new">

See the full overview of everything new in v2.

</read-more>

<callout type="info">

**Migrating from v1?** See the [Migration Guide](https://wpnuxt.com/migration/v1-to-v2).

</callout>


## Sitemap

See the full [sitemap](https://wpnuxt.com/sitemap.md) for all pages.