Builder.io Vue SDK 接入指南在 Vue 3 与 Nuxt 3 中实现可视化页面渲染【免费下载链接】builderVisual Development for React, Vue, Svelte, Qwik, and more项目地址: https://gitcode.com/GitHub_Trending/bu/builderBuilder.io Vue SDKbuilder.io/sdk-vue是 Builder.io Gen2 的官方 Vue 版本用于将 Builder 可视化编辑器中的页面、区块等内容模型渲染到你的 Vue 应用中同时保留数据模型与视觉稿的双向同步能力。本文以 packages/sdks/output/vue/README.md 为主体结合仓库中的源码与示例系统讲解安装、Nuxt 集成、CSS 引入、内容拉取与渲染、自定义组件注册等完整链路帮助你快速把 Builder 的可视化开发能力接入 Vue 3 / Nuxt 3 项目。版本支持与前置条件该 SDK 支持standalone Vue 3以及Nuxt 3两种使用场景这也是 README 中明确列出的版本支持范围详见 packages/sdks/README.md 的 Feature Implementation 章节。从 package.json 可以看到其peerDependencies声明为vue: 3因此使用 Vue 2 的项目不在本 SDK 支持范围内。安装在 Vue 3 或 Nuxt 3 项目中直接通过 npm 安装npm install builder.io/sdk-vue安装完成后SDK 默认提供以下三类构建产物由 package.json 的exports字段控制分别面向不同的运行环境node用于服务端渲染SSR与 Node.js 环境browser用于浏览器端edge用于边缘运行时edge-routine、workerd、deno、lagon、netlify、edge-light、bun 等。包内还额外导出了./css、./nuxt、./node/init等子路径分别对应样式文件、Nuxt 模块入口与 Node 运行时初始化后续小节会逐一说明它们的用途。Nuxt 3 集成模块化接入如果你使用的是 Nuxt 3需要在nuxt.config.js或nuxt.config.ts中注册 SDK 自带的 Nuxt 模块// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ modules: [builder.io/sdk-vue/nuxt], });仓库中的真实示例 examples/vue/nuxt-3/nuxt.config.ts 与 examples/vue/nuxt-3-catchall/nuxt.config.ts 均采用这一写法。模块做了什么源码级解析通过阅读模块实现 packages/sdks/output/vue/nuxt.js可以看到该模块基于nuxt/kit的defineNuxtModule实现核心逻辑包括两件事自动注入样式默认将builder.io/sdk-vue/css追加到 Nuxt 的css数组nuxt.options.css.push(...)由includeCompiledCss选项控制默认值为true。因此使用 Nuxt 时无需手动引入 CSS。处理原生依赖isolated-vmSDK 依赖isolated-vm见 package.json 的dependencies用于 Node 环境下的安全代码执行。Vite 在开发服务器首次构建时会尝试优化该依赖并报错因此模块默认将其加入optimizeDeps.exclude并在需要时通过nuxt-isolated-vm-plugin.js以server模式注册插件。模块支持两个配置选项从源码推断非 README 原文选项默认值说明includeCompiledCsstrue是否自动引入 SDK 编译后的样式文件initializeNodeRuntimefalse是否初始化 Node 运行时引入isolated-vm相关插件非 Nuxt 的 SSR 框架手动引入 CSS如果你使用的是Nuxt 以外的 SSR 框架例如独立的 Vue SSR 方案或服务端渲染的中间层则需要手动引入 SDK 样式。将以下代码添加到应用入口、且在渲染 Builder 内容之前执行script import builder.io/sdk-vue/css; /script这一导入路径对应 package.json 中exports的./css: ./lib/browser/style.css。SDK 将样式与逻辑分离设计便于各框架按需引入若完全不引入 CSSBuilder 渲染出的富文本、按钮、图片等基础区块会缺少默认样式。渲染 Builder 内容fetchOneEntry Content 组件SDK 的核心用法是先用fetchOneEntry拉取 Builder 内容再把内容交给Content /组件渲染。以仓库中的 Vue 3 示例 examples/vue/vue-3/src/App.vue 为例script setup langts import { Content, fetchOneEntry, isPreviewing, type BuilderContent, getBuilderSearchParams, } from builder.io/sdk-vue; import { onMounted, ref } from vue; const BUILDER_PUBLIC_API_KEY f1a790f8c3204b3b8c5c1795aeac4660; // 替换为你的公钥 const content refBuilderContent | null(null); const canShowContent ref(false); const model page; onMounted(async () { content.value await fetchOneEntry({ model, apiKey: BUILDER_PUBLIC_API_KEY, options: getBuilderSearchParams(new URL(location.href).searchParams), userAttributes: { urlPath: window.location.pathname, }, }); canShowContent.value content.value ? true : isPreviewing(); }); /script template div v-ifcanShowContent div page title: {{ (content content.data content.data.title) || Unpublished }} /div Content :modelmodel :contentcontent :api-keyBUILDER_PUBLIC_API_KEY :customComponentsREGISTERED_COMPONENTS / /div div v-elseContent not Found/div /templatefetchOneEntry 的底层流程fetchOneEntry的实现在 packages/sdks/src/functions/get-content/index.ts其行为可归纳为单条返回内部实际调用fetchEntries({ ...options, limit: 1 })取结果数组的第一项无匹配时返回nulllocale 归一化若显式传入locale或userAttributes.locale会统一写入options.locale与userAttributes.locale保证多语言内容请求一致URL 构建通过generateContentUrl生成内容接口地址请求注入使用全局fetch或options.fetch覆盖并在请求头中附加getSdkHeaders()标记 SDK 身份预览与 A/B 测试响应经_processContentResult处理后在浏览器端会逐条执行handleABTesting保证可视化预览与实验分组正确生效。fetchOneEntry 常用参数参数类型说明modelstringBuilder 内容模型名称如page、blog-postapiKeystringBuilder 空间的公开 API KeyuserAttributesobject用户属性urlPath用于按当前路径匹配页面内容locale用于多语言optionsobject附加请求选项一般传入getBuilderSearchParams的返回值以支持预览参数localestring指定内容语言fetch/fetchOptionsfunction/object自定义 fetch 实现与请求配置canTrackboolean是否上报 A/B 测试与分析事件支持可视化预览的关键函数isPreviewing()实现在 packages/sdks/src/functions/is-previewing.ts通过检测 URL 中是否存在 Builder 预览相关参数判断当前是否处于可视化编辑预览态。在服务端无search参数传入时返回false因此示例中在浏览器端调用以决定是否展示内容。编辑器预览无内容时可借此回退渲染占位内容。getBuilderSearchParams()实现在 packages/sdks/src/functions/get-builder-search-params/index.ts从当前 URL 查询参数中过滤出以builder.前缀开头的参数并去掉options.前缀转换为可传给fetchOneEntry/fetchEntries的options从而让可视化编辑器中的预览参数如builder.preview正确传递到内容请求中。注册自定义组件Builder 的可视化画布默认只能拖拽 SDK 内置区块要将你的 Vue 组件暴露给编辑器需要把它们注册到customComponents并传给Content /。示例见 examples/vue/nuxt-3/app.vue中的注册结构如下const REGISTERED_COMPONENTS [ { component: HelloWorldComponent, // 你的 Vue 组件 name: MyFunComponent, // 在 Builder 编辑器中显示的名称 canHaveChildren: true, // 是否允许包裹子元素 inputs: [ { name: text, // 属性名对应组件 props type: string, // 属性类型 defaultValue: World, // 默认值 }, ], }, ];注册后这些组件会出现在 Builder 编辑器的组件面板中编辑器侧可配置inputs声明的属性并实时反映到页面。Nuxt 3 中的服务端拉取模式在 Nuxt 3 中推荐使用useAsyncData包裹fetchOneEntry以获得服务端渲染与数据缓存见 examples/vue/nuxt-3/app.vue 的核心片段const route useRoute(); const { data: content } await useAsyncData(builderData-page-${route.path}, () fetchOneEntry({ model: page, apiKey: BUILDER_PUBLIC_API_KEY, userAttributes: { urlPath: route.path, }, }) );模板中通过v-ifcontent || isPreviewing()判断展示确保无内容时也能在编辑器预览态下正常渲染。全站渲染catch-all 路由若希望所有 URL 都由 Builder 的page模型接管典型 CMS / 落地页场景可参考 examples/vue/nuxt-3-catchall/pages/[...app].vue它利用 Nuxt 的 catch-all 动态路由[...app].vue结合useRoute().path作为urlPath拉取与当前路径匹配的内容其余逻辑与单页示例一致。这样新增页面无需改动代码在 Builder 中发布内容后即可生效。SDK 的来源与构建Mitosis 生成该 Vue SDK 并非手写维护而是由 Builder 自研的编译框架Mitosis生成——README 中明确说明 “This SDK is generated by Mitosis”其 Mitosis 源码位于 packages/sdks 目录。这意味着 Vue 版本与 React、Svelte、Qwik、Solid 等版本的 SDK 共享同一套底层逻辑如fetchOneEntry、isPreviewing、内容渲染管线仅在框架层做适配。从 package.json 的scripts可以看到三端构建命令build:node # SDK_ENVnode vite build build:edge # SDK_ENVedge vite build build:browser # SDK_ENVbrowser vite build三种环境共用同一份 Vue 源码通过SDK_ENV环境变量切换目标产物最终输出到lib目录并由exports字段按运行环境Node / 浏览器 / 边缘运行时自动解析对应入口。开发者无需关心多端差异直接import { Content } from builder.io/sdk-vue即可。特性支持状态不同框架 SDK 的功能实现进度可能存在差异建议在接入前查阅 packages/sdks/README.md#feature-implementation 的特性支持表格确认当前 SDK 是否已覆盖你所需的区块与功能。该表格由 Builder 官方持续维护是评估 Vue SDK 能力边界的权威依据。完整示例导航仓库中提供了三份可直接运行的官方示例覆盖本文全部使用场景Vue 3 Viteexamples/vue/vue-3在src/App.vue中完成拉取与渲染npm install npm run dev即可启动Nuxt 3 单页examples/vue/nuxt-3在app.vue中使用useAsyncData服务端拉取内容Nuxt 3 catch-all 全站渲染examples/vue/nuxt-3-catchall通过pages/[...app].vue接管全部路由。三者共用同一套内容拉取与组件注册逻辑区别仅在于集成环境与路由策略可作为从零接入时的最小可运行模板。【免费下载链接】builderVisual Development for React, Vue, Svelte, Qwik, and more项目地址: https://gitcode.com/GitHub_Trending/bu/builder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Builder.io Vue SDK 接入指南：在 Vue 3 与 Nuxt 3 中实现可视化页面渲染
Builder.io Vue SDK 接入指南在 Vue 3 与 Nuxt 3 中实现可视化页面渲染【免费下载链接】builderVisual Development for React, Vue, Svelte, Qwik, and more项目地址: https://gitcode.com/GitHub_Trending/bu/builderBuilder.io Vue SDKbuilder.io/sdk-vue是 Builder.io Gen2 的官方 Vue 版本用于将 Builder 可视化编辑器中的页面、区块等内容模型渲染到你的 Vue 应用中同时保留数据模型与视觉稿的双向同步能力。本文以 packages/sdks/output/vue/README.md 为主体结合仓库中的源码与示例系统讲解安装、Nuxt 集成、CSS 引入、内容拉取与渲染、自定义组件注册等完整链路帮助你快速把 Builder 的可视化开发能力接入 Vue 3 / Nuxt 3 项目。版本支持与前置条件该 SDK 支持standalone Vue 3以及Nuxt 3两种使用场景这也是 README 中明确列出的版本支持范围详见 packages/sdks/README.md 的 Feature Implementation 章节。从 package.json 可以看到其peerDependencies声明为vue: 3因此使用 Vue 2 的项目不在本 SDK 支持范围内。安装在 Vue 3 或 Nuxt 3 项目中直接通过 npm 安装npm install builder.io/sdk-vue安装完成后SDK 默认提供以下三类构建产物由 package.json 的exports字段控制分别面向不同的运行环境node用于服务端渲染SSR与 Node.js 环境browser用于浏览器端edge用于边缘运行时edge-routine、workerd、deno、lagon、netlify、edge-light、bun 等。包内还额外导出了./css、./nuxt、./node/init等子路径分别对应样式文件、Nuxt 模块入口与 Node 运行时初始化后续小节会逐一说明它们的用途。Nuxt 3 集成模块化接入如果你使用的是 Nuxt 3需要在nuxt.config.js或nuxt.config.ts中注册 SDK 自带的 Nuxt 模块// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ modules: [builder.io/sdk-vue/nuxt], });仓库中的真实示例 examples/vue/nuxt-3/nuxt.config.ts 与 examples/vue/nuxt-3-catchall/nuxt.config.ts 均采用这一写法。模块做了什么源码级解析通过阅读模块实现 packages/sdks/output/vue/nuxt.js可以看到该模块基于nuxt/kit的defineNuxtModule实现核心逻辑包括两件事自动注入样式默认将builder.io/sdk-vue/css追加到 Nuxt 的css数组nuxt.options.css.push(...)由includeCompiledCss选项控制默认值为true。因此使用 Nuxt 时无需手动引入 CSS。处理原生依赖isolated-vmSDK 依赖isolated-vm见 package.json 的dependencies用于 Node 环境下的安全代码执行。Vite 在开发服务器首次构建时会尝试优化该依赖并报错因此模块默认将其加入optimizeDeps.exclude并在需要时通过nuxt-isolated-vm-plugin.js以server模式注册插件。模块支持两个配置选项从源码推断非 README 原文选项默认值说明includeCompiledCsstrue是否自动引入 SDK 编译后的样式文件initializeNodeRuntimefalse是否初始化 Node 运行时引入isolated-vm相关插件非 Nuxt 的 SSR 框架手动引入 CSS如果你使用的是Nuxt 以外的 SSR 框架例如独立的 Vue SSR 方案或服务端渲染的中间层则需要手动引入 SDK 样式。将以下代码添加到应用入口、且在渲染 Builder 内容之前执行script import builder.io/sdk-vue/css; /script这一导入路径对应 package.json 中exports的./css: ./lib/browser/style.css。SDK 将样式与逻辑分离设计便于各框架按需引入若完全不引入 CSSBuilder 渲染出的富文本、按钮、图片等基础区块会缺少默认样式。渲染 Builder 内容fetchOneEntry Content 组件SDK 的核心用法是先用fetchOneEntry拉取 Builder 内容再把内容交给Content /组件渲染。以仓库中的 Vue 3 示例 examples/vue/vue-3/src/App.vue 为例script setup langts import { Content, fetchOneEntry, isPreviewing, type BuilderContent, getBuilderSearchParams, } from builder.io/sdk-vue; import { onMounted, ref } from vue; const BUILDER_PUBLIC_API_KEY f1a790f8c3204b3b8c5c1795aeac4660; // 替换为你的公钥 const content refBuilderContent | null(null); const canShowContent ref(false); const model page; onMounted(async () { content.value await fetchOneEntry({ model, apiKey: BUILDER_PUBLIC_API_KEY, options: getBuilderSearchParams(new URL(location.href).searchParams), userAttributes: { urlPath: window.location.pathname, }, }); canShowContent.value content.value ? true : isPreviewing(); }); /script template div v-ifcanShowContent div page title: {{ (content content.data content.data.title) || Unpublished }} /div Content :modelmodel :contentcontent :api-keyBUILDER_PUBLIC_API_KEY :customComponentsREGISTERED_COMPONENTS / /div div v-elseContent not Found/div /templatefetchOneEntry 的底层流程fetchOneEntry的实现在 packages/sdks/src/functions/get-content/index.ts其行为可归纳为单条返回内部实际调用fetchEntries({ ...options, limit: 1 })取结果数组的第一项无匹配时返回nulllocale 归一化若显式传入locale或userAttributes.locale会统一写入options.locale与userAttributes.locale保证多语言内容请求一致URL 构建通过generateContentUrl生成内容接口地址请求注入使用全局fetch或options.fetch覆盖并在请求头中附加getSdkHeaders()标记 SDK 身份预览与 A/B 测试响应经_processContentResult处理后在浏览器端会逐条执行handleABTesting保证可视化预览与实验分组正确生效。fetchOneEntry 常用参数参数类型说明modelstringBuilder 内容模型名称如page、blog-postapiKeystringBuilder 空间的公开 API KeyuserAttributesobject用户属性urlPath用于按当前路径匹配页面内容locale用于多语言optionsobject附加请求选项一般传入getBuilderSearchParams的返回值以支持预览参数localestring指定内容语言fetch/fetchOptionsfunction/object自定义 fetch 实现与请求配置canTrackboolean是否上报 A/B 测试与分析事件支持可视化预览的关键函数isPreviewing()实现在 packages/sdks/src/functions/is-previewing.ts通过检测 URL 中是否存在 Builder 预览相关参数判断当前是否处于可视化编辑预览态。在服务端无search参数传入时返回false因此示例中在浏览器端调用以决定是否展示内容。编辑器预览无内容时可借此回退渲染占位内容。getBuilderSearchParams()实现在 packages/sdks/src/functions/get-builder-search-params/index.ts从当前 URL 查询参数中过滤出以builder.前缀开头的参数并去掉options.前缀转换为可传给fetchOneEntry/fetchEntries的options从而让可视化编辑器中的预览参数如builder.preview正确传递到内容请求中。注册自定义组件Builder 的可视化画布默认只能拖拽 SDK 内置区块要将你的 Vue 组件暴露给编辑器需要把它们注册到customComponents并传给Content /。示例见 examples/vue/nuxt-3/app.vue中的注册结构如下const REGISTERED_COMPONENTS [ { component: HelloWorldComponent, // 你的 Vue 组件 name: MyFunComponent, // 在 Builder 编辑器中显示的名称 canHaveChildren: true, // 是否允许包裹子元素 inputs: [ { name: text, // 属性名对应组件 props type: string, // 属性类型 defaultValue: World, // 默认值 }, ], }, ];注册后这些组件会出现在 Builder 编辑器的组件面板中编辑器侧可配置inputs声明的属性并实时反映到页面。Nuxt 3 中的服务端拉取模式在 Nuxt 3 中推荐使用useAsyncData包裹fetchOneEntry以获得服务端渲染与数据缓存见 examples/vue/nuxt-3/app.vue 的核心片段const route useRoute(); const { data: content } await useAsyncData(builderData-page-${route.path}, () fetchOneEntry({ model: page, apiKey: BUILDER_PUBLIC_API_KEY, userAttributes: { urlPath: route.path, }, }) );模板中通过v-ifcontent || isPreviewing()判断展示确保无内容时也能在编辑器预览态下正常渲染。全站渲染catch-all 路由若希望所有 URL 都由 Builder 的page模型接管典型 CMS / 落地页场景可参考 examples/vue/nuxt-3-catchall/pages/[...app].vue它利用 Nuxt 的 catch-all 动态路由[...app].vue结合useRoute().path作为urlPath拉取与当前路径匹配的内容其余逻辑与单页示例一致。这样新增页面无需改动代码在 Builder 中发布内容后即可生效。SDK 的来源与构建Mitosis 生成该 Vue SDK 并非手写维护而是由 Builder 自研的编译框架Mitosis生成——README 中明确说明 “This SDK is generated by Mitosis”其 Mitosis 源码位于 packages/sdks 目录。这意味着 Vue 版本与 React、Svelte、Qwik、Solid 等版本的 SDK 共享同一套底层逻辑如fetchOneEntry、isPreviewing、内容渲染管线仅在框架层做适配。从 package.json 的scripts可以看到三端构建命令build:node # SDK_ENVnode vite build build:edge # SDK_ENVedge vite build build:browser # SDK_ENVbrowser vite build三种环境共用同一份 Vue 源码通过SDK_ENV环境变量切换目标产物最终输出到lib目录并由exports字段按运行环境Node / 浏览器 / 边缘运行时自动解析对应入口。开发者无需关心多端差异直接import { Content } from builder.io/sdk-vue即可。特性支持状态不同框架 SDK 的功能实现进度可能存在差异建议在接入前查阅 packages/sdks/README.md#feature-implementation 的特性支持表格确认当前 SDK 是否已覆盖你所需的区块与功能。该表格由 Builder 官方持续维护是评估 Vue SDK 能力边界的权威依据。完整示例导航仓库中提供了三份可直接运行的官方示例覆盖本文全部使用场景Vue 3 Viteexamples/vue/vue-3在src/App.vue中完成拉取与渲染npm install npm run dev即可启动Nuxt 3 单页examples/vue/nuxt-3在app.vue中使用useAsyncData服务端拉取内容Nuxt 3 catch-all 全站渲染examples/vue/nuxt-3-catchall通过pages/[...app].vue接管全部路由。三者共用同一套内容拉取与组件注册逻辑区别仅在于集成环境与路由策略可作为从零接入时的最小可运行模板。【免费下载链接】builderVisual Development for React, Vue, Svelte, Qwik, and more项目地址: https://gitcode.com/GitHub_Trending/bu/builder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考