WordPress Headless con Nuxt: come realizzarlo

L’architettura headless consente di usare WordPress esclusivamente come CMS per la gestione dei contenuti, demandando la parte di presentazione a un framework moderno come Nuxt.
In questo scenario, WordPress fornisce i dati tramite le REST API e Nuxt li utilizza per generare un frontend veloce, ottimizzato per SEO e completamente personalizzabile.

In questa guida vedremo come configurare WordPress come backend headless e Nuxt come frontend, utilizzando fetch nativo invece di librerie esterne come Axios.

---

Prerequisiti

• Un’installazione WordPress attiva (in locale o su hosting).
• Un progetto Nuxt 3 (o 4, quando sarà disponibile in versione stabile).
• Conoscenze di base di JavaScript e Vue.js.
• Accesso alle REST API di WordPress (attive di default su ogni installazione recente).

---

REST API di WordPress

Le API sono disponibili all’indirizzo:

https://tuodominio.com/wp-json/wp/v2/

Gli endpoint principali sono:

• /posts → articoli
• /pages → pagine
• /categories → categorie
• /media → media e immagini
• /users → autori

Se hai bisogno di autenticazione (per contenuti protetti o operazioni CRUD), puoi utilizzare un plugin come JWT Authentication for WP REST API.

---

Creazione di un progetto Nuxt

Per avviare un nuovo progetto Nuxt:

npx nuxi init headless-wp
cd headless-wp
npm install
npm run dev

---

Creazione di un composable per le chiamate API

Per gestire in modo ordinato le chiamate a WordPress, crea un composable /composables/useWpApi.ts:

const API_URL = "https://tuodominio.com/wp-json/wp/v2"

export const useWpApi = () => {
  const getPosts = async (params: Record<string, any> = {}) => {
    const query = new URLSearchParams(params).toString()
    const res = await fetch(`${API_URL}/posts?${query}`)
    if (!res.ok) throw new Error("Errore nel recupero degli articoli")
    return await res.json()
  }

  const getPostBySlug = async (slug: string) => {
    const res = await fetch(`${API_URL}/posts?slug=${slug}`)
    if (!res.ok) throw new Error("Errore nel recupero del post")
    const data = await res.json()
    return data[0]
  }

  return {
    getPosts,
    getPostBySlug
  }
}

---

Recuperare gli articoli dal backend

Per mostrare la lista degli articoli nel frontend, crea il file /pages/index.vue:

<script setup lang="ts">
const { getPosts } = useWpApi()
const posts = await getPosts({ per_page: 5 })
</script>

<template>
  <div class="max-w-2xl mx-auto p-6">
    <h1 class="text-3xl font-bold mb-4">Ultimi articoli</h1>
    <ul>
      <li v-for="post in posts" :key="post.id" class="mb-3">
        <NuxtLink :to="`/post/${post.slug}`" class="text-blue-600 hover:underline">
          {{ post.title.rendered }}
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

---

Creare la pagina dinamica dei singoli articoli

Per visualizzare il contenuto di un articolo, crea il file /pages/post/[slug].vue:

<script setup lang="ts">
const route = useRoute()
const { getPostBySlug } = useWpApi()

const post = await getPostBySlug(route.params.slug as string)
</script>

<template>
  <article class="prose mx-auto p-6">
    <h1>{{ post.title.rendered }}</h1>
    <div v-html="post.content.rendered"></div>
  </article>
</template>

---

Ottimizzazioni

• Generazione statica (SSG): con nuxt generate puoi creare pagine statiche per migliorare SEO e velocità.
• Caching: implementa sistemi di caching per ridurre le chiamate API.
• Gestione immagini: recupera i media da /media e ottimizzali con il modulo @nuxt/image.
• SEO: con plugin come Yoast SEO puoi ottenere i metadati tramite l’endpoint yoast_head_json.
• Autenticazione: se necessario, abilita JWT o OAuth per la gestione sicura di contenuti protetti.

---

Conclusione

Con questa configurazione, WordPress viene utilizzato come backend headless per la gestione dei contenuti, mentre Nuxt si occupa della presentazione.
Il risultato è un sito moderno, veloce e scalabile, che sfrutta la potenza di WordPress e la flessibilità di Nuxt.