使用 Nuxt 3 Catch-all 路由集成 Builder.io Vue SDK打造全站可视化页面开发【免费下载链接】builderVisual Development for React, Vue, Svelte, Qwik, and more项目地址: https://gitcode.com/GitHub_Trending/bu/builder在 Vue 3 Nuxt 3 项目中Builder.io 的 Vue SDKbuilder.io/sdk-vue允许开发者将页面交给无头 CMS 可视化编排同时保留 Nuxt 3 的 SSR 与文件路由能力。本文以仓库中的 nuxt-3-catchall 示例 为骨架讲解如何通过一个[...app].vue的 catch-all兜底页面接管 Builder.io 中 model 为page的全部内容渲染包括 Builder.io 侧的可视化编辑器配置、Nuxt 3 中 SDK Nuxt Module 的注册、服务端数据获取fetchOneEntryuseAsyncData、自定义组件注册以及开发与生产构建全流程。读完本文你将掌握在 Nuxt 3 应用中接入 Builder.io 可视化开发的标准姿势。示例项目结构一览examples/vue/nuxt-3-catchall是一个最小可运行的 Nuxt 3 示例其目录结构如下pages/[...app].vue核心 catch-all 页面负责按路由路径获取并渲染 Builder.io 内容components/HelloWorld.vue一个演示用的自定义 Vue 组件用于注册进 Builder.io 可视化编辑器app.vueNuxt 3 根组件通过NuxtLayout与NuxtPage挂载页面nuxt.config.tsNuxt 配置注册builder.io/sdk-vue/nuxt模块package.json项目脚本与依赖声明。该示例完整演示了Builder 中编排页面 → Nuxt 运行时按路径拉取内容 → 客户端渲染的闭环是最简且最具代表性的集成基线。Builder.io 侧准备在动代码之前需要先完成 Builder.io 账号侧的配置。官方文档给出的步骤为登录 builder.io在账号页面复制你的 API Key粘贴到 pages/[...app].vue 中的BUILDER_PUBLIC_API_KEY常量打开 Builder.io 中 model 名为page的 Visual Editor可视化编辑器在 Builder 预览区右上角的 URL 栏中输入http://localhost:3000在 Layers图层面板中拖入一个组件它就会实时出现在编辑器与本地页面中。其中第 5 步是 Builder.io 可视化开发的精髓你在后台拖拽的组件会实时反映到本地localhost:3000页面刷新后由 Nuxt 服务端重新获取内容渲染。仓库源码中示例页面提供了一个占位 Key标注了// ggignore注释正式接入时必须替换为你自己的公开 API Key。Nuxt 3 环境搭建与 SDK 模块注册安装依赖进入示例目录后安装依赖yarn、npm、pnpm均可# yarn yarn install # npm npm install # pnpm pnpm install依赖声明见 package.jsonnuxt ^3.12.4与builder.io/sdk-vue ^1.0.14。其中 SDK 的peerDependencies要求vue 3与 Nuxt 3 内置的 Vue 3 运行时完全兼容。注册 Nuxt Module在 nuxt.config.ts 中注册 SDK 自带的 Nuxt 模块// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ modules: [builder.io/sdk-vue/nuxt], });这个nuxt入口由 SDK 包显式导出见 packages/sdks/output/vue/package.json 中./nuxt: ./nuxt.js的 exports 映射。查看 packages/sdks/output/vue/nuxt.js 的源码可知该模块在setup阶段主要做了两件事自动注入编译好的 Builder.io CSS当includeCompiledCss默认true时会把builder.io/sdk-vue/css追加到 Nuxt 的css数组中开发者无需手动引入样式Node 运行时isolated-vm可选初始化当initializeNodeRuntime为true时模块会把builder.io/sdk-vue/node/init加入 ViteoptimizeDeps.exclude避免 dev server 首构建时对isolated-vm这个 Node 原生模块做不必要的依赖预构建该模块只应在 Node 环境被导入同时注册一个仅服务端生效的nuxt-isolated-vm-plugin.js插件。也就是说仅注册一行模块即可获得样式注入这一开箱即用的能力只有当你需要在服务端执行 SDK 的 Node 运行时例如渲染 JavaScript 类组件时才需要开启initializeNodeRuntime选项。核心catch-all 页面如何接管 Builder 内容文件路由与 URL 路径映射Nuxt 3 中文件名带[...]的页面是 catch-all 路由会匹配根路径之外的所有 URL。示例的 pages/[...app].vue 因此成为全站的统一入口任何请求路径都会进入该页面并据此路径去 Builder.io 拉取对应的 page 内容从而实现一个页面文件托管整个站点。服务端数据获取fetchOneEntry useAsyncData页面脚本段的关键代码如下const route useRoute(); // fetch builder content data const { data: content } await useAsyncData(builderData-page-${route.path}, () fetchOneEntry({ model: page, apiKey: BUILDER_PUBLIC_API_KEY, userAttributes: { urlPath: route.path, }, }) );这里使用了 Nuxt 3 的useAsyncData组合式函数将fetchOneEntry的 Promise 包起来以获得SSR 阶段服务端取数、客户端复用的能力避免双端重复请求同时天然支持响应式刷新。fetchOneEntry来自builder.io/sdk-vue其入参含义如下model要获取的内容模型这里为page与 Builder.io 后台编辑器的 model 名称一一对应apiKey你的公开 API KeyuserAttributes.urlPath当前路由路径Builder.io 用它做 A/B 测试、定位目标与页面匹配是按路径返回对应页面的关键。缓存键builderData-page-${route.path}按路径隔离保证不同 URL 的页面数据互不串扰。useAsyncData需要在setup顶层被await而script setup天然满足这一约束。渲染与预览态处理模板部分根据内容与预览状态进行条件渲染div v-ifcontent || isPreviewing() div page title: {{ content?.data?.title || Unpublished }} /div Content modelpage :contentcontent :api-keyBUILDER_PUBLIC_API_KEY :customComponentsREGISTERED_COMPONENTS / /div div v-elseContent not Found/divisPreviewing()判断当前是否处于 Builder 可视化编辑器预览状态。这是可视化开发的核心细节——当你在 Builder 中打开编辑器时即便内容尚未发布content可能仍为空但页面必须渲染Content以承接编辑器注入的草稿数据因此用content || isPreviewing()作为渲染条件ContentSDK 提供的渲染组件接收model、content、apiKey与customComponents把 Builder 中的 JSON 内容树渲染为真实的 Vue 组件树content?.data?.title页面数据中的字段可直接通过data属性读取未发布时回退为Unpublished两者皆不满足时显示Content not Found保证非 Builder 管理的路径有明确的降级提示。注册自定义组件到编辑器示例还演示了如何把本地 Vue 组件注册进 Builder 可视化编辑器const REGISTERED_COMPONENTS [ { component: HelloWorldComponent, name: MyFunComponent, canHaveChildren: true, inputs: [ { name: text, type: string, defaultValue: World, }, ], }, ];每一条注册信息包含component组件本身这里是 components/HelloWorld.vuename显示在 Builder 组件面板中的名称MyFunComponentcanHaveChildren是否允许嵌套子元素对应组件模板中的slot/slotinputs暴露给编辑器配置的属性 schema示例定义了textstring 类型默认值World与 HelloWorld.vue 中的props.text一一对应。注册完成后即可在 Builder 编辑器左侧组件面板中搜到MyFunComponent并拖入画布其text属性会显示为可编辑的输入框。HelloWorld.vue 的模板为Hello {{ text }}!并带有一个slot用于接收子内容结构上与注册声明完全匹配。本地开发与生产构建示例 package.json 提供了完整的脚本命令脚本说明开发服务器npm run dev启动 dev server默认监听http://localhost:3000也是 Builder 可视化编辑器预览地址生产构建npm run build执行nuxt build产出服务端与客户端产物静态生成npm run generate执行nuxt generate预渲染为静态站点本地预览npm run preview在本地预览生产构建结果开发流程是先在 Builder.io 后台把预览 URL 设为http://localhost:3000再本地执行npm run dev随后在 Builder 编辑器中拖拽组件即可看到实时效果。生产环境则按需选择npm run buildNode 服务托管或npm run generate静态托管部署。SDK 包结构运行时如何工作builder.io/sdk-vue在 packages/sdks/output/vue/package.json 中通过条件导出conditional exports同时提供了多套运行时产物nodeimport/require服务端环境使用适合 SSRbrowser浏览器环境使用适合纯 CSRedge系列edge-routine、workerd、deno、netlify、bun、edge-light等边缘运行时使用支持在边缘函数中取数与渲染./css编译好的 Builder 样式文件由 Nuxt 模块自动注入./nuxt上述 Nuxt 模块入口./node/initNode 运行时初始化入口配合initializeNodeRuntime选项使用。这种多运行时打包意味着同一套 SDK 可以在 Nuxt 3 的 SSR 主进程中取数渲染也可视需要在边缘环境运行。关于 SDK 各能力的实现状态可查阅 packages/sdks/README.md 中的 feature implementation 表格。总结通过 nuxt-3-catchall 示例 可以清晰地看到 Builder.io Nuxt 3 集成的完整链路Builder.io 侧获取公开 API Key在pagemodel 的可视化编辑器中指向http://localhost:3000进行拖拽编排Nuxt 3 侧安装builder.io/sdk-vue并在nuxt.config.ts注册其 Nuxt 模块自动获得样式注入可选开启 Node 运行时页面侧用单个[...app].vuecatch-all 路由 fetchOneEntryuseAsyncData按路径拉取内容用Content渲染用isPreviewing()支持编辑器草稿预览组件侧通过REGISTERED_COMPONENTS把本地 Vue 组件暴露给 Builder 编辑器构建侧dev开发、build/generate生产构建、preview本地预览一应俱全。这套模式最大的价值在于业务团队可以在 Builder.io 中独立完成页面编排与迭代而前端只需维护这一个入口页面与少量注册组件实现了内容可视化 工程化 SSR的解耦。【免费下载链接】builderVisual Development for React, Vue, Svelte, Qwik, and more项目地址: https://gitcode.com/GitHub_Trending/bu/builder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/16 15:24:14 · 阅读 1.2k 使用 Nuxt 3 Catch-all 路由集成 Builder.io Vue SDK：打造全站可视化页面开发
使用 Nuxt 3 Catch-all 路由集成 Builder.io Vue SDK打造全站可视化页面开发【免费下载链接】builderVisual Development for React, Vue, Svelte, Qwik, and more项目地址: https://gitcode.com/GitHub_Trending/bu/builder在 Vue 3 Nuxt 3 项目中Builder.io 的 Vue SDKbuilder.io/sdk-vue允许开发者将页面交给无头 CMS 可视化编排同时保留 Nuxt 3 的 SSR 与文件路由能力。本文以仓库中的 nuxt-3-catchall 示例 为骨架讲解如何通过一个[...app].vue的 catch-all兜底页面接管 Builder.io 中 model 为page的全部内容渲染包括 Builder.io 侧的可视化编辑器配置、Nuxt 3 中 SDK Nuxt Module 的注册、服务端数据获取fetchOneEntryuseAsyncData、自定义组件注册以及开发与生产构建全流程。读完本文你将掌握在 Nuxt 3 应用中接入 Builder.io 可视化开发的标准姿势。示例项目结构一览examples/vue/nuxt-3-catchall是一个最小可运行的 Nuxt 3 示例其目录结构如下pages/[...app].vue核心 catch-all 页面负责按路由路径获取并渲染 Builder.io 内容components/HelloWorld.vue一个演示用的自定义 Vue 组件用于注册进 Builder.io 可视化编辑器app.vueNuxt 3 根组件通过NuxtLayout与NuxtPage挂载页面nuxt.config.tsNuxt 配置注册builder.io/sdk-vue/nuxt模块package.json项目脚本与依赖声明。该示例完整演示了Builder 中编排页面 → Nuxt 运行时按路径拉取内容 → 客户端渲染的闭环是最简且最具代表性的集成基线。Builder.io 侧准备在动代码之前需要先完成 Builder.io 账号侧的配置。官方文档给出的步骤为登录 builder.io在账号页面复制你的 API Key粘贴到 pages/[...app].vue 中的BUILDER_PUBLIC_API_KEY常量打开 Builder.io 中 model 名为page的 Visual Editor可视化编辑器在 Builder 预览区右上角的 URL 栏中输入http://localhost:3000在 Layers图层面板中拖入一个组件它就会实时出现在编辑器与本地页面中。其中第 5 步是 Builder.io 可视化开发的精髓你在后台拖拽的组件会实时反映到本地localhost:3000页面刷新后由 Nuxt 服务端重新获取内容渲染。仓库源码中示例页面提供了一个占位 Key标注了// ggignore注释正式接入时必须替换为你自己的公开 API Key。Nuxt 3 环境搭建与 SDK 模块注册安装依赖进入示例目录后安装依赖yarn、npm、pnpm均可# yarn yarn install # npm npm install # pnpm pnpm install依赖声明见 package.jsonnuxt ^3.12.4与builder.io/sdk-vue ^1.0.14。其中 SDK 的peerDependencies要求vue 3与 Nuxt 3 内置的 Vue 3 运行时完全兼容。注册 Nuxt Module在 nuxt.config.ts 中注册 SDK 自带的 Nuxt 模块// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ modules: [builder.io/sdk-vue/nuxt], });这个nuxt入口由 SDK 包显式导出见 packages/sdks/output/vue/package.json 中./nuxt: ./nuxt.js的 exports 映射。查看 packages/sdks/output/vue/nuxt.js 的源码可知该模块在setup阶段主要做了两件事自动注入编译好的 Builder.io CSS当includeCompiledCss默认true时会把builder.io/sdk-vue/css追加到 Nuxt 的css数组中开发者无需手动引入样式Node 运行时isolated-vm可选初始化当initializeNodeRuntime为true时模块会把builder.io/sdk-vue/node/init加入 ViteoptimizeDeps.exclude避免 dev server 首构建时对isolated-vm这个 Node 原生模块做不必要的依赖预构建该模块只应在 Node 环境被导入同时注册一个仅服务端生效的nuxt-isolated-vm-plugin.js插件。也就是说仅注册一行模块即可获得样式注入这一开箱即用的能力只有当你需要在服务端执行 SDK 的 Node 运行时例如渲染 JavaScript 类组件时才需要开启initializeNodeRuntime选项。核心catch-all 页面如何接管 Builder 内容文件路由与 URL 路径映射Nuxt 3 中文件名带[...]的页面是 catch-all 路由会匹配根路径之外的所有 URL。示例的 pages/[...app].vue 因此成为全站的统一入口任何请求路径都会进入该页面并据此路径去 Builder.io 拉取对应的 page 内容从而实现一个页面文件托管整个站点。服务端数据获取fetchOneEntry useAsyncData页面脚本段的关键代码如下const route useRoute(); // fetch builder content data const { data: content } await useAsyncData(builderData-page-${route.path}, () fetchOneEntry({ model: page, apiKey: BUILDER_PUBLIC_API_KEY, userAttributes: { urlPath: route.path, }, }) );这里使用了 Nuxt 3 的useAsyncData组合式函数将fetchOneEntry的 Promise 包起来以获得SSR 阶段服务端取数、客户端复用的能力避免双端重复请求同时天然支持响应式刷新。fetchOneEntry来自builder.io/sdk-vue其入参含义如下model要获取的内容模型这里为page与 Builder.io 后台编辑器的 model 名称一一对应apiKey你的公开 API KeyuserAttributes.urlPath当前路由路径Builder.io 用它做 A/B 测试、定位目标与页面匹配是按路径返回对应页面的关键。缓存键builderData-page-${route.path}按路径隔离保证不同 URL 的页面数据互不串扰。useAsyncData需要在setup顶层被await而script setup天然满足这一约束。渲染与预览态处理模板部分根据内容与预览状态进行条件渲染div v-ifcontent || isPreviewing() div page title: {{ content?.data?.title || Unpublished }} /div Content modelpage :contentcontent :api-keyBUILDER_PUBLIC_API_KEY :customComponentsREGISTERED_COMPONENTS / /div div v-elseContent not Found/divisPreviewing()判断当前是否处于 Builder 可视化编辑器预览状态。这是可视化开发的核心细节——当你在 Builder 中打开编辑器时即便内容尚未发布content可能仍为空但页面必须渲染Content以承接编辑器注入的草稿数据因此用content || isPreviewing()作为渲染条件ContentSDK 提供的渲染组件接收model、content、apiKey与customComponents把 Builder 中的 JSON 内容树渲染为真实的 Vue 组件树content?.data?.title页面数据中的字段可直接通过data属性读取未发布时回退为Unpublished两者皆不满足时显示Content not Found保证非 Builder 管理的路径有明确的降级提示。注册自定义组件到编辑器示例还演示了如何把本地 Vue 组件注册进 Builder 可视化编辑器const REGISTERED_COMPONENTS [ { component: HelloWorldComponent, name: MyFunComponent, canHaveChildren: true, inputs: [ { name: text, type: string, defaultValue: World, }, ], }, ];每一条注册信息包含component组件本身这里是 components/HelloWorld.vuename显示在 Builder 组件面板中的名称MyFunComponentcanHaveChildren是否允许嵌套子元素对应组件模板中的slot/slotinputs暴露给编辑器配置的属性 schema示例定义了textstring 类型默认值World与 HelloWorld.vue 中的props.text一一对应。注册完成后即可在 Builder 编辑器左侧组件面板中搜到MyFunComponent并拖入画布其text属性会显示为可编辑的输入框。HelloWorld.vue 的模板为Hello {{ text }}!并带有一个slot用于接收子内容结构上与注册声明完全匹配。本地开发与生产构建示例 package.json 提供了完整的脚本命令脚本说明开发服务器npm run dev启动 dev server默认监听http://localhost:3000也是 Builder 可视化编辑器预览地址生产构建npm run build执行nuxt build产出服务端与客户端产物静态生成npm run generate执行nuxt generate预渲染为静态站点本地预览npm run preview在本地预览生产构建结果开发流程是先在 Builder.io 后台把预览 URL 设为http://localhost:3000再本地执行npm run dev随后在 Builder 编辑器中拖拽组件即可看到实时效果。生产环境则按需选择npm run buildNode 服务托管或npm run generate静态托管部署。SDK 包结构运行时如何工作builder.io/sdk-vue在 packages/sdks/output/vue/package.json 中通过条件导出conditional exports同时提供了多套运行时产物nodeimport/require服务端环境使用适合 SSRbrowser浏览器环境使用适合纯 CSRedge系列edge-routine、workerd、deno、netlify、bun、edge-light等边缘运行时使用支持在边缘函数中取数与渲染./css编译好的 Builder 样式文件由 Nuxt 模块自动注入./nuxt上述 Nuxt 模块入口./node/initNode 运行时初始化入口配合initializeNodeRuntime选项使用。这种多运行时打包意味着同一套 SDK 可以在 Nuxt 3 的 SSR 主进程中取数渲染也可视需要在边缘环境运行。关于 SDK 各能力的实现状态可查阅 packages/sdks/README.md 中的 feature implementation 表格。总结通过 nuxt-3-catchall 示例 可以清晰地看到 Builder.io Nuxt 3 集成的完整链路Builder.io 侧获取公开 API Key在pagemodel 的可视化编辑器中指向http://localhost:3000进行拖拽编排Nuxt 3 侧安装builder.io/sdk-vue并在nuxt.config.ts注册其 Nuxt 模块自动获得样式注入可选开启 Node 运行时页面侧用单个[...app].vuecatch-all 路由 fetchOneEntryuseAsyncData按路径拉取内容用Content渲染用isPreviewing()支持编辑器草稿预览组件侧通过REGISTERED_COMPONENTS把本地 Vue 组件暴露给 Builder 编辑器构建侧dev开发、build/generate生产构建、preview本地预览一应俱全。这套模式最大的价值在于业务团队可以在 Builder.io 中独立完成页面编排与迭代而前端只需维护这一个入口页面与少量注册组件实现了内容可视化 工程化 SSR的解耦。【免费下载链接】builderVisual Development for React, Vue, Svelte, Qwik, and more项目地址: https://gitcode.com/GitHub_Trending/bu/builder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考