@toototech/grapesjs-vue

面向 Vue 3 的 GrapesJS 组件、Provider 和 Composition API 封装。

安装

pnpm add @toototech/grapesjs-vue grapesjs

当前版本要求 GrapesJS ^0.23.6 和 Vue ^3.5.0。

使用

<script setup lang="ts">
import grapesjs from 'grapesjs'
import Editor, { Canvas } from '@toototech/grapesjs-vue'
import 'grapesjs/dist/css/grapes.min.css'
</script>

<template>
  <Editor :grapesjs="grapesjs" :options="{ height: '100vh' }">
    <Canvas />
  </Editor>
</template>

包的公开组件、composable 和类型定义位于 src/lib/index.ts。

开发与验证

pnpm dev
pnpm check
pnpm build
pnpm pack --dry-run

pnpm build 会生成 ESM、CommonJS 和打包后的 TypeScript 声明，并验证 ESM/CJS 入口及 NodeNext 消费端类型。

TypeScript 7

普通 TypeScript 源码由 TypeScript 7 原生编译器检查。Vue SFC 编译器和 vue-tsc 仍依赖旧 Compiler API，因此暂时通过 TypeScript 官方 @typescript/typescript6 兼容包完成 SFC 检查和声明生成。