Édition visuelle pour Nuxt, sur WordPress.

1. 01

   Autorisez l’éditeur à afficher votre site

   Copiez ceci dans nuxt.config.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.

   npm install leiho

   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.

   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;
   });

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

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