---
title: "Leiho pour Nuxt : l’édition visuelle sur WordPress"
description: "Un plugin client charge le bridge, une route serveur sert chaque page, et v-bind écrit les attributs sur vos éléments."
url: https://leiho.dev/fr/frameworks/nuxt
lang: fr
updated: 2026-11-04
---
Nuxt · Nuxt 3 et versions ultérieures

# Édition visuelle pour Nuxt, sur WordPress.

Un plugin client charge le bridge, une route serveur sert chaque page, et v-bind écrit les attributs sur vos éléments.

1. 01
   ## Autorisez l’éditeur à afficher votre site
   Copiez ceci dans nuxt.config.ts.
   ```ts
   export default defineNuxtConfig({
     routeRules: {
       '/**': {
         headers: { 'Content-Security-Policy': "frame-ancestors 'self' https://cms.example.com" },
       },
     },
   });
   ```
2. 02
   ## Ajoutez le bridge
   Installez le package, puis créez ce plugin client.
   ```Terminal
   npm install leiho
   ```
   ```ts
   export default defineNuxtPlugin(() => {
     if (window.self === window.top) return;
     import('leiho').then(({ initLeihoBridge }) => {
       // Already on screen: don't hide the page.
       initLeihoBridge({ wpOrigin: 'https://cms.example.com', cloakTimeout: 0 });
     });
   });
   ```
3. 03
   ## Lisez le contenu
   Servez chaque page depuis une route serveur, puis récupérez-la dans votre page.
   ```ts
   import { loadLeihoContent, indexLeihoContent } from 'leiho/content';
   
   export default defineEventHandler(async (event) => {
     const { path = '/' } = getQuery(event);
     const { data } = await loadLeihoContent({ url: 'https://cms.example.com/wp-json/leiho/v1/export' });
     const page = indexLeihoContent(data).byPath(String(path));
     if (!page) throw createError({ statusCode: 404 });
     return page;
   });
   ```
   ```vue
   <script setup lang="ts">
   const route = useRoute();
   const { data: page } = await useFetch('/api/page', { query: { path: route.path } });
   </script>
   
   <template>
     <main v-if="page" :data-wp-post="page.id">
       <h1 data-wp-field="_title">{{ page.title }}</h1>
     </main>
   </template>
   ```
   Hébergement serverless avec un disque en lecture seule ? Passez snapshot: false à loadLeihoContent.
4. 04
   ## Marquez ce que les éditeurs peuvent modifier
   Appliquez field() sur chaque élément que les éditeurs doivent pouvoir modifier. Affichez toujours l’élément, même quand sa valeur est vide.
   ```Vue
   <script setup>
   import { field, entry } from 'leiho';
   // field() writes data-wp-post + data-wp-field, entry() names a section.
   // Flexible content rows: block(page, 'sections', i, 'Label').
   </script>
   
   <template>
     <section v-bind="entry(page, 'Hero')">
       <h1 v-bind="field(page, 'hero_title')">{{ page.fields.hero_title }}</h1>
       <img v-bind="field(page, 'hero_image')" :src="page.fields.hero_image?.url" :alt="page.fields.hero_image?.alt">
       <article v-for="(card, i) in page.fields.cards" :key="i" v-bind="field(page, `cards.${i}.title`)">
         {{ card.title }}
       </article>
     </section>
   </template>
   ```

Remplacez https://cms.example.com par l’adresse de votre WordPress. Dans wp-admin, **Leiho → Démarrer** affiche ces étapes avec votre adresse, vérifie chacune et peut confier toute l’installation à votre agent de code en une seule consigne.

Autres frameworks

- [**Next.js**](https://leiho.dev/fr/frameworks/nextjs)
- [**Astro**](https://leiho.dev/fr/frameworks/astro)
- [**SvelteKit**](https://leiho.dev/fr/frameworks/sveltekit)
- [**React**](https://leiho.dev/fr/frameworks/react)
- [**HTML, PHP and others**](https://leiho.dev/fr/frameworks/html)

## Modifiez le vrai site.

Gratuit et open source. Essayez-le sur un vrai WordPress, dans votre navigateur.

- [Essayer dans votre navigateur](https://leiho.dev/fr/try)
- [Voir sur GitHub](https://github.com/pixelersagency/leiho)