Wie man GrapesJS in eine Nuxt 3 App integriert (vollständiger Leitfaden 2026)

Warum GrapesJS zu Nuxt 3 passt

GrapesJS benötigt den DOM, also initialisierst du ihn in Nuxt 3 in onMounted (nur für den Client) während die Nitro-Server-Routen das Speichern übernehmen. Dieser Leitfaden montiert die Editor, speichert Inhalte und exportiert HTML/CSS.

1. Den Editor clientseitig montieren

Erstellen pages/editor.vueSie . Importiere GrapesJS dynamisch im Inneren onMounted Deshalb läuft es während SSR nie.

<template>
  <div>
    <button @click="save">Save</button>
    <div ref="el"><h1>Edit me in GrapesJS</h1></div>
  </div>
</template>

<script setup>
import 'grapesjs/dist/css/grapes.min.css';
const el = ref(null);
let editor;

onMounted(async () => {
  const grapesjs = (await import('grapesjs')).default;
  editor = grapesjs.init({
    container: el.value,
    height: '100vh',
    fromElement: true,
    storageManager: false,
  });
});

onBeforeUnmount(() => editor?.destroy());

async function save() {
  await $fetch('/api/page', {
    method: 'POST',
    body: {
      html: editor.getHtml(),
      css: editor.getCss(),
      project: editor.getProjectData(),
    },
  });
}
</script>

2. Eine Nitro-Server-Route hinzufügen

Erstellen server/api/page.post.tsSie :

export default defineEventHandler(async (event) => {
  const data = await readBody(event);
  await savePage('home', data);   // your DB write
  return { status: 'ok' };
});

Fügen Sie ein Matching server/api/page.get.ts hinzu, um das gespeicherte Projekt zurückzugeben, Dann ruf nach INIT an editor.loadProjectData(saved) , um es wieder zu öffnen.

3. Exportieren Sie den Aufschlag

const html = editor.getHtml();
const css = editor.getCss();
// `<style>${css}</style>${html}`

Häufige Fallstricke in Nuxt 3

Nuxts SSR ist der übliche Übeltäter. Ein Top-Level import grapesjs from 'grapesjs' läuft während des Server-Renderings und wirft window is not defined – importiert es dynamisch in onMounted, oder packt den Editor in <ClientOnly>. Persistiere über eine Nitro-Server-Route mit server/api $fetch, wobei DB-Code auf dem Server bleibt. Wenn eine Abhängigkeit beim Bau immer noch klagt, füge sie build.transpile in .nuxt.config Und rufe anonBeforeUnmount, editor.destroy() damit Routenänderungen keine Editor-Instanzen leaken.

Voraussetzungen

Du brauchst Node.js 18+ und eine Nuxt 3 App. Kein Nuxt-spezifisches GrapesJS-Paket ist es erforderlich – der Editor ist nur browserfähig und die Nitro-Serverrouten übernehmen das Speichern. Vertrautheit mit der Composition API, onMounted, und server/api Routen reichen aus.

Fügen Sie benutzerdefinierte Blöcke zum Editor hinzu

Register ziehbare Blöcke mit dem Blockmanager nach init (innen onMounted):

editor.BlockManager.add('hero', {
  label: 'Hero section',
  category: 'Sections',
  content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});

Ziehe fertige Blockbibliotheken und Presets aus GJS.Market für ein reichhaltigeres Set.

Lagertieftauchen: Nitro-Routen

Bleib über Nitro-Serverrouten bestehen, damit der Datenbankcode auf dem Server bleibt:

// server/api/page.post.ts
export default defineEventHandler(async (event) => {
  const data = await readBody(event);
  await savePage('home', data);
  return { status: 'ok' };
});
// server/api/page.get.ts returns the saved project; then
// editor.loadProjectData(saved) after init reopens it.

Aufführungstipps

Importiere GrapesJS dynamisch im Inneren onMounted , damit es außerhalb der Server-Renderpfad und das Hauptbundle sowie einen Aufruf editor.destroy() onBeforeUnmount Routenänderungen leaken also keine Instanzen. Wenn eine Abhängigkeit Beschwert sich beim Bau, füge es build.transpile dazu hinzu nuxt.config.

Sicherheitsaspekte

Authentifiziere und autorisiere die Nitro-Speicherroute, bevor du schreibst. Desinfizieren, gelagert Markup auf der Ausgabe, falls Nicht-Administratoren bearbeiten können. Validiere die Nutzlastgröße, sodass eine große Das Projekt kann das Gedächtnis nicht erschöpfen.

Fehlerbehebung häufiger Fehler

"Fenster ist nicht definiert" bedeutet, dass GrapesJS während SSR lief – importiere es dynamisch im Editor onMounted einpacken oder einpacken <ClientOnly>. Ein Build-Fehler bezüglich einer Abhängigkeit wird üblicherweise durch Hinzufügen zu build.transpilefixiert. Ein ungestylter Oder eine leere Leinwand bedeutet, dass das Stylesheet nicht geladen wurde oder der Schiedsrichter nicht bereit war.

Wann man GrapesJS mit Nuxt 3 verwenden sollte

GrapesJS passt, wenn deine Nuxt-App eine echte visuelle Seite oder einen E-Mail-Builder für deinen Generator einbettet Benutzerkontrolle, mit eigenem Speicher und HTML-Ausgabe. Für Inline-Rich Text gilt ein Ein leichterer Editor reicht aus; für ganzseitige Komposition mit Layout, Styling und sauberer Gestaltung Der Export ist GrapesJS die stärkere, vom MIT lizenzierte und selbstgehostete Wahl.

Nächste Schritte

Siehe die zugehörigen GrapesJS + Vue und GrapesJS + Svelte Guides, durchstöbern Der GrapesJS-Marktplatz oder beginne mit dem GJS.Market-Startseite.

FAQ

Funktioniert GrapesJS mit Nuxt 3 SSR?

Ja – initialisieren onMounted oder einpacken <ClientOnly> Es läuft also nur im Browser.

Wie speichere ich GrapesJS-Inhalte in Nuxt 3?

POSTE die Projektdaten auf $fetch eine Nitro-Route in server/api.

Warum scheitert mein Build mit "Fenster ist nicht definiert"?

GrapesJS wird auf Modul-Top-Ebene importiert und läuft während SSR. Importiere es Stattdessen im Inneren onMounted .