---
canonical_url: "https://wpnuxt.com"
---
<u-page-hero orientation="vertical">
<template v-slot:title="">
<span className="font-serif">

WP

</span>

<span className="text-[var(--ui-primary)]">

Nuxt

</span>

<br />

<br />


Nuxt <span className="text-[var(--ui-primary)]">

+

</span>

 headless <span className="font-serif">

WordPress

</span>
</template>

<template v-slot:description="">

Type-safe composables for fetching WordPress content via GraphQL.<br />

Render Gutenberg blocks as Vue components.

</template>

<template v-slot:links="">
<u-button size="xl" to="https://wpnuxt.com/getting-started" trailing-icon="i-ph-rocket-launch-duotone">

Get started

</u-button>

<u-button size="xl" to="https://github.com/wpnuxt/wpnuxt" color="neutral" icon="i-ph-github-logo" variant="outline" target="_blank">

View on GitHub

</u-button>
</template>
</u-page-hero>

<u-page-section>
<template v-slot:title="">

WordPress as a headless CMS<br />

<span className="text-[var(--ui-primary)]">

with a modern Nuxt frontend

</span>
</template>

<template v-slot:features="">
<u-page-feature icon="i-ph-code">
<template v-slot:title="">

Type-Safe GraphQL

</template>

<template v-slot:description="">

Auto-generated TypeScript types from your WordPress schema. Full IDE support.

</template>
</u-page-feature>

<u-page-feature icon="i-ph-puzzle-piece">
<template v-slot:title="">

Gutenberg Blocks

</template>

<template v-slot:description="">

Render WordPress blocks as Vue components. Customize each block type.

</template>
</u-page-feature>

<u-page-feature icon="i-ph-lightning">
<template v-slot:title="">

Server-Side Caching

</template>

<template v-slot:description="">

GraphQL responses cached on the server with stale-while-revalidate support.

</template>
</u-page-feature>
</template>
</u-page-section>

<u-page-section orientation="horizontal">

```vue [pages/index.vue]
<script setup lang="ts">
const { data: posts } = await usePosts()
</script>

<template>
  <article v-for="post in posts" :key="post.id">
    <NuxtLink :to="post.uri">
      {{ post.title }}
    </NuxtLink>
    <div v-sanitize-html="post.excerpt" />
  </article>
</template>
```

<template v-slot:title="">

Simple Composables

</template>

<template v-slot:description="">

Fetch posts, pages, menus, and more with auto-generated composables:

</template>

<template v-slot:features="">
<u-page-feature icon="i-ph-arrow-right">
<template v-slot:title="">

usePosts()

</template>
</u-page-feature>

<u-page-feature icon="i-ph-arrow-right">
<template v-slot:title="">

usePages()

</template>
</u-page-feature>

<u-page-feature icon="i-ph-arrow-right">
<template v-slot:title="">

useMenu({ name: "main" })

</template>
</u-page-feature>

<u-page-feature icon="i-ph-arrow-right">
<template v-slot:title="">

useGeneralSettings()

</template>
</u-page-feature>
</template>

<template v-slot:links="">
<u-button size="xl" to="https://wpnuxt.com/guide/fetching-data" color="neutral" icon="i-ph-book-open" variant="outline">

View all composables

</u-button>
</template>
</u-page-section>

<u-page-section>
<template v-slot:title="">

Packages

</template>

<template v-slot:features="">
<u-page-feature icon="i-ph-package">
<template v-slot:title="">

@wpnuxt/core

</template>

<template v-slot:description="">

GraphQL integration, auto-generated composables, server-side caching.

</template>
</u-page-feature>

<u-page-feature icon="i-ph-squares-four">
<template v-slot:title="">

@wpnuxt/blocks

</template>

<template v-slot:description="">

Render Gutenberg blocks as Vue components with NuxtImg optimization.

</template>
</u-page-feature>

<u-page-feature icon="i-ph-user-circle">
<template v-slot:title="">

@wpnuxt/auth

</template>

<template v-slot:description="">

WordPress authentication with GraphQL support.

</template>
</u-page-feature>
</template>

<template v-slot:links="">
<u-button size="xl" to="https://wpnuxt.com/migration/v1-to-v2" color="neutral" icon="i-ph-arrow-circle-up" variant="outline">

Migrate from v1

</u-button>
</template>
</u-page-section>

## Resources for Agents

- [API catalog: every service document this site publishes](https://wpnuxt.com/.well-known/api-catalog)
- [Sitemap (XML)](https://wpnuxt.com/sitemap.xml)
- [Sitemap (Markdown): every page on the site](https://wpnuxt.com/sitemap.md)
- [MCP server card: MCP endpoint at https://wpnuxt.com/mcp](https://wpnuxt.com/.well-known/mcp/server-card.json)
- [MCP endpoint (streamable HTTP)](https://wpnuxt.com/mcp)
- [llms.txt: index of the documentation for LLMs](https://wpnuxt.com/llms.txt)
- [llms-full.txt: the full documentation as a single file](https://wpnuxt.com/llms-full.txt)
- [OpenAPI document: every route this site serves to agents](https://wpnuxt.com/openapi.json)


## Sitemap

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