Cómo integrar GrapesJS en una app Nuxt 3 (guía completa 2026)

Por qué GrapesJS encaja en Nuxt 3

GrapesJS necesita el DOM, así que en Nuxt 3 lo inicializas en onMounted (solo para clientes) mientras que las rutas del servidor Nitro se encargan del guardado. Esta guía monta el editor, persiste el contenido y exporta HTML/CSS.

1. Montar el editor en el lado del cliente

Crear pages/editor.vue. Importar GrapesJS dinámicamente dentro onMounted así que nunca funciona durante SSR.

<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. Añadir una ruta de servidor Nitro

Crea server/api/page.post.ts:

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

Añade una coincidencia server/api/page.get.ts para devolver el proyecto guardado, Luego llama editor.loadProjectData(saved) después de Init para que lo reabra.

3. Exportar el margen

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

Errores comunes en Nuxt 3

El SSR de Nuxt es el culpable habitual. Un nivel import grapesjs from 'grapesjs' superior se ejecuta durante el renderizado del servidor y lanza window is not defined — impórtalo dinámicamente dentro onMountedde , o envuelva el editor en <ClientOnly>. Persiste a través de una ruta de servidor Nitro con server/api $fetch, manteniendo el código de la base de datos en el servidor. Si una dependencia sigue quejándose durante la compilación, añádela a build.transpile en nuxt.config. Y llamar editor.destroy() para onBeforeUnmount que los cambios de ruta no filtren instancias del editor.

Requisitos previos

Necesitarás Node.js 18+ y una app Nuxt 3. No hay ningún paquete específico de Nuxt para GrapesJS necesario — el editor es solo para navegador y las rutas del servidor Nitro se encargan del guardado. Familiaridad con la API de composición, onMounted, y server/api Rutas son suficientes.

Añadir bloques personalizados al editor

Registrar bloques arrastrables con el Gestor de bloques después de iniciar (dentro onMounted):

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

Saca librerías de bloques y presets listos de GJS. Haz marketing para un conjunto más rico.

Inmersión en el almacenamiento: rutas nitro

Persiste a través de las rutas del servidor Nitro para que el código de la base de datos permanezca en el servidor:

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

Consejos de rendimiento

Importa GrapesJS dinámicamente dentro onMounted para que no entre en el Ruta de renderizado del servidor y el paquete principal, y llamada editor.destroy() en onBeforeUnmount Así que los cambios de ruta no filtran instancias. Si es una dependencia se queja en el momento de compilación, añádelo a build.transpile nuxt.config.

Consideraciones de seguridad

Autentica y autoriza la ruta de guardado de Nitro antes de escribir. Sanitise almacenada Marcado en la salida si los no administradores pueden editar. Valida el tamaño de la carga útil para que sea grande El proyecto no puede agotar la memoria.

Resolución de errores comunes

"window is not definit" significa GrapesJS ejecutado durante SSR — importarlo dinámicamente dentro onMounted o envolver el editor en <ClientOnly>. Un error de compilación sobre una dependencia normalmente se fija añadiéndola a build.transpile. Un sin estilo O el lienzo en blanco significa que la hoja de estilo no se cargó o que la referencia no estaba lista.

Cuándo usar GrapesJS con Nuxt 3

GrapesJS encaja cuando tu app Nuxt integra una página visual real o un generador de correo electrónico en tu los usuarios controlan, con tu propio almacenamiento y salida HTML. Para texto enriquecido en línea, un Un editor más ligero es suficiente; para composición a página completa con maquetación, estilo y limpieza export, GrapesJS es la opción más fuerte, licenciada por MIT y autoalojada.

Próximos pasos

Véase el GrapesJS + Vue relacionados y Guías GrapesJS + Svelte , navega el mercado GrapesJS, o empieza desde el GJS. Página principal del mercado.

Preguntas frecuentes

¿GrapesJS funciona con Nuxt 3 SSR?

Sí — inicialízalo onMounted o envuélvelo <ClientOnly> Así que solo funciona en el navegador.

¿Cómo guardo contenido de GrapesJS en Nuxt 3?

POST los datos del proyecto con $fetch una ruta Nitro en server/api.

¿Por qué falla mi build con "ventana no está definida"?

GrapesJS se importa en el nivel superior del módulo y se ejecuta durante SSR. Importarlo dinámicamente dentro onMounted en cambio.