GrapesJS is a vanilla JavaScript library — which means it integrates perfectly with Vue 3 using composables and the Composition API. Vue developers can wrap GrapesJS in a reusable composable, manage the editor lifecycle with onMounted and onUnmounted, and expose the editor instance to the rest of the application.
What Vue 3 developers need in a page builder
Composition API support
Wrap GrapesJS in a composable using onMounted/onUnmounted. No Options API required — works perfectly with Vue 3 script setup.
TypeScript-first
GrapesJS v1.x ships with full TypeScript definitions, compatible with Vue TypeScript projects and Volar IDE support.
Reactive state integration
Listen to GrapesJS events and update Vue reactive state using ref() or reactive() to sync editor content with your app.
Nuxt.js compatibility
GrapesJS is a browser-only library. In Nuxt, initialize inside onMounted or use <ClientOnly> to prevent SSR issues.
Vue 3 composable pattern
// Vue 3 Composable — useGrapesJS.ts
import { onMounted, onUnmounted, ref } from 'vue';
import grapesjs from 'grapesjs';
import type { Editor } from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';
export function useGrapesJS(containerId: string) {
const editor = ref<Editor | null>(null);
onMounted(() => {
editor.value = grapesjs.init({
container: `#${containerId}`,
height: '100vh',
storageManager: { type: 'local' },
});
});
onUnmounted(() => {
editor.value?.destroy();
});
return { editor };
}
// PageBuilderComponent.vue
<template>
<div id="gjs-container" />
</template>
<script setup lang="ts">
import { useGrapesJS } from './useGrapesJS';
const { editor } = useGrapesJS('gjs-container');
</script>Integration guide — 4 steps
Install GrapesJS
Run npm install grapesjs in your Vue project. Import the CSS in your main.ts or component.
Create a composable
Write a useGrapesJS composable that initializes the editor in onMounted and destroys it in onUnmounted.
Use in a component
Create a container element and pass its ID or ref to the composable. The editor attaches to the DOM element.
React to editor events
Use editor.on() to listen for content changes and update Vue reactive state or emit events to parent components.
Vue-compatible plugins
Vue Component Wrapper
Drop-in Vue 3 component for GrapesJS integration
Block Library
Pre-built drag-and-drop blocks for Vue projects
Storage Manager Pro
Save editor content to REST APIs or databases
Style Manager Plus
Extended CSS controls for Vue design systems
Vue use cases
Vue CMS editor
Embed GrapesJS in a Vue admin panel for content management with custom block types and templates.
Nuxt.js landing pages
Build a visual editor for Nuxt.js applications using <ClientOnly> and the GrapesJS composable pattern.
Vue form builder
Drag-and-drop form designer using GrapesJS blocks for form elements, integrated into a Vue SPA.
Start building your Vue visual editor
Browse GrapesJS plugins compatible with Vue 3 on GJS.Market.
Get started with GrapesJS for Vue →