GrapesJS integrates naturally with Vue 3 through the Composition API. By wrapping the editor in a reusable composable, you get proper lifecycle management, TypeScript support, and a clean separation of concerns. Whether you are building a standalone Vue app or a Nuxt.js application, GJS.Market provides the plugins to extend your editor without writing everything from scratch.
Browse Vue-compatible plugins →Vue 3 Composable Wrapper Pattern
Create a reusable composable that handles GrapesJS initialisation and cleanup automatically:
// useGrapesJS.ts
import { ref, onMounted, onUnmounted, Ref } from 'vue';
import grapesjs, { type Editor } from 'grapesjs';
export function useGrapesJS(container: Ref<HTMLElement | null>) {
const editor = ref<Editor | null>(null);
onMounted(() => {
if (!container.value) return;
editor.value = grapesjs.init({
container: container.value,
fromElement: false,
height: '100vh',
storageManager: false,
});
});
onUnmounted(() => {
editor.value?.destroy();
editor.value = null;
});
return { editor };
}Using the Composable in a Component
The composable keeps your SFC template clean and your logic reusable across components:
<template>
<div ref="container" style="height: 100vh" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useGrapesJS } from './useGrapesJS';
const container = ref<HTMLElement | null>(null);
const { editor } = useGrapesJS(container);
</script>Vue-Compatible Plugins
GrapesJS Blocks Basic
Essential drag-and-drop blocks for Vue projects
Storage REST API
Persist editor content to any REST backend
Style Manager Pro
Advanced visual CSS controls for your editor
GrapesJS MJML
Build responsive email templates with MJML
Nuxt.js Integration Notes
Use <ClientOnly> wrapper
Wrap your GrapesJS component in Nuxt's <ClientOnly> component to prevent server-side rendering. GrapesJS accesses the browser DOM on initialisation, which is not available during SSR.
Guard imports with process.client
If you dynamically import GrapesJS plugins, wrap the import in an if (process.client) check or use Nuxt's defineNuxtPlugin with { client: true } to ensure they only load in the browser.
Frequently Asked Questions
Related Guides
Extend your Vue editor with GJS.Market plugins
Browse Vue and Nuxt-compatible plugins and ship your visual editor faster.
Browse Vue-compatible plugins →