[{"data":1,"prerenderedAt":5091},["ShallowReactive",2],{"docs-all-flat":3,"docs-\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomponents":1018},[4,8,12,16,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304,308,312,316,320,324,328,332,336,340,344,348,352,355,359,363,367,371,375,379,383,387,391,395,399,403,407,411,415,419,423,427,431,435,439,443,447,451,455,459,463,467,471,475,479,483,487,491,495,499,503,507,511,515,519,523,527,531,535,539,543,547,551,555,559,563,567,571,575,579,583,587,591,595,599,603,607,611,615,619,623,627,631,635,639,643,647,651,655,659,663,667,671,675,679,683,687,691,695,699,703,707,711,715,719,723,727,731,735,739,743,747,751,755,759,763,767,770,774,778,782,786,790,794,798,802,806,809,813,817,821,825,829,833,837,841,845,849,852,855,859,863,867,871,874,877,881,884,888,892,895,898,901,904,907,911,915,918,922,926,930,934,938,942,946,950,954,958,962,966,970,974,978,982,986,990,994,998,1002,1006,1010,1014],{"path":5,"title":6,"description":7},"\u002Fdocs\u002Fgetting-started\u002Fintroduction","介绍","Nuxt 的目标是提供直观且高性能的 Web 开发体验，并始终将优秀的开发者体验（Developer Experience）放在心上。",{"path":9,"title":10,"description":11},"\u002Fdocs\u002Fgetting-started\u002Finstallation","安装","通过在线 starter 快速上手 Nuxt，或在本地使用终端从零开始。",{"path":13,"title":14,"description":15},"\u002Fdocs\u002Fgetting-started\u002Fconfiguration","配置","Nuxt 提供了合理的默认配置，让你高效开发。",{"path":17,"title":18,"description":19},"\u002Fdocs\u002Fgetting-started\u002Fviews","视图","Nuxt 提供了多个组件层来实现应用的用户界面。",{"path":21,"title":22,"description":23},"\u002Fdocs\u002Fgetting-started\u002Fassets","资源","Nuxt 为你的资源提供了两种处理方式。",{"path":25,"title":26,"description":27},"\u002Fdocs\u002Fgetting-started\u002Fstyling","样式","了解如何为你的 Nuxt 应用添加样式。",{"path":29,"title":30,"description":31},"\u002Fdocs\u002Fgetting-started\u002Frouting","路由","Nuxt 的文件系统路由会为 pages\u002F 目录中的每个文件创建一条路由。",{"path":33,"title":34,"description":35},"\u002Fdocs\u002Fgetting-started\u002Fseo-meta","SEO 与 Meta","借助强大的 head 配置、composables 和组件，改善你的 Nuxt 应用的 SEO。",{"path":37,"title":38,"description":39},"\u002Fdocs\u002Fgetting-started\u002Ftransitions","过渡","使用 Vue 或浏览器原生的 View Transitions，在页面和布局之间应用过渡效果。",{"path":41,"title":42,"description":43},"\u002Fdocs\u002Fgetting-started\u002Fdata-fetching","数据获取","Nuxt 提供了用于处理应用内数据获取的 composables。",{"path":45,"title":46,"description":47},"\u002Fdocs\u002Fgetting-started\u002Fstate-management","状态管理","Nuxt 提供了强大的状态管理库和 useState composable，用于创建响应式且对 SSR 友好的共享状态。",{"path":49,"title":50,"description":51},"\u002Fdocs\u002Fgetting-started\u002Ferror-handling","错误处理","了解如何在 Nuxt 中捕获和处理错误。",{"path":53,"title":54,"description":55},"\u002Fdocs\u002Fgetting-started\u002Fserver","Server","利用 Nuxt 的服务端框架构建全栈应用。你可以从数据库或其他服务端获取数据、创建 API，甚至生成像站点地图或 RSS 这样的静态服务端内容——全部来自同一个代码库。",{"path":57,"title":58,"description":59},"\u002Fdocs\u002Fgetting-started\u002Flayers","Layers","Nuxt 提供了一套强大的系统，允许你扩展默认文件、配置以及更多内容。",{"path":61,"title":62,"description":63},"\u002Fdocs\u002Fgetting-started\u002Fprerendering","Prerendering","Nuxt 允许在构建时静态渲染某些页面，以改善特定的性能或 SEO 指标。",{"path":65,"title":66,"description":67},"\u002Fdocs\u002Fgetting-started\u002Fdeployment","Deployment","了解如何将你的 Nuxt 应用部署到任何托管提供商。",{"path":69,"title":70,"description":71},"\u002Fdocs\u002Fgetting-started\u002Ftesting","Testing","如何测试你的 Nuxt 应用。",{"path":73,"title":74,"description":75},"\u002Fdocs\u002Fgetting-started\u002Fupgrade","Upgrade Guide","了解如何升级到最新的 Nuxt 版本。",{"path":77,"title":78,"description":79},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxt",".nuxt","Nuxt 在开发阶段使用 .nuxt\u002F 目录来生成你的 Vue 应用。",{"path":81,"title":82,"description":83},"\u002Fdocs\u002Fdirectory-structure\u002Foutput",".output","Nuxt 在为生产环境构建应用时创建 .output\u002F 目录。",{"path":85,"title":86,"description":87},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fassets","assets","assets\u002F 目录用于添加所有将由构建工具处理的网站资源。",{"path":89,"title":90,"description":91},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomponents","components","components\u002F 目录用于存放你所有的 Vue 组件。",{"path":93,"title":94,"description":95},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomposables","composables","使用 composables\u002F 目录将你的 Vue 组合式函数自动导入到应用中。",{"path":97,"title":98,"description":99},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Flayouts","layouts","Nuxt 提供了一个布局框架，用于将通用的 UI 模式提取为可复用的布局。",{"path":101,"title":102,"description":103},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fmiddleware","middleware","Nuxt 提供中间件，用于在导航到特定路由前运行代码。",{"path":105,"title":106,"description":107},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fpages","pages","Nuxt 提供基于文件的路由，用于在 Web 应用中创建路由。",{"path":109,"title":110,"description":111},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fplugins","plugins","Nuxt 拥有一个插件系统，用于在创建 Vue 应用时使用 Vue 插件等。",{"path":113,"title":114,"description":115},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Futils","utils","使用 utils\u002F 目录在你的应用中自动导入工具函数。",{"path":117,"title":118,"description":119},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fapp","app.vue","app.vue 文件是你 Nuxt 应用的主组件。",{"path":121,"title":122,"description":123},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fapp-config","app.config.ts","使用 App Config 文件在应用内部暴露响应式配置。",{"path":125,"title":126,"description":127},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Ferror","error.vue","error.vue 文件是你 Nuxt 应用中的错误页面。",{"path":129,"title":130,"description":131},"\u002Fdocs\u002Fdirectory-structure\u002Fcontent","content","使用 content\u002F 目录为你的应用创建一个基于文件的 CMS。",{"path":133,"title":134,"description":135},"\u002Fdocs\u002Fdirectory-structure\u002Flayers","layers","使用 layers\u002F 目录在你的应用中组织和自动注册本地 layers。",{"path":137,"title":138,"description":139},"\u002Fdocs\u002Fdirectory-structure\u002Fmodules","modules","使用 modules\u002F 目录在你的应用中自动注册本地模块。",{"path":141,"title":142,"description":143},"\u002Fdocs\u002Fdirectory-structure\u002Fnode_modules","node_modules","包管理器将项目的依赖存储在 node_modules\u002F 目录中。",{"path":145,"title":146,"description":147},"\u002Fdocs\u002Fdirectory-structure\u002Fpublic","public","public\u002F 目录用于提供网站的静态资源。",{"path":149,"title":150,"description":151},"\u002Fdocs\u002Fdirectory-structure\u002Fserver","server","server\u002F 目录用于为你的应用注册 API 和服务端处理器。",{"path":153,"title":154,"description":155},"\u002Fdocs\u002Fdirectory-structure\u002Fshared","shared","使用 shared\u002F 目录在 Vue 应用和 Nitro 服务端之间共享功能。",{"path":157,"title":158,"description":159},"\u002Fdocs\u002Fdirectory-structure\u002Fenv",".env",".env 文件用于指定构建\u002F开发时的环境变量。",{"path":161,"title":162,"description":163},"\u002Fdocs\u002Fdirectory-structure\u002Fgitignore",".gitignore",".gitignore 文件用于指定 git 应当忽略的、有意不跟踪的文件。",{"path":165,"title":166,"description":167},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxtignore",".nuxtignore",".nuxtignore 文件用于让 Nuxt 在构建阶段忽略项目根目录中的文件。",{"path":169,"title":170,"description":171},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxtrc",".nuxtrc",".nuxtrc 文件允许你用扁平语法定义 Nuxt 配置。",{"path":173,"title":174,"description":175},"\u002Fdocs\u002Fdirectory-structure\u002Fnuxt-config","nuxt.config.ts","只需要一个 nuxt.config 文件，即可轻松配置 Nuxt。",{"path":177,"title":178,"description":179},"\u002Fdocs\u002Fdirectory-structure\u002Fpackage","package.json","package.json 文件包含你应用的所有依赖和脚本。",{"path":181,"title":182,"description":183},"\u002Fdocs\u002Fdirectory-structure\u002Ftsconfig","tsconfig.json","了解 Nuxt 如何在项目的不同部分管理 TypeScript 配置。",{"path":185,"title":186,"description":187},"\u002Fdocs\u002Fdirectory-structure","Nuxt 目录结构","了解 Nuxt 应用的目录结构以及如何使用它。",{"path":189,"title":190,"description":191},"\u002Fdocs\u002Fguide","Nuxt 指南","通过深入的指南了解 Nuxt 的工作原理。",{"path":193,"title":194,"description":195},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Frendering","渲染模式","了解 Nuxt 中可用的不同渲染模式。",{"path":197,"title":198,"description":199},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fvuejs-development","Vue.js 开发","Nuxt 使用 Vue.js，并添加了组件自动导入、基于文件的路由以及支持 SSR 的组合式函数等特性。",{"path":201,"title":202,"description":203},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fnuxt-lifecycle","Nuxt 生命周期","理解 Nuxt 应用的生命周期，可以帮助你更深入地了解框架是如何运作的，尤其是在服务端渲染和客户端渲染两方面。",{"path":205,"title":206,"description":207},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fauto-imports","自动导入","Nuxt 会自动导入组件、组合式函数、辅助函数和 Vue API。",{"path":209,"title":210,"description":211},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fserver-engine","服务端引擎","Nuxt 由一个全新的服务端引擎驱动：Nitro。",{"path":213,"title":214,"description":215},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fmodules","模块","Nuxt 提供了一个模块系统来扩展框架核心并简化集成。",{"path":217,"title":218,"description":219},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fesm","ES 模块","Nuxt 使用原生的 ES 模块。",{"path":221,"title":222,"description":223},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Ftypescript","TypeScript","Nuxt 完全类型化，并提供了有用的快捷方式，确保你在编码时能获取准确的类型信息。",{"path":225,"title":226,"description":227},"\u002Fdocs\u002Fguide\u002Fconcepts\u002Fcode-style","代码风格","Nuxt 开箱即用地支持 ESLint",{"path":229,"title":230,"description":231},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fdevcontainers","Dev Containers","在开发容器中设置或打开 Nuxt 项目，以获得一致开发环境。",{"path":233,"title":234,"description":235},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fhydration","Nuxt and Hydration","为什么修复水合问题很重要",{"path":237,"title":238,"description":239},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fperformance","Nuxt performance","提升 Nuxt 应用性能的最佳实践。",{"path":241,"title":242,"description":243},"\u002Fdocs\u002Fguide\u002Fbest-practices\u002Fplugins","Nuxt Plugins","使用 Nuxt 插件时的最佳实践。",{"path":245,"title":246,"description":247},"\u002Fdocs\u002Fguide\u002Fai\u002Fmcp","Nuxt MCP Server","借助 Model Context Protocol 支持，在你的 AI 助手中使用 Nuxt 文档。",{"path":249,"title":250,"description":251},"\u002Fdocs\u002Fguide\u002Fai\u002Fllms-txt","Nuxt LLMs.txt","如何让 Cursor、Windsurf、GitHub Copilot、ChatGPT 和 Claude 等 AI 工具理解 Nuxt 的概念、API 和最佳实践。",{"path":253,"title":254,"description":255},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fgetting-started","创建你的第一个模块","学习如何使用官方启动模板创建你的第一个 Nuxt 模块。",{"path":257,"title":258,"description":259},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fmodule-anatomy","理解模块结构","学习 Nuxt 模块是如何构成的，以及如何定义它们。",{"path":261,"title":262,"description":263},"\u002Fdocs\u002Fguide\u002Fmodules\u002Frecipes-basics","添加插件、组件等","学习如何从你的模块注入插件、组件、组合式函数和服务端路由。",{"path":265,"title":266,"description":267},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fmodule-dependencies","模块依赖","声明对其它模块的依赖，并带有版本约束和配置合并。",{"path":269,"title":270,"description":271},"\u002Fdocs\u002Fguide\u002Fmodules\u002Frecipes-advanced","使用钩子与扩展类型","在你的模块中掌握生命周期钩子、虚拟文件和 TypeScript 声明。",{"path":273,"title":274,"description":275},"\u002Fdocs\u002Fguide\u002Fmodules\u002Ftesting","测试你的模块","学习如何对你的 Nuxt 模块进行单元、集成和 E2E 测试。",{"path":277,"title":278,"description":279},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fbest-practices","遵循最佳实践","使用这些指南构建高性能且可维护的 Nuxt 模块。",{"path":281,"title":282,"description":283},"\u002Fdocs\u002Fguide\u002Fmodules\u002Fecosystem","发布与分享你的模块","加入 Nuxt 模块生态，并将你的模块发布到 npm。",{"path":285,"title":286,"description":287},"\u002Fdocs\u002Fguide\u002Fmodules","Module Author Guide","学习如何创建 Nuxt 模块，以集成、增强或扩展任意 Nuxt 应用。",{"path":289,"title":290,"description":291},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fcustom-routing","自定义路由","在 Nuxt 中，你的路由由 pages 目录内文件的结构定义。不过，由于底层使用了 vue-router，Nuxt 提供了几种在你的项目中添加自定义路由的方式。",{"path":293,"title":294,"description":295},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fvite-plugin","在 Nuxt 中使用 Vite 插件","学习如何将 Vite 插件集成到你的 Nuxt 项目中。",{"path":297,"title":298,"description":299},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fcustom-usefetch","Nuxt 中的自定义 useFetch","如何在 Nuxt 中创建用于调用你外部 API 的自定义 fetcher。",{"path":301,"title":302,"description":303},"\u002Fdocs\u002Fguide\u002Frecipes\u002Fsessions-and-authentication","会话与鉴权","鉴权是 Web 应用中极其常见的需求。本配方将向你展示如何在你的 Nuxt 应用中实现基本的用户注册与鉴权。",{"path":305,"title":306,"description":307},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fevents","创建自定义事件","Nuxt 提供了一个由 hookable 驱动的强大事件系统。",{"path":309,"title":310,"description":311},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fexperimental-features","实验性特性","启用 Nuxt 实验性特性以解锁新的可能性。",{"path":313,"title":314,"description":315},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Ffeatures","特性开关","启用或禁用可选的 Nuxt 特性，以解锁新的可能性。",{"path":317,"title":318,"description":319},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Finternals","Nuxt 是如何工作的？","Nuxt 是一个极简但高度可定制的框架，用于构建 Web 应用。",{"path":321,"title":322,"description":323},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fruntime-config","运行时配置","Nuxt 提供了一套运行时配置 API，以在你的应用内暴露配置和密钥。",{"path":325,"title":326,"description":327},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fnightly-release-channel","Nightly 发布通道","nightly 发布通道允许使用直接从仓库最新提交构建的 Nuxt。",{"path":329,"title":330,"description":331},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fhooks","生命周期钩子","Nuxt 提供了一个强大的钩子系统，可使用钩子扩展几乎每个方面。",{"path":333,"title":334,"description":335},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fkit","Nuxt Kit","@nuxt\u002Fkit 提供了面向模块作者的功能。",{"path":337,"title":338,"description":339},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fnuxt-app","NuxtApp","在 Nuxt 中，你可以在组合式函数、组件和插件中访问运行时应用上下文。",{"path":341,"title":342,"description":343},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Flayers","编写 Nuxt Layers","Nuxt 提供了一个强大的系统，允许你扩展默认文件、配置等等。",{"path":345,"title":346,"description":347},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fbuilders","创建 Builder","了解 Nuxt builder 是如何工作的，以及如何编写你自己的 builder。",{"path":349,"title":350,"description":351},"\u002Fdocs\u002Fguide\u002Fgoing-further\u002Fdebugging","调试","在 Nuxt 中，你可以直接在浏览器中以及你的 IDE 里开始调试你的应用。",{"path":353,"title":354,"description":354},"\u002Fdocs\u002Fguide\u002Fgoing-further","",{"path":356,"title":357,"description":358},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fclient-only","\u003CClientOnly>","使用 \u003CClientOnly> 组件仅在客户端渲染组件。",{"path":360,"title":361,"description":362},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fdev-only","\u003CDevOnly>","使用 \u003CDevOnly> 组件仅在开发期间渲染组件。",{"path":364,"title":365,"description":366},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-client-fallback","\u003CNuxtClientFallback>","Nuxt 提供了 \u003CNuxtClientFallback> 组件，当其任意子组件在 SSR 中触发错误时，在客户端渲染其内容",{"path":368,"title":369,"description":370},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-picture","\u003CNuxtPicture>","Nuxt 提供了 \u003CNuxtPicture> 组件来处理自动图像优化。",{"path":372,"title":373,"description":374},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fteleports","\u003CTeleport>","\u003CTeleport> 组件将组件传送到 DOM 中的另一个位置。",{"path":376,"title":377,"description":378},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-route-announcer","\u003CNuxtRouteAnnouncer>","\u003CNuxtRouteAnnouncer> 组件添加一个带有页面标题的隐藏元素，用于向辅助技术播报路由变化。",{"path":380,"title":381,"description":382},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-time","\u003CNuxtTime>","\u003CNuxtTime> 组件以本地化友好的格式显示时间，并保持服务端-客户端一致。",{"path":384,"title":385,"description":386},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-announcer","\u003CNuxtAnnouncer>","\u003CNuxtAnnouncer> 组件添加一个隐藏元素，用于向辅助技术播报动态内容变化。",{"path":388,"title":389,"description":390},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-page","\u003CNuxtPage>","\u003CNuxtPage> 组件用于显示位于 pages\u002F 目录中的页面。",{"path":392,"title":393,"description":394},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-layout","\u003CNuxtLayout>","Nuxt 提供了 \u003CNuxtLayout> 组件，用于在页面和错误页面上显示布局。",{"path":396,"title":397,"description":398},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-link","\u003CNuxtLink>","Nuxt 提供了 \u003CNuxtLink> 组件来处理应用内的各类链接。",{"path":400,"title":401,"description":402},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-loading-indicator","\u003CNuxtLoadingIndicator>","在页面导航之间显示进度条。",{"path":404,"title":405,"description":406},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-error-boundary","\u003CNuxtErrorBoundary>","\u003CNuxtErrorBoundary> 组件处理其默认插槽中发生的客户端错误。",{"path":408,"title":409,"description":410},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-welcome","\u003CNuxtWelcome>","\u003CNuxtWelcome> 组件用于欢迎通过启动模板创建的新项目的用户。",{"path":412,"title":413,"description":414},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-island","\u003CNuxtIsland>","Nuxt 提供了 \u003CNuxtIsland> 组件，用于渲染无客户端 JS 的非交互式组件。",{"path":416,"title":417,"description":418},"\u002Fdocs\u002Fapi\u002Fcomponents\u002Fnuxt-img","\u003CNuxtImg>","Nuxt 提供了 \u003CNuxtImg> 组件来处理自动图像优化。",{"path":420,"title":421,"description":422},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fcreate-use-async-data","createUseAsyncData","一个工厂函数，用于创建带有预定义默认选项的自定义 useAsyncData 组合式函数。",{"path":424,"title":425,"description":426},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fcreate-use-fetch","createUseFetch","一个工厂函数，用于创建带有预定义默认选项的自定义 useFetch 组合式函数。",{"path":428,"title":429,"description":430},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fon-prehydrate","onPrehydrate","使用 onPrehydrate 在 Nuxt 对页面进行 hydration 之前的客户端立即运行回调。",{"path":432,"title":433,"description":434},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-announcer","useAnnouncer","一个用于向屏幕阅读器播报消息的组合式函数。",{"path":436,"title":437,"description":438},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-app-config","useAppConfig","访问在项目中定义的可响应 app config。",{"path":440,"title":441,"description":442},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-async-data","useAsyncData","useAsyncData 以 SSR 友好的方式提供对异步解析数据的访问。",{"path":444,"title":445,"description":446},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-cookie","useCookie","useCookie 是一个 SSR 友好的组合式函数，用于读写 cookie。",{"path":448,"title":449,"description":450},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-error","useError","useError 组合式函数返回正在被处理的全局 Nuxt 错误。",{"path":452,"title":453,"description":454},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-fetch","useFetch","使用 SSR 友好的组合式函数从 API 端点获取数据。",{"path":456,"title":457,"description":458},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head","useHead","useHead 用于自定义 Nuxt 应用各个页面的 head 属性。",{"path":460,"title":461,"description":462},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-head-safe","useHeadSafe","处理用户输入时提供 head 数据的推荐方式。",{"path":464,"title":465,"description":466},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-hydration","useHydration","允许完全控制 hydration 周期，以便从服务端设置和接收数据。",{"path":468,"title":469,"description":470},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-layout","useLayout","useLayout 返回为当前路由解析出的布局。",{"path":472,"title":473,"description":474},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-lazy-async-data","useLazyAsyncData","该组合式函数包装 useAsyncData，会在 handler 解析之前立即触发导航。",{"path":476,"title":477,"description":478},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-lazy-fetch","useLazyFetch","该组合式函数是对 useFetch 的封装，会在 handler 解析之前立即触发导航。",{"path":480,"title":481,"description":482},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-loading-indicator","useLoadingIndicator","该组合式函数让你访问应用页面的加载状态。",{"path":484,"title":485,"description":486},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-nuxt-app","useNuxtApp","访问 Nuxt 应用的共享运行时上下文。",{"path":488,"title":489,"description":490},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-nuxt-data","useNuxtData","访问数据获取组合式函数的当前缓存值。",{"path":492,"title":493,"description":494},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-preview-mode","usePreviewMode","使用 usePreviewMode 检查并控制 Nuxt 的预览模式",{"path":496,"title":497,"description":498},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-event","useRequestEvent","使用 useRequestEvent 组合式函数访问传入的请求事件。",{"path":500,"title":501,"description":502},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-fetch","useRequestFetch","使用 useRequestFetch 组合式函数为服务端 fetch 请求转发请求上下文和请求头。",{"path":504,"title":505,"description":506},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-header","useRequestHeader","使用 useRequestHeader 访问某个特定的传入请求头。",{"path":508,"title":509,"description":510},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-headers","useRequestHeaders","使用 useRequestHeaders 访问传入的请求头。",{"path":512,"title":513,"description":514},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-request-url","useRequestURL","使用 useRequestURL 组合式函数访问传入的请求 URL。",{"path":516,"title":517,"description":518},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-response-header","useResponseHeader","使用 useResponseHeader 设置服务端响应头。",{"path":520,"title":521,"description":522},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-route","useRoute","useRoute 组合式函数返回当前路由。",{"path":524,"title":525,"description":526},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-route-announcer","useRouteAnnouncer","该组合式函数监视页面标题变化，并相应地更新播报消息。",{"path":528,"title":529,"description":530},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-router","useRouter","useRouter 组合式函数返回 router 实例。",{"path":532,"title":533,"description":534},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-runtime-config","useRuntimeConfig","使用 useRuntimeConfig 组合式函数访问运行时配置变量。",{"path":536,"title":537,"description":538},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-runtime-hook","useRuntimeHook","在 Nuxt 应用中注册一个运行时钩子，并确保在作用域销毁时被正确清理。",{"path":540,"title":541,"description":542},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-seo-meta","useSeoMeta","useSeoMeta 组合式函数让你可以将站点的 SEO meta 标签定义为一个扁平对象，并提供完整的 TypeScript 支持。",{"path":544,"title":545,"description":546},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-server-seo-meta","useServerSeoMeta","useServerSeoMeta 组合式函数让你可以将站点的 SEO meta 标签定义为一个扁平对象，并提供完整的 TypeScript 支持。",{"path":548,"title":549,"description":550},"\u002Fdocs\u002Fapi\u002Fcomposables\u002Fuse-state","useState","useState 组合式函数创建一个可响应的、SSR 友好的共享状态。",{"path":552,"title":553,"description":554},"\u002Fdocs\u002Fapi\u002Futils\u002Fdollarfetch","$fetch","Nuxt 使用 ofetch 全局暴露了 $fetch 辅助函数，用于发起 HTTP 请求。",{"path":556,"title":557,"description":558},"\u002Fdocs\u002Fapi\u002Futils\u002Fabort-navigation","abortNavigation","abortNavigation 是一个辅助函数，用于阻止导航的发生，并在设置了参数时抛出错误。",{"path":560,"title":561,"description":562},"\u002Fdocs\u002Fapi\u002Futils\u002Fadd-route-middleware","addRouteMiddleware","addRouteMiddleware() 是一个在你的应用中动态添加中间件的辅助函数。",{"path":564,"title":565,"description":566},"\u002Fdocs\u002Fapi\u002Futils\u002Fcall-once","callOnce","在 SSR 或 CSR 期间只运行一次给定的函数或代码块。",{"path":568,"title":569,"description":570},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-error","clearError","clearError 组合式函数清除所有已处理的错误。",{"path":572,"title":573,"description":574},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-nuxt-data","clearNuxtData","删除 useAsyncData 和 useFetch 的缓存数据、错误状态和挂起的 promise。",{"path":576,"title":577,"description":578},"\u002Fdocs\u002Fapi\u002Futils\u002Fclear-nuxt-state","clearNuxtState","删除 useState 的缓存状态。",{"path":580,"title":581,"description":582},"\u002Fdocs\u002Fapi\u002Futils\u002Fcreate-error","createError","创建一个带有附加元数据的错误对象。",{"path":584,"title":585,"description":586},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-lazy-hydration-component","defineLazyHydrationComponent","使用特定策略定义一个懒加载 hydration 组件。",{"path":588,"title":589,"description":590},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-component","defineNuxtComponent","defineNuxtComponent() 是一个用于使用 Options API 定义类型安全组件的辅助函数。",{"path":592,"title":593,"description":594},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-plugin","defineNuxtPlugin","defineNuxtPlugin() 是一个用于创建 Nuxt 插件的辅助函数。",{"path":596,"title":597,"description":598},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-nuxt-route-middleware","defineNuxtRouteMiddleware","使用 defineNuxtRouteMiddleware 辅助函数创建命名路由中间件。",{"path":600,"title":601,"description":602},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-page-meta","definePageMeta","为你的页面组件定义元数据。",{"path":604,"title":605,"description":606},"\u002Fdocs\u002Fapi\u002Futils\u002Fdefine-route-rules","defineRouteRules","在页面层面定义用于混合渲染的路由规则。",{"path":608,"title":609,"description":610},"\u002Fdocs\u002Fapi\u002Futils\u002Fnavigate-to","navigateTo","navigateTo 是一个用于以编程方式导航用户的辅助函数。",{"path":612,"title":613,"description":614},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-before-route-leave","onBeforeRouteLeave","onBeforeRouteLeave 组合式函数允许在组件内部注册一个路由守卫。",{"path":616,"title":617,"description":618},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-before-route-update","onBeforeRouteUpdate","onBeforeRouteUpdate 组合式函数允许在组件内部注册一个路由守卫。",{"path":620,"title":621,"description":622},"\u002Fdocs\u002Fapi\u002Futils\u002Fon-nuxt-ready","onNuxtReady","onNuxtReady 组合式函数允许在你的应用完成初始化之后运行一个回调。",{"path":624,"title":625,"description":626},"\u002Fdocs\u002Fapi\u002Futils\u002Fprefetch-components","prefetchComponents","Nuxt 提供了用于在预取组件方面给予你控制的工具。",{"path":628,"title":629,"description":630},"\u002Fdocs\u002Fapi\u002Futils\u002Fpreload-components","preloadComponents","Nuxt 提供了用于在预加载组件方面给予你控制的工具。",{"path":632,"title":633,"description":634},"\u002Fdocs\u002Fapi\u002Futils\u002Fpreload-route-components","preloadRouteComponents","preloadRouteComponents 允许你手动预加载 Nuxt 应用中的单个页面。",{"path":636,"title":637,"description":638},"\u002Fdocs\u002Fapi\u002Futils\u002Fprerender-routes","prerenderRoutes","prerenderRoutes 向 Nitro 暗示预渲染一个额外的路由。",{"path":640,"title":641,"description":642},"\u002Fdocs\u002Fapi\u002Futils\u002Frefresh-cookie","refreshCookie","当 cookie 发生变化时，手动刷新 useCookie 的值",{"path":644,"title":645,"description":646},"\u002Fdocs\u002Fapi\u002Futils\u002Frefresh-nuxt-data","refreshNuxtData","刷新 Nuxt 中所有或特定的 asyncData 实例",{"path":648,"title":649,"description":650},"\u002Fdocs\u002Fapi\u002Futils\u002Freload-nuxt-app","reloadNuxtApp","reloadNuxtApp 会对页面执行一次硬刷新。",{"path":652,"title":653,"description":654},"\u002Fdocs\u002Fapi\u002Futils\u002Fset-page-layout","setPageLayout","setPageLayout 允许你动态更改页面的布局。",{"path":656,"title":657,"description":658},"\u002Fdocs\u002Fapi\u002Futils\u002Fset-response-status","setResponseStatus","setResponseStatus 设置响应的状态码（以及可选的 statusText）。",{"path":660,"title":661,"description":662},"\u002Fdocs\u002Fapi\u002Futils\u002Fshow-error","showError","Nuxt 提供了一种快速且简单的方式，在需要的时候显示全屏错误页。",{"path":664,"title":665,"description":666},"\u002Fdocs\u002Fapi\u002Futils\u002Fupdate-app-config","updateAppConfig","在运行时更新 App Config。",{"path":668,"title":669,"description":670},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fadd","nuxt add","在你的 Nuxt 应用中快速搭建一个实体（文件）。",{"path":672,"title":673,"description":674},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fanalyze","nuxt analyze","分析生产环境的打包产物或你的 Nuxt 应用。",{"path":676,"title":677,"description":678},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fbuild","nuxt build","构建你的 Nuxt 应用。",{"path":680,"title":681,"description":682},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fbuild-module","nuxt build-module","用于在发布前构建你的 Nuxt 模块的 Nuxt 命令。",{"path":684,"title":685,"description":686},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fcleanup","nuxt cleanup","移除常见的 Nuxt 生成文件和缓存。",{"path":688,"title":689,"description":690},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fdev","nuxt dev","dev 命令会在 http:\u002F\u002Flocalhost:3000 启动一个带有热模块替换（HMR）的开发服务器。",{"path":692,"title":693,"description":694},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fdevtools","nuxt devtools","devtools 命令允许你基于每个项目启用或禁用 Nuxt DevTools。",{"path":696,"title":697,"description":698},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fgenerate","nuxt generate","预渲染应用的每一个路由，并将结果存储为纯 HTML 文件。",{"path":700,"title":701,"description":702},"\u002Fdocs\u002Fapi\u002Fcommands\u002Finfo","nuxt info","info 命令会记录当前或指定 Nuxt 项目的相关信息。",{"path":704,"title":705,"description":706},"\u002Fdocs\u002Fapi\u002Fcommands\u002Finit","create nuxt","init 命令用于初始化一个全新的 Nuxt 项目。",{"path":708,"title":709,"description":710},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fmodule","nuxt module","通过命令行搜索并向你的 Nuxt 应用添加模块。",{"path":712,"title":713,"description":714},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fprepare","nuxt prepare","prepare 命令会在你的应用中创建一个 .nuxt 目录并生成类型。",{"path":716,"title":717,"description":718},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fpreview","nuxt preview","preview 命令会启动一个服务器，用于在运行 build 命令后预览你的应用。",{"path":720,"title":721,"description":722},"\u002Fdocs\u002Fapi\u002Fcommands\u002Ftest","nuxt test","test 命令使用 @nuxt\u002Ftest-utils 运行测试。",{"path":724,"title":725,"description":726},"\u002Fdocs\u002Fapi\u002Fcommands\u002Ftypecheck","nuxt typecheck","typecheck 命令运行 vue-tsc 来全量检查你的应用类型。",{"path":728,"title":729,"description":730},"\u002Fdocs\u002Fapi\u002Fcommands\u002Fupgrade","nuxt upgrade","upgrade 命令将 Nuxt 升级到最新版本。",{"path":732,"title":733,"description":734},"\u002Fdocs\u002Fapi\u002Fkit\u002Fmodules","Modules","Nuxt Kit 提供了一系列工具，帮助你创建和使用模块。你可以使用这些工具来创建自己的模块，或复用已有的模块。",{"path":736,"title":737,"description":738},"\u002Fdocs\u002Fapi\u002Fkit\u002Fruntime-config","Runtime Config","Nuxt Kit 提供了一系列工具，帮助你访问和修改 Nuxt 运行时配置。",{"path":740,"title":741,"description":742},"\u002Fdocs\u002Fapi\u002Fkit\u002Ftemplates","Templates","Nuxt Kit 提供了一系列工具，帮助你处理模板。这些函数允许你在开发和构建期间生成额外的文件。",{"path":744,"title":745,"description":746},"\u002Fdocs\u002Fapi\u002Fkit\u002Fapp-config","App Config","Nuxt Kit 提供了一系列工具，帮助你访问和修改 Nuxt 应用配置。",{"path":748,"title":749,"description":750},"\u002Fdocs\u002Fapi\u002Fkit\u002Fnitro","Nitro","Nuxt Kit 提供了一系列工具，帮助你使用 Nitro。这些函数允许你添加服务器处理器、插件和预渲染路由。",{"path":752,"title":753,"description":754},"\u002Fdocs\u002Fapi\u002Fkit\u002Fresolving","Resolving","Nuxt Kit 提供了从 Nuxt 根目录或自定义基准路径解析路径的实用工具。",{"path":756,"title":757,"description":758},"\u002Fdocs\u002Fapi\u002Fkit\u002Flogging","Logging","Nuxt Kit 提供了一系列工具，帮助你使用日志记录。这些函数允许你以额外功能记录消息。",{"path":760,"title":761,"description":762},"\u002Fdocs\u002Fapi\u002Fkit\u002Fbuilder","Builder","Nuxt Kit 提供了一系列工具，帮助你使用构建器。这些函数允许你扩展 Vite 和 webpack 配置。",{"path":764,"title":765,"description":766},"\u002Fdocs\u002Fapi\u002Fkit\u002Fexamples","Examples","Nuxt Kit 工具的使用示例。",{"path":768,"title":58,"description":769},"\u002Fdocs\u002Fapi\u002Fkit\u002Flayers","Nuxt Kit 提供了帮助你处理层及其目录结构的工具。",{"path":771,"title":772,"description":773},"\u002Fdocs\u002Fapi\u002Fkit\u002Fprogrammatic","Programmatic Usage","Nuxt Kit 提供了一系列工具，帮助你以编程方式使用 Nuxt。这些函数允许你加载 Nuxt、构建 Nuxt，以及加载 Nuxt 配置。",{"path":775,"title":776,"description":777},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcompatibility","Compatibility","Nuxt Kit 提供了一系列工具，帮助你检查模块与不同 Nuxt 版本的兼容性。",{"path":779,"title":780,"description":781},"\u002Fdocs\u002Fapi\u002Fkit\u002Fautoimports","Auto-imports","Nuxt Kit 提供了一系列工具，帮助你处理自动导入。这些函数允许你注册自己的 utils、composables 和 Vue API。",{"path":783,"title":784,"description":785},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcomponents","Components","Nuxt Kit 提供了一系列工具，帮助你处理组件。你可以全局或局部注册组件，也可以添加要被扫描的目录。",{"path":787,"title":788,"description":789},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcontext","Context","Nuxt Kit 提供了一系列工具，帮助你处理上下文。",{"path":791,"title":792,"description":793},"\u002Fdocs\u002Fapi\u002Fkit\u002Fpages","Pages","Nuxt Kit 提供了一系列工具，帮助你创建和使用页面。你可以使用这些工具来操作页面配置或定义路由规则。",{"path":795,"title":796,"description":797},"\u002Fdocs\u002Fapi\u002Fkit\u002Flayout","Layout","Nuxt Kit 提供了一系列工具，帮助你处理布局。",{"path":799,"title":800,"description":801},"\u002Fdocs\u002Fapi\u002Fkit\u002Fhead","Head","Nuxt Kit 提供了一系列工具，帮助你在模块中管理 head 配置。",{"path":803,"title":804,"description":805},"\u002Fdocs\u002Fapi\u002Fkit\u002Fplugins","Plugins","Nuxt Kit 提供了一系列工具，帮助你创建和使用插件。你可以使用这些函数向你的模块添加插件或插件模板。",{"path":807,"title":330,"description":808},"\u002Fdocs\u002Fapi\u002Fadvanced\u002Fhooks","Nuxt 提供了一套强大的钩子系统，可以通过钩子扩展几乎各个方面。",{"path":810,"title":811,"description":812},"\u002Fdocs\u002Fapi\u002Fadvanced\u002Fimport-meta","Import meta","使用 `import.meta` 了解你的代码运行在何处。",{"path":814,"title":815,"description":816},"\u002Fdocs\u002Fapi\u002Fnuxt-config","Nuxt 配置","发现你可以在 nuxt.config.ts 文件中使用的所有选项。",{"path":818,"title":819,"description":820},"\u002Fdocs\u002Fapi","Nuxt API 参考","探索所有 Nuxt 内部机制：组件、组合式函数、工具函数、命令等等。",{"path":822,"title":823,"description":824},"\u002Fdocs\u002Fcommunity\u002Fgetting-help","获取帮助","我们是一个友好的开发者社区，很乐意提供帮助。",{"path":826,"title":827,"description":828},"\u002Fdocs\u002Fcommunity\u002Freporting-bugs","报告 Bug","开源中最有价值的角色之一，就是花时间把 bug 报告得清楚明白。",{"path":830,"title":831,"description":832},"\u002Fdocs\u002Fcommunity\u002Fcontribution","贡献","Nuxt 是一个社区项目——因此我们欢迎各种形式的贡献！❤️",{"path":834,"title":835,"description":836},"\u002Fdocs\u002Fcommunity\u002Fframework-contribution","框架贡献","关于向框架仓库贡献的一些具体要点。",{"path":838,"title":839,"description":840},"\u002Fdocs\u002Fcommunity\u002Froadmap","路线图","Nuxt 在不断发展，新功能和模块一直在增加。",{"path":842,"title":843,"description":844},"\u002Fdocs\u002Fcommunity\u002Fchangelog","发布","发现 Nuxt 及 Nuxt 官方模块的最新发布。",{"path":846,"title":847,"description":848},"\u002Fdocs\u002Fbridge\u002Foverview","概述","缩小与 Nuxt 3 的差异，并减轻迁移到 Nuxt 3 的负担。",{"path":850,"title":14,"description":851},"\u002Fdocs\u002Fbridge\u002Fconfiguration","了解如何根据你的需求配置 Nuxt Bridge。",{"path":853,"title":222,"description":854},"\u002Fdocs\u002Fbridge\u002Ftypescript","了解如何在 Nuxt Bridge 中使用 TypeScript。",{"path":856,"title":857,"description":858},"\u002Fdocs\u002Fbridge\u002Fbridge-composition-api","旧版 Composition API","了解如何使用 Nuxt Bridge 迁移到 Composition API。",{"path":860,"title":861,"description":862},"\u002Fdocs\u002Fbridge\u002Fplugins-and-middleware","插件和中间件","了解如何从 Nuxt 2 迁移到 Nuxt Bridge 的新插件和中间件。",{"path":864,"title":865,"description":866},"\u002Fdocs\u002Fbridge\u002Fnuxt3-compatible-api","新的 Composition API","Nuxt Bridge 实现了与 Nuxt 3 兼容的组合式函数。",{"path":868,"title":869,"description":870},"\u002Fdocs\u002Fbridge\u002Fmeta","Meta 标签","了解如何从 Nuxt 2 迁移到 Nuxt Bridge 的新 meta 标签。",{"path":872,"title":322,"description":873},"\u002Fdocs\u002Fbridge\u002Fruntime-config","Nuxt 提供了一个运行时配置 API，用于在应用中暴露配置和密钥。",{"path":875,"title":749,"description":876},"\u002Fdocs\u002Fbridge\u002Fnitro","通过 Nuxt Bridge 为你的 Nuxt 2 应用激活 Nitro。",{"path":878,"title":879,"description":880},"\u002Fdocs\u002Fbridge\u002Fvite","Vite","通过 Nuxt Bridge 为你的 Nuxt 2 应用激活 Vite。",{"path":882,"title":847,"description":883},"\u002Fdocs\u002Fmigration\u002Foverview","Nuxt 3 是对 Nuxt 2 的完整重写，并且基于一套全新的底层技术。",{"path":885,"title":886,"description":887},"\u002Fdocs\u002Fmigration\u002Fbundling","构建工具","了解如何从 Nuxt 2 迁移到 Nuxt 3 的构建工具。",{"path":889,"title":890,"description":891},"\u002Fdocs\u002Fmigration\u002Fserver","服务器","了解如何从 Nuxt 2 迁移到 Nuxt 3 的服务器。",{"path":893,"title":14,"description":894},"\u002Fdocs\u002Fmigration\u002Fconfiguration","了解如何从 Nuxt 2 迁移到 Nuxt 3 的新配置。",{"path":896,"title":214,"description":897},"\u002Fdocs\u002Fmigration\u002Fmodule-authors","了解如何从 Nuxt 2 迁移到 Nuxt 3 模块。",{"path":899,"title":206,"description":900},"\u002Fdocs\u002Fmigration\u002Fauto-imports","Nuxt 3 采用最小摩擦的方式，即在任何可能的地方自动导入组件和组合式函数。",{"path":902,"title":869,"description":903},"\u002Fdocs\u002Fmigration\u002Fmeta","管理你的 meta 标签，从 Nuxt 2 到 Nuxt 3。",{"path":905,"title":861,"description":906},"\u002Fdocs\u002Fmigration\u002Fplugins-and-middleware","了解如何从 Nuxt 2 迁移到 Nuxt 3 的插件和中间件。",{"path":908,"title":909,"description":910},"\u002Fdocs\u002Fmigration\u002Fpages-and-layouts","页面和布局","了解如何从 Nuxt 2 迁移到 Nuxt 3 的页面和布局。",{"path":912,"title":913,"description":914},"\u002Fdocs\u002Fmigration\u002Fcomponent-options","组件选项","了解如何从 Nuxt 2 的组件选项迁移到 Nuxt 3 的组合式函数。",{"path":916,"title":322,"description":917},"\u002Fdocs\u002Fmigration\u002Fruntime-config","了解如何从 Nuxt 2 迁移到 Nuxt 3 的运行时配置。",{"path":919,"title":920,"description":921},"\u002Fdocs\u002Freadme","Nuxt 文档","本仓库包含 Nuxt 的文档，托管于 https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fgetting-started\u002Fintroduction",{"path":923,"title":924,"description":925},"\u002Fdocs\u002Ferrors\u002Fb5001","NUXT_B5001","缺少 compatibilityDate (兼容性日期)",{"path":927,"title":928,"description":929},"\u002Fdocs\u002Ferrors\u002Fb5003","NUXT_B5003","保留的 runtimeConfig.app 命名空间",{"path":931,"title":932,"description":933},"\u002Fdocs\u002Ferrors\u002Fb5004","NUXT_B5004","不支持外部配置文件",{"path":935,"title":936,"description":937},"\u002Fdocs\u002Ferrors\u002Fe1001","NUXT_E1001","在 Nuxt 上下文之外调用了组合式函数。",{"path":939,"title":940,"description":941},"\u002Fdocs\u002Ferrors\u002Fe1006","NUXT_E1006","onPrehydrate 未被构建流水线处理。",{"path":943,"title":944,"description":945},"\u002Fdocs\u002Ferrors\u002Fe1007","NUXT_E1007","编译期提示辅助函数在运行时被调用。",{"path":947,"title":948,"description":949},"\u002Fdocs\u002Ferrors\u002Fe2001","NUXT_E2001","外部导航未设置 external: true。",{"path":951,"title":952,"description":953},"\u002Fdocs\u002Ferrors\u002Fe2002","NUXT_E2002","使用了危险协议的导航。",{"path":955,"title":956,"description":957},"\u002Fdocs\u002Ferrors\u002Fe2003","NUXT_E2003","abortNavigation() 在中间件之外被调用。",{"path":959,"title":960,"description":961},"\u002Fdocs\u002Ferrors\u002Fe2004","NUXT_E2004","未知的路由中间件。",{"path":963,"title":964,"description":965},"\u002Fdocs\u002Ferrors\u002Fe2005","NUXT_E2005","在中间件内调用了 useRoute。",{"path":967,"title":968,"description":969},"\u002Fdocs\u002Ferrors\u002Fe2007","NUXT_E2007","在组件中于服务端调用了 setPageLayout。",{"path":971,"title":972,"description":973},"\u002Fdocs\u002Ferrors\u002Fe3001","NUXT_E3001","useFetch 的请求 URL 以 \"\u002F\u002F\" 开头。",{"path":975,"title":976,"description":977},"\u002Fdocs\u002Ferrors\u002Fe3008","NUXT_E3008","useAsyncData 的 key 必须是非空字符串。",{"path":979,"title":980,"description":981},"\u002Fdocs\u002Ferrors\u002Fe3009","NUXT_E3009","useAsyncData 的处理函数必须是一个函数。",{"path":983,"title":984,"description":985},"\u002Fdocs\u002Ferrors\u002Fe4012","NUXT_E4012","无法解析 island（岛）响应。",{"path":987,"title":988,"description":989},"\u002Fdocs\u002Ferrors\u002Fe4016","NUXT_E4016","嵌套页面无法显示，因为其父页面没有渲染 \u003CNuxtPage \u002F>。",{"path":991,"title":992,"description":993},"\u002Fdocs\u002Ferrors\u002Fe5001","NUXT_E5001","应用清单（app manifest）未启用。",{"path":995,"title":996,"description":997},"\u002Fdocs\u002Ferrors\u002Fe6001","NUXT_E6001","缺少 Unhead 实例。",{"path":999,"title":1000,"description":1001},"\u002Fdocs\u002Ferrors\u002Fe7001","NUXT_E7001","Payload URL 包含主机名。",{"path":1003,"title":1004,"description":1005},"\u002Fdocs\u002Ferrors\u002Fe7007","NUXT_E7007","useState 的初始化值必须是一个函数。",{"path":1007,"title":1008,"description":1009},"\u002Fdocs\u002Ferrors\u002Fe7008","NUXT_E7008","callOnce 的 fn 必须是一个函数。",{"path":1011,"title":1012,"description":1013},"\u002Fdocs\u002Ferrors\u002Fe7009","NUXT_E7009","useState 的 key 必须是一个字符串。",{"path":1015,"title":1016,"description":1017},"\u002Fdocs\u002Ferrors\u002Fe7010","NUXT_E7010","callOnce 的 key 必须是一个字符串。",{"id":1019,"title":90,"body":1020,"description":91,"extension":5083,"meta":5084,"navigation":5087,"path":89,"seo":5088,"stem":5089,"__hash__":5090},"docs\u002Fdocs\u002F2.directory-structure\u002F1.app\u002F1.components.md",{"type":1021,"value":1022,"toc":5059},"minimark",[1023,1027,1074,1157,1161,1164,1206,1209,1223,1237,1248,1295,1298,1312,1323,1426,1440,1443,1488,1491,1646,1655,5055],[1024,1025,1026],"p",{},"Nuxt 会自动导入此目录中的任何组件（以及你使用的任何模块注册的组件）。",[1028,1029,1034],"pre",{"className":1030,"code":1031,"filename":1032,"language":1033,"meta":354,"style":354},"language-bash shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","-| components\u002F\n---| AppHeader.vue\n---| AppFooter.vue\n","Directory Structure","bash",[1035,1036,1037,1053,1064],"code",{"__ignoreMap":354},[1038,1039,1042,1046,1050],"span",{"class":1040,"line":1041},"line",1,[1038,1043,1045],{"class":1044},"sJK67","-",[1038,1047,1049],{"class":1048},"sXPRQ","|",[1038,1051,1052],{"class":1044}," components\u002F\n",[1038,1054,1056,1059,1061],{"class":1040,"line":1055},2,[1038,1057,1058],{"class":1044},"---",[1038,1060,1049],{"class":1048},[1038,1062,1063],{"class":1044}," AppHeader.vue\n",[1038,1065,1067,1069,1071],{"class":1040,"line":1066},3,[1038,1068,1058],{"class":1044},[1038,1070,1049],{"class":1048},[1038,1072,1073],{"class":1044}," AppFooter.vue\n",[1028,1075,1080],{"className":1076,"code":1077,"filename":1078,"language":1079,"meta":354,"style":354},"language-html shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv>\n    \u003CAppHeader \u002F>\n    \u003CNuxtPage \u002F>\n    \u003CAppFooter \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","app\u002Fapp.vue","html",[1035,1081,1082,1095,1105,1117,1127,1137,1147],{"__ignoreMap":354},[1038,1083,1084,1088,1092],{"class":1040,"line":1041},[1038,1085,1087],{"class":1086},"sF54B","\u003C",[1038,1089,1091],{"class":1090},"s6g6u","template",[1038,1093,1094],{"class":1086},">\n",[1038,1096,1097,1100,1103],{"class":1040,"line":1055},[1038,1098,1099],{"class":1086},"  \u003C",[1038,1101,1102],{"class":1090},"div",[1038,1104,1094],{"class":1086},[1038,1106,1107,1110,1114],{"class":1040,"line":1066},[1038,1108,1109],{"class":1086},"    \u003C",[1038,1111,1113],{"class":1112},"se1bN","AppHeader",[1038,1115,1116],{"class":1086}," \u002F>\n",[1038,1118,1120,1122,1125],{"class":1040,"line":1119},4,[1038,1121,1109],{"class":1086},[1038,1123,1124],{"class":1112},"NuxtPage",[1038,1126,1116],{"class":1086},[1038,1128,1130,1132,1135],{"class":1040,"line":1129},5,[1038,1131,1109],{"class":1086},[1038,1133,1134],{"class":1112},"AppFooter",[1038,1136,1116],{"class":1086},[1038,1138,1140,1143,1145],{"class":1040,"line":1139},6,[1038,1141,1142],{"class":1086},"  \u003C\u002F",[1038,1144,1102],{"class":1090},[1038,1146,1094],{"class":1086},[1038,1148,1150,1153,1155],{"class":1040,"line":1149},7,[1038,1151,1152],{"class":1086},"\u003C\u002F",[1038,1154,1091],{"class":1090},[1038,1156,1094],{"class":1086},[1158,1159,1160],"h2",{"id":1160},"组件名称",[1024,1162,1163],{},"如果你的组件位于嵌套目录中，例如：",[1028,1165,1167],{"className":1030,"code":1166,"filename":1032,"language":1033,"meta":354,"style":354},"-| components\u002F\n---| base\u002F\n-----| foo\u002F\n-------| Button.vue\n",[1035,1168,1169,1177,1186,1196],{"__ignoreMap":354},[1038,1170,1171,1173,1175],{"class":1040,"line":1041},[1038,1172,1045],{"class":1044},[1038,1174,1049],{"class":1048},[1038,1176,1052],{"class":1044},[1038,1178,1179,1181,1183],{"class":1040,"line":1055},[1038,1180,1058],{"class":1044},[1038,1182,1049],{"class":1048},[1038,1184,1185],{"class":1044}," base\u002F\n",[1038,1187,1188,1191,1193],{"class":1040,"line":1066},[1038,1189,1190],{"class":1044},"-----",[1038,1192,1049],{"class":1048},[1038,1194,1195],{"class":1044}," foo\u002F\n",[1038,1197,1198,1201,1203],{"class":1040,"line":1119},[1038,1199,1200],{"class":1044},"-------",[1038,1202,1049],{"class":1048},[1038,1204,1205],{"class":1044}," Button.vue\n",[1024,1207,1208],{},"...那么组件的名称将基于它自身的路径目录和文件名，并去掉重复部分。因此，组件的名称将是：",[1028,1210,1212],{"className":1076,"code":1211,"language":1079,"meta":354,"style":354},"\u003CBaseFooButton \u002F>\n",[1035,1213,1214],{"__ignoreMap":354},[1038,1215,1216,1218,1221],{"class":1040,"line":1041},[1038,1217,1087],{"class":1086},[1038,1219,1220],{"class":1112},"BaseFooButton",[1038,1222,1116],{"class":1086},[1224,1225,1226],"note",{},[1024,1227,1228,1229,1232,1233,1236],{},"为了清晰起见，我们建议组件的文件名与其名称匹配。所以在上面的示例中，你可以将 ",[1035,1230,1231],{},"Button.vue"," 重命名为 ",[1035,1234,1235],{},"BaseFooButton.vue","。",[1024,1238,1239,1240,1243,1244,1247],{},"如果你想在不影响组件名称的情况下将组件分组到目录中，可以使用括号 ",[1035,1241,1242],{},"("," ",[1035,1245,1246],{},")"," 来命名分组目录。",[1028,1249,1252],{"className":1030,"code":1250,"filename":1251,"language":1033,"meta":354,"style":354},"-| components\u002F\n---| base\u002F\n-----| (foo)\u002F\n-------| Button.vue\n","Grouping Directory",[1035,1253,1254,1262,1270,1287],{"__ignoreMap":354},[1038,1255,1256,1258,1260],{"class":1040,"line":1041},[1038,1257,1045],{"class":1044},[1038,1259,1049],{"class":1048},[1038,1261,1052],{"class":1044},[1038,1263,1264,1266,1268],{"class":1040,"line":1055},[1038,1265,1058],{"class":1044},[1038,1267,1049],{"class":1048},[1038,1269,1185],{"class":1044},[1038,1271,1272,1274,1276,1279,1282,1284],{"class":1040,"line":1066},[1038,1273,1190],{"class":1044},[1038,1275,1049],{"class":1048},[1038,1277,1278],{"class":1086}," (",[1038,1280,1281],{"class":1044},"foo",[1038,1283,1246],{"class":1086},[1038,1285,1286],{"class":1044},"\u002F\n",[1038,1288,1289,1291,1293],{"class":1040,"line":1119},[1038,1290,1200],{"class":1044},[1038,1292,1049],{"class":1048},[1038,1294,1205],{"class":1044},[1024,1296,1297],{},"...那么组件名称会跳过分组目录，结果为：",[1028,1299,1301],{"className":1076,"code":1300,"language":1079,"meta":354,"style":354},"\u003CBaseButton \u002F>\n",[1035,1302,1303],{"__ignoreMap":354},[1038,1304,1305,1307,1310],{"class":1040,"line":1041},[1038,1306,1087],{"class":1086},[1038,1308,1309],{"class":1112},"BaseButton",[1038,1311,1116],{"class":1086},[1024,1313,1314,1315,1318,1319,1322],{},"如果你希望仅基于名称（而非路径）自动导入组件，则需要使用配置对象的扩展形式，将 ",[1035,1316,1317],{},"pathPrefix"," 选项设为 ",[1035,1320,1321],{},"false","：",[1028,1324,1329],{"className":1325,"code":1326,"filename":174,"language":1327,"meta":1328,"style":354},"language-ts shiki shiki-themes material-theme-lighter github-dark material-theme-palenight has-diff","export default defineNuxtConfig({\n  components: [\n    {\n      path: '~\u002Fcomponents',\n      pathPrefix: false, \u002F\u002F [!code ++]\n    },\n  ],\n})\n","ts","twoslash",[1035,1330,1331,1350,1362,1367,1388,1405,1410,1417],{"__ignoreMap":354},[1038,1332,1333,1337,1340,1344,1347],{"class":1040,"line":1041},[1038,1334,1336],{"class":1335},"szyBz","export",[1038,1338,1339],{"class":1335}," default",[1038,1341,1343],{"class":1342},"srJn9"," defineNuxtConfig",[1038,1345,1242],{"class":1346},"smVNa",[1038,1348,1349],{"class":1086},"{\n",[1038,1351,1352,1356,1359],{"class":1040,"line":1055},[1038,1353,1355],{"class":1354},"sOtFm","  components",[1038,1357,1358],{"class":1086},":",[1038,1360,1361],{"class":1346}," [\n",[1038,1363,1364],{"class":1040,"line":1066},[1038,1365,1366],{"class":1086},"    {\n",[1038,1368,1369,1372,1374,1378,1382,1385],{"class":1040,"line":1119},[1038,1370,1371],{"class":1354},"      path",[1038,1373,1358],{"class":1086},[1038,1375,1377],{"class":1376},"s0jeK"," '",[1038,1379,1381],{"class":1380},"s-Aze","~\u002Fcomponents",[1038,1383,1384],{"class":1376},"'",[1038,1386,1387],{"class":1086},",\n",[1038,1389,1393,1396,1398,1402],{"class":1390,"line":1129},[1040,1391,1392],"diff","add",[1038,1394,1395],{"class":1354},"      pathPrefix",[1038,1397,1358],{"class":1086},[1038,1399,1401],{"class":1400},"si1Qm"," false",[1038,1403,1404],{"class":1086},",",[1038,1406,1407],{"class":1040,"line":1139},[1038,1408,1409],{"class":1086},"    },\n",[1038,1411,1412,1415],{"class":1040,"line":1149},[1038,1413,1414],{"class":1346},"  ]",[1038,1416,1387],{"class":1086},[1038,1418,1420,1423],{"class":1040,"line":1419},8,[1038,1421,1422],{"class":1086},"}",[1038,1424,1425],{"class":1346},")\n",[1024,1427,1428,1429,1432,1433,1436,1437,1236],{},"这会使用与 Nuxt 2 中相同的策略注册组件。例如，",[1035,1430,1431],{},"~\u002Fcomponents\u002FSome\u002FMyComponent.vue"," 将可用作 ",[1035,1434,1435],{},"\u003CMyComponent>","，而不是 ",[1035,1438,1439],{},"\u003CSomeMyComponent>",[1158,1441,1442],{"id":1442},"动态组件",[1024,1444,1445,1446,1476,1477,1480,1481,1484,1485,1487],{},"如果你想使用 Vue 的 ",[1035,1447,1450,1452,1455,1458,1462,1465,1468,1471,1473],{"className":1448,"language":1449,"style":354},"language-vue shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","vue",[1038,1451,1087],{"class":1086},[1038,1453,1454],{"class":1090},"component",[1038,1456,1457],{"class":1086}," :",[1038,1459,1461],{"class":1460},"sXjFp","is",[1038,1463,1464],{"class":1086},"=",[1038,1466,1467],{"class":1376},"\"",[1038,1469,1470],{"class":1346},"someComputedComponent",[1038,1472,1467],{"class":1376},[1038,1474,1475],{"class":1086},">"," 语法，你需要使用 Vue 提供的 ",[1035,1478,1479],{},"resolveComponent"," 辅助函数，或者从 ",[1035,1482,1483],{},"#components"," 直接导入该组件并传入 ",[1035,1486,1461],{}," prop。",[1024,1489,1490],{},"例如：",[1028,1492,1495],{"className":1448,"code":1493,"filename":1494,"language":1449,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nimport { SomeComponent } from '#components'\n\nconst MyButton = resolveComponent('MyButton')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ccomponent :is=\"clickable ? MyButton : 'div'\" \u002F>\n  \u003Ccomponent :is=\"SomeComponent\" \u002F>\n\u003C\u002Ftemplate>\n","app\u002Fpages\u002Findex.vue",[1035,1496,1497,1520,1544,1550,1577,1585,1589,1597,1617,1637],{"__ignoreMap":354},[1038,1498,1499,1501,1504,1507,1510,1512,1514,1516,1518],{"class":1040,"line":1041},[1038,1500,1087],{"class":1086},[1038,1502,1503],{"class":1090},"script",[1038,1505,1506],{"class":1460}," setup",[1038,1508,1509],{"class":1460}," lang",[1038,1511,1464],{"class":1086},[1038,1513,1467],{"class":1376},[1038,1515,1327],{"class":1380},[1038,1517,1467],{"class":1376},[1038,1519,1094],{"class":1086},[1038,1521,1522,1525,1528,1531,1534,1537,1539,1541],{"class":1040,"line":1055},[1038,1523,1524],{"class":1335},"import",[1038,1526,1527],{"class":1086}," {",[1038,1529,1530],{"class":1346}," SomeComponent",[1038,1532,1533],{"class":1086}," }",[1038,1535,1536],{"class":1335}," from",[1038,1538,1377],{"class":1376},[1038,1540,1483],{"class":1380},[1038,1542,1543],{"class":1376},"'\n",[1038,1545,1546],{"class":1040,"line":1066},[1038,1547,1549],{"emptyLinePlaceholder":1548},true,"\n",[1038,1551,1552,1556,1560,1563,1566,1568,1570,1573,1575],{"class":1040,"line":1119},[1038,1553,1555],{"class":1554},"sV7Px","const",[1038,1557,1559],{"class":1558},"sJTDI"," MyButton",[1038,1561,1562],{"class":1048}," =",[1038,1564,1565],{"class":1342}," resolveComponent",[1038,1567,1242],{"class":1346},[1038,1569,1384],{"class":1376},[1038,1571,1572],{"class":1380},"MyButton",[1038,1574,1384],{"class":1376},[1038,1576,1425],{"class":1346},[1038,1578,1579,1581,1583],{"class":1040,"line":1129},[1038,1580,1152],{"class":1086},[1038,1582,1503],{"class":1090},[1038,1584,1094],{"class":1086},[1038,1586,1587],{"class":1040,"line":1139},[1038,1588,1549],{"emptyLinePlaceholder":1548},[1038,1590,1591,1593,1595],{"class":1040,"line":1149},[1038,1592,1087],{"class":1086},[1038,1594,1091],{"class":1090},[1038,1596,1094],{"class":1086},[1038,1598,1599,1601,1603,1606,1608,1610,1613,1615],{"class":1040,"line":1419},[1038,1600,1099],{"class":1086},[1038,1602,1454],{"class":1090},[1038,1604,1605],{"class":1460}," :is",[1038,1607,1464],{"class":1086},[1038,1609,1467],{"class":1376},[1038,1611,1612],{"class":1380},"clickable ? MyButton : 'div'",[1038,1614,1467],{"class":1376},[1038,1616,1116],{"class":1086},[1038,1618,1620,1622,1624,1626,1628,1630,1633,1635],{"class":1040,"line":1619},9,[1038,1621,1099],{"class":1086},[1038,1623,1454],{"class":1090},[1038,1625,1605],{"class":1460},[1038,1627,1464],{"class":1086},[1038,1629,1467],{"class":1376},[1038,1631,1632],{"class":1380},"SomeComponent",[1038,1634,1467],{"class":1376},[1038,1636,1116],{"class":1086},[1038,1638,1640,1642,1644],{"class":1040,"line":1639},10,[1038,1641,1152],{"class":1086},[1038,1643,1091],{"class":1090},[1038,1645,1094],{"class":1086},[1647,1648,1649],"important",{},[1024,1650,1651,1652,1654],{},"如果你使用 ",[1035,1653,1479],{}," 来处理动态组件，请确保只插入组件的名称，它必须是一个字面量字符串，不能是或包含变量。该字符串会在编译阶段被静态分析。",[1656,1657,1660,1663,1698,1709,1717,1720,1727,1733,1921,1925,1928,1931,1934,1938,1941,1950,1963,1969,1972,2021,2032,2047,2052,2055,2058,2106,2117,2122,2125,2182,2197,2208,2213,2216,2273,2284,2289,2292,2349,2354,2357,2504,2508,2511,2559,2562,2569,2705,2708,2711,2774,2777,2783,3009,3012,3018,3191,3196,3210,3301,3313,3317,3331,3521,3524,3537,3619,3622,3629,3650,3702,3710,3727],"video-accordion",{"title":1658,"video-id":1659},"观看 Daniel Roe 关于 resolveComponent() 的短视频","4kq8E5IUM2U",[1024,1661,1662],{},"或者，虽然不推荐，但你也可以全局注册所有组件，这会为所有组件创建异步 chunk，并使它们在你的整个应用中可用。",[1028,1664,1667],{"className":1665,"code":1666,"language":1391,"meta":354,"style":354},"language-diff shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","  export default defineNuxtConfig({\n    components: {\n+     global: true,\n+     dirs: ['~\u002Fcomponents']\n    },\n  })\n",[1035,1668,1669,1674,1679,1684,1689,1693],{"__ignoreMap":354},[1038,1670,1671],{"class":1040,"line":1041},[1038,1672,1673],{},"  export default defineNuxtConfig({\n",[1038,1675,1676],{"class":1040,"line":1055},[1038,1677,1678],{},"    components: {\n",[1038,1680,1681],{"class":1040,"line":1066},[1038,1682,1683],{},"+     global: true,\n",[1038,1685,1686],{"class":1040,"line":1119},[1038,1687,1688],{},"+     dirs: ['~\u002Fcomponents']\n",[1038,1690,1691],{"class":1040,"line":1129},[1038,1692,1409],{},[1038,1694,1695],{"class":1040,"line":1139},[1038,1696,1697],{},"  })\n",[1024,1699,1700,1701,1704,1705,1708],{},"你也可以通过将组件放在 ",[1035,1702,1703],{},"~\u002Fcomponents\u002Fglobal"," 目录中，或在文件名中使用 ",[1035,1706,1707],{},".global.vue"," 后缀，有选择地将某些组件注册为全局。如上所述，每个全局组件会被渲染在单独的 chunk 中，因此注意不要过度使用此特性。",[1224,1710,1711],{},[1024,1712,1713,1716],{},[1035,1714,1715],{},"global"," 选项也可以按组件目录设置。",[1158,1718,1719],{"id":1719},"动态导入",[1024,1721,1722,1723,1726],{},"要动态导入一个组件（也称为懒加载组件），你只需在组件名称前加上 ",[1035,1724,1725],{},"Lazy"," 前缀。这在组件并非总是需要时特别有用。",[1024,1728,1729,1730,1732],{},"通过使用 ",[1035,1731,1725],{}," 前缀，你可以将组件代码的加载推迟到合适的时机，这有助于优化你的 JavaScript 包体积。",[1028,1734,1736],{"className":1448,"code":1735,"filename":1494,"language":1449,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst show = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Mountains\u003C\u002Fh1>\n    \u003CLazyMountainsList v-if=\"show\" \u002F>\n    \u003Cbutton\n      v-if=\"!show\"\n      @click=\"show = true\"\n    >\n      Show List\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1035,1737,1738,1758,1776,1784,1788,1796,1804,1822,1843,1850,1865,1880,1886,1892,1903,1912],{"__ignoreMap":354},[1038,1739,1740,1742,1744,1746,1748,1750,1752,1754,1756],{"class":1040,"line":1041},[1038,1741,1087],{"class":1086},[1038,1743,1503],{"class":1090},[1038,1745,1506],{"class":1460},[1038,1747,1509],{"class":1460},[1038,1749,1464],{"class":1086},[1038,1751,1467],{"class":1376},[1038,1753,1327],{"class":1380},[1038,1755,1467],{"class":1376},[1038,1757,1094],{"class":1086},[1038,1759,1760,1762,1765,1767,1770,1772,1774],{"class":1040,"line":1055},[1038,1761,1555],{"class":1554},[1038,1763,1764],{"class":1558}," show",[1038,1766,1562],{"class":1048},[1038,1768,1769],{"class":1342}," ref",[1038,1771,1242],{"class":1346},[1038,1773,1321],{"class":1400},[1038,1775,1425],{"class":1346},[1038,1777,1778,1780,1782],{"class":1040,"line":1066},[1038,1779,1152],{"class":1086},[1038,1781,1503],{"class":1090},[1038,1783,1094],{"class":1086},[1038,1785,1786],{"class":1040,"line":1119},[1038,1787,1549],{"emptyLinePlaceholder":1548},[1038,1789,1790,1792,1794],{"class":1040,"line":1129},[1038,1791,1087],{"class":1086},[1038,1793,1091],{"class":1090},[1038,1795,1094],{"class":1086},[1038,1797,1798,1800,1802],{"class":1040,"line":1139},[1038,1799,1099],{"class":1086},[1038,1801,1102],{"class":1090},[1038,1803,1094],{"class":1086},[1038,1805,1806,1808,1811,1813,1816,1818,1820],{"class":1040,"line":1149},[1038,1807,1109],{"class":1086},[1038,1809,1810],{"class":1090},"h1",[1038,1812,1475],{"class":1086},[1038,1814,1815],{"class":1346},"Mountains",[1038,1817,1152],{"class":1086},[1038,1819,1810],{"class":1090},[1038,1821,1094],{"class":1086},[1038,1823,1824,1826,1829,1832,1834,1836,1839,1841],{"class":1040,"line":1419},[1038,1825,1109],{"class":1086},[1038,1827,1828],{"class":1090},"LazyMountainsList",[1038,1830,1831],{"class":1460}," v-if",[1038,1833,1464],{"class":1086},[1038,1835,1467],{"class":1376},[1038,1837,1838],{"class":1380},"show",[1038,1840,1467],{"class":1376},[1038,1842,1116],{"class":1086},[1038,1844,1845,1847],{"class":1040,"line":1619},[1038,1846,1109],{"class":1086},[1038,1848,1849],{"class":1090},"button\n",[1038,1851,1852,1855,1857,1859,1862],{"class":1040,"line":1639},[1038,1853,1854],{"class":1460},"      v-if",[1038,1856,1464],{"class":1086},[1038,1858,1467],{"class":1376},[1038,1860,1861],{"class":1380},"!show",[1038,1863,1864],{"class":1376},"\"\n",[1038,1866,1868,1871,1873,1875,1878],{"class":1040,"line":1867},11,[1038,1869,1870],{"class":1460},"      @click",[1038,1872,1464],{"class":1086},[1038,1874,1467],{"class":1376},[1038,1876,1877],{"class":1380},"show = true",[1038,1879,1864],{"class":1376},[1038,1881,1883],{"class":1040,"line":1882},12,[1038,1884,1885],{"class":1086},"    >\n",[1038,1887,1889],{"class":1040,"line":1888},13,[1038,1890,1891],{"class":1346},"      Show List\n",[1038,1893,1895,1898,1901],{"class":1040,"line":1894},14,[1038,1896,1897],{"class":1086},"    \u003C\u002F",[1038,1899,1900],{"class":1090},"button",[1038,1902,1094],{"class":1086},[1038,1904,1906,1908,1910],{"class":1040,"line":1905},15,[1038,1907,1142],{"class":1086},[1038,1909,1102],{"class":1090},[1038,1911,1094],{"class":1086},[1038,1913,1915,1917,1919],{"class":1040,"line":1914},16,[1038,1916,1152],{"class":1086},[1038,1918,1091],{"class":1090},[1038,1920,1094],{"class":1086},[1158,1922,1924],{"id":1923},"延迟或懒水合","延迟（或懒）水合",[1024,1926,1927],{},"懒组件在控制应用中的 chunk 体积方面很棒，但它们并不总是能提升运行时性能，因为除非是条件渲染，否则它们仍然会立即加载。在真实应用中，某些页面可能包含大量内容和大量组件，而大多数时候并非所有内容都需要在页面加载后立即具有交互性。让它们全部立即加载会对性能产生负面影响。",[1024,1929,1930],{},"为了优化你的应用，你可能希望将某些组件的水合推迟到它们可见时，或者推迟到浏览器完成更重要的任务之后。",[1024,1932,1933],{},"Nuxt 通过懒（或延迟）水合来支持这一点，让你能够控制组件何时变得可交互。",[1935,1936,1937],"h3",{"id":1937},"水合策略",[1024,1939,1940],{},"Nuxt 提供了一系列内置的水合策略。每个懒组件只能使用一种策略。",[1224,1942,1943],{},[1024,1944,1945,1946,1949],{},"懒水合组件上的任何 prop 变更都会立即触发水合。（例如，在带有 ",[1035,1947,1948],{},"hydrate-never"," 的组件上更改 prop 会导致它水合）",[1951,1952,1953],"warning",{},[1024,1954,1955,1956,1959,1960,1962],{},"目前 Nuxt 内置的懒水合只在单文件组件（SFC）中有效，并且要求你在模板中定义该 prop（而不是通过 ",[1035,1957,1958],{},"v-bind"," 展开一个 props 对象）。它也不适用于从 ",[1035,1961,1483],{}," 的直接导入。",[1964,1965,1967],"h4",{"id":1966},"hydrate-on-visible",[1035,1968,1966],{},[1024,1970,1971],{},"当组件进入视口时水合。",[1028,1973,1975],{"className":1448,"code":1974,"filename":1494,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent hydrate-on-visible \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1035,1976,1977,1985,1993,2005,2013],{"__ignoreMap":354},[1038,1978,1979,1981,1983],{"class":1040,"line":1041},[1038,1980,1087],{"class":1086},[1038,1982,1091],{"class":1090},[1038,1984,1094],{"class":1086},[1038,1986,1987,1989,1991],{"class":1040,"line":1055},[1038,1988,1099],{"class":1086},[1038,1990,1102],{"class":1090},[1038,1992,1094],{"class":1086},[1038,1994,1995,1997,2000,2003],{"class":1040,"line":1066},[1038,1996,1109],{"class":1086},[1038,1998,1999],{"class":1090},"LazyMyComponent",[1038,2001,2002],{"class":1460}," hydrate-on-visible",[1038,2004,1116],{"class":1086},[1038,2006,2007,2009,2011],{"class":1040,"line":1119},[1038,2008,1142],{"class":1086},[1038,2010,1102],{"class":1090},[1038,2012,1094],{"class":1086},[1038,2014,2015,2017,2019],{"class":1040,"line":1129},[1038,2016,1152],{"class":1086},[1038,2018,1091],{"class":1090},[1038,2020,1094],{"class":1086},[2022,2023,2026],"read-more",{"to":2024,"title":2025},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FIntersectionObserver\u002FIntersectionObserver","IntersectionObserver 选项",[1024,2027,2028,2029,2031],{},"阅读更多关于 ",[1035,2030,1966],{}," 选项的内容。",[1224,2033,2034],{},[1024,2035,2036,2037,1236],{},"在底层，这使用了 Vue 内置的 ",[2038,2039,2043,2046],"a",{"href":2040,"rel":2041},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fcomponents\u002Fasync#hydrate-on-visible",[2042],"nofollow",[1035,2044,2045],{},"hydrateOnVisible"," 策略",[1964,2048,2050],{"id":2049},"hydrate-on-idle",[1035,2051,2049],{},[1024,2053,2054],{},"当浏览器空闲时水合。如果你需要组件尽快加载，但不想阻塞关键渲染路径，这就很合适。",[1024,2056,2057],{},"你也可以传入一个数字作为最大超时时间。",[1028,2059,2061],{"className":1448,"code":2060,"filename":1494,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent hydrate-on-idle \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1035,2062,2063,2071,2079,2090,2098],{"__ignoreMap":354},[1038,2064,2065,2067,2069],{"class":1040,"line":1041},[1038,2066,1087],{"class":1086},[1038,2068,1091],{"class":1090},[1038,2070,1094],{"class":1086},[1038,2072,2073,2075,2077],{"class":1040,"line":1055},[1038,2074,1099],{"class":1086},[1038,2076,1102],{"class":1090},[1038,2078,1094],{"class":1086},[1038,2080,2081,2083,2085,2088],{"class":1040,"line":1066},[1038,2082,1109],{"class":1086},[1038,2084,1999],{"class":1090},[1038,2086,2087],{"class":1460}," hydrate-on-idle",[1038,2089,1116],{"class":1086},[1038,2091,2092,2094,2096],{"class":1040,"line":1119},[1038,2093,1142],{"class":1086},[1038,2095,1102],{"class":1090},[1038,2097,1094],{"class":1086},[1038,2099,2100,2102,2104],{"class":1040,"line":1129},[1038,2101,1152],{"class":1086},[1038,2103,1091],{"class":1090},[1038,2105,1094],{"class":1086},[1224,2107,2108],{},[1024,2109,2036,2110,1236],{},[2038,2111,2114,2046],{"href":2112,"rel":2113},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fcomponents\u002Fasync#hydrate-on-idle",[2042],[1035,2115,2116],{},"hydrateOnIdle",[1964,2118,2120],{"id":2119},"hydrate-on-interaction",[1035,2121,2119],{},[1024,2123,2124],{},"在指定的交互（如 click、mouseover）之后水合。",[1028,2126,2128],{"className":1448,"code":2127,"filename":1494,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent hydrate-on-interaction=\"mouseover\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1035,2129,2130,2138,2146,2166,2174],{"__ignoreMap":354},[1038,2131,2132,2134,2136],{"class":1040,"line":1041},[1038,2133,1087],{"class":1086},[1038,2135,1091],{"class":1090},[1038,2137,1094],{"class":1086},[1038,2139,2140,2142,2144],{"class":1040,"line":1055},[1038,2141,1099],{"class":1086},[1038,2143,1102],{"class":1090},[1038,2145,1094],{"class":1086},[1038,2147,2148,2150,2152,2155,2157,2159,2162,2164],{"class":1040,"line":1066},[1038,2149,1109],{"class":1086},[1038,2151,1999],{"class":1090},[1038,2153,2154],{"class":1460}," hydrate-on-interaction",[1038,2156,1464],{"class":1086},[1038,2158,1467],{"class":1376},[1038,2160,2161],{"class":1380},"mouseover",[1038,2163,1467],{"class":1376},[1038,2165,1116],{"class":1086},[1038,2167,2168,2170,2172],{"class":1040,"line":1119},[1038,2169,1142],{"class":1086},[1038,2171,1102],{"class":1090},[1038,2173,1094],{"class":1086},[1038,2175,2176,2178,2180],{"class":1040,"line":1129},[1038,2177,1152],{"class":1086},[1038,2179,1091],{"class":1090},[1038,2181,1094],{"class":1086},[1024,2183,2184,2185,2188,2189,2192,2193,2196],{},"如果你没有传入事件或事件列表，默认会在 ",[1035,2186,2187],{},"pointerenter","、",[1035,2190,2191],{},"click"," 和 ",[1035,2194,2195],{},"focus"," 时水合。",[1224,2198,2199],{},[1024,2200,2036,2201,1236],{},[2038,2202,2205,2046],{"href":2203,"rel":2204},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fcomponents\u002Fasync#hydrate-on-interaction",[2042],[1035,2206,2207],{},"hydrateOnInteraction",[1964,2209,2211],{"id":2210},"hydrate-on-media-query",[1035,2212,2210],{},[1024,2214,2215],{},"当窗口匹配某个媒体查询时水合。",[1028,2217,2219],{"className":1448,"code":2218,"filename":1494,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent hydrate-on-media-query=\"(max-width: 768px)\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1035,2220,2221,2229,2237,2257,2265],{"__ignoreMap":354},[1038,2222,2223,2225,2227],{"class":1040,"line":1041},[1038,2224,1087],{"class":1086},[1038,2226,1091],{"class":1090},[1038,2228,1094],{"class":1086},[1038,2230,2231,2233,2235],{"class":1040,"line":1055},[1038,2232,1099],{"class":1086},[1038,2234,1102],{"class":1090},[1038,2236,1094],{"class":1086},[1038,2238,2239,2241,2243,2246,2248,2250,2253,2255],{"class":1040,"line":1066},[1038,2240,1109],{"class":1086},[1038,2242,1999],{"class":1090},[1038,2244,2245],{"class":1460}," hydrate-on-media-query",[1038,2247,1464],{"class":1086},[1038,2249,1467],{"class":1376},[1038,2251,2252],{"class":1380},"(max-width: 768px)",[1038,2254,1467],{"class":1376},[1038,2256,1116],{"class":1086},[1038,2258,2259,2261,2263],{"class":1040,"line":1119},[1038,2260,1142],{"class":1086},[1038,2262,1102],{"class":1090},[1038,2264,1094],{"class":1086},[1038,2266,2267,2269,2271],{"class":1040,"line":1129},[1038,2268,1152],{"class":1086},[1038,2270,1091],{"class":1090},[1038,2272,1094],{"class":1086},[1224,2274,2275],{},[1024,2276,2036,2277,1236],{},[2038,2278,2281,2046],{"href":2279,"rel":2280},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fcomponents\u002Fasync#hydrate-on-media-query",[2042],[1035,2282,2283],{},"hydrateOnMediaQuery",[1964,2285,2287],{"id":2286},"hydrate-after",[1035,2288,2286],{},[1024,2290,2291],{},"在指定的延迟（毫秒）之后水合。",[1028,2293,2295],{"className":1448,"code":2294,"filename":1494,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent :hydrate-after=\"2000\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1035,2296,2297,2305,2313,2333,2341],{"__ignoreMap":354},[1038,2298,2299,2301,2303],{"class":1040,"line":1041},[1038,2300,1087],{"class":1086},[1038,2302,1091],{"class":1090},[1038,2304,1094],{"class":1086},[1038,2306,2307,2309,2311],{"class":1040,"line":1055},[1038,2308,1099],{"class":1086},[1038,2310,1102],{"class":1090},[1038,2312,1094],{"class":1086},[1038,2314,2315,2317,2319,2322,2324,2326,2329,2331],{"class":1040,"line":1066},[1038,2316,1109],{"class":1086},[1038,2318,1999],{"class":1090},[1038,2320,2321],{"class":1460}," :hydrate-after",[1038,2323,1464],{"class":1086},[1038,2325,1467],{"class":1376},[1038,2327,2328],{"class":1380},"2000",[1038,2330,1467],{"class":1376},[1038,2332,1116],{"class":1086},[1038,2334,2335,2337,2339],{"class":1040,"line":1119},[1038,2336,1142],{"class":1086},[1038,2338,1102],{"class":1090},[1038,2340,1094],{"class":1086},[1038,2342,2343,2345,2347],{"class":1040,"line":1129},[1038,2344,1152],{"class":1086},[1038,2346,1091],{"class":1090},[1038,2348,1094],{"class":1086},[1964,2350,2352],{"id":2351},"hydrate-when",[1035,2353,2351],{},[1024,2355,2356],{},"基于布尔条件水合。",[1028,2358,2360],{"className":1448,"code":2359,"filename":1494,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent :hydrate-when=\"isReady\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst isReady = ref(false)\nfunction myFunction () {\n  \u002F\u002F 触发自定义水合策略...\n  isReady.value = true\n}\n\u003C\u002Fscript>\n",[1035,2361,2362,2370,2378,2398,2406,2414,2418,2438,2455,2469,2475,2491,2496],{"__ignoreMap":354},[1038,2363,2364,2366,2368],{"class":1040,"line":1041},[1038,2365,1087],{"class":1086},[1038,2367,1091],{"class":1090},[1038,2369,1094],{"class":1086},[1038,2371,2372,2374,2376],{"class":1040,"line":1055},[1038,2373,1099],{"class":1086},[1038,2375,1102],{"class":1090},[1038,2377,1094],{"class":1086},[1038,2379,2380,2382,2384,2387,2389,2391,2394,2396],{"class":1040,"line":1066},[1038,2381,1109],{"class":1086},[1038,2383,1999],{"class":1090},[1038,2385,2386],{"class":1460}," :hydrate-when",[1038,2388,1464],{"class":1086},[1038,2390,1467],{"class":1376},[1038,2392,2393],{"class":1380},"isReady",[1038,2395,1467],{"class":1376},[1038,2397,1116],{"class":1086},[1038,2399,2400,2402,2404],{"class":1040,"line":1119},[1038,2401,1142],{"class":1086},[1038,2403,1102],{"class":1090},[1038,2405,1094],{"class":1086},[1038,2407,2408,2410,2412],{"class":1040,"line":1129},[1038,2409,1152],{"class":1086},[1038,2411,1091],{"class":1090},[1038,2413,1094],{"class":1086},[1038,2415,2416],{"class":1040,"line":1139},[1038,2417,1549],{"emptyLinePlaceholder":1548},[1038,2419,2420,2422,2424,2426,2428,2430,2432,2434,2436],{"class":1040,"line":1149},[1038,2421,1087],{"class":1086},[1038,2423,1503],{"class":1090},[1038,2425,1506],{"class":1460},[1038,2427,1509],{"class":1460},[1038,2429,1464],{"class":1086},[1038,2431,1467],{"class":1376},[1038,2433,1327],{"class":1380},[1038,2435,1467],{"class":1376},[1038,2437,1094],{"class":1086},[1038,2439,2440,2442,2445,2447,2449,2451,2453],{"class":1040,"line":1419},[1038,2441,1555],{"class":1554},[1038,2443,2444],{"class":1558}," isReady",[1038,2446,1562],{"class":1048},[1038,2448,1769],{"class":1342},[1038,2450,1242],{"class":1346},[1038,2452,1321],{"class":1400},[1038,2454,1425],{"class":1346},[1038,2456,2457,2460,2463,2466],{"class":1040,"line":1619},[1038,2458,2459],{"class":1554},"function",[1038,2461,2462],{"class":1342}," myFunction",[1038,2464,2465],{"class":1086}," ()",[1038,2467,2468],{"class":1086}," {\n",[1038,2470,2471],{"class":1040,"line":1639},[1038,2472,2474],{"class":2473},"sZqJ9","  \u002F\u002F 触发自定义水合策略...\n",[1038,2476,2477,2480,2483,2486,2488],{"class":1040,"line":1867},[1038,2478,2479],{"class":1346},"  isReady",[1038,2481,2482],{"class":1086},".",[1038,2484,2485],{"class":1346},"value",[1038,2487,1562],{"class":1048},[1038,2489,2490],{"class":1400}," true\n",[1038,2492,2493],{"class":1040,"line":1882},[1038,2494,2495],{"class":1086},"}\n",[1038,2497,2498,2500,2502],{"class":1040,"line":1888},[1038,2499,1152],{"class":1086},[1038,2501,1503],{"class":1090},[1038,2503,1094],{"class":1086},[1964,2505,2506],{"id":1948},[1035,2507,1948],{},[1024,2509,2510],{},"永不水合。",[1028,2512,2514],{"className":1448,"code":2513,"filename":1494,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent hydrate-never \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1035,2515,2516,2524,2532,2543,2551],{"__ignoreMap":354},[1038,2517,2518,2520,2522],{"class":1040,"line":1041},[1038,2519,1087],{"class":1086},[1038,2521,1091],{"class":1090},[1038,2523,1094],{"class":1086},[1038,2525,2526,2528,2530],{"class":1040,"line":1055},[1038,2527,1099],{"class":1086},[1038,2529,1102],{"class":1090},[1038,2531,1094],{"class":1086},[1038,2533,2534,2536,2538,2541],{"class":1040,"line":1066},[1038,2535,1109],{"class":1086},[1038,2537,1999],{"class":1090},[1038,2539,2540],{"class":1460}," hydrate-never",[1038,2542,1116],{"class":1086},[1038,2544,2545,2547,2549],{"class":1040,"line":1119},[1038,2546,1142],{"class":1086},[1038,2548,1102],{"class":1090},[1038,2550,1094],{"class":1086},[1038,2552,2553,2555,2557],{"class":1040,"line":1129},[1038,2554,1152],{"class":1086},[1038,2556,1091],{"class":1090},[1038,2558,1094],{"class":1086},[1935,2560,2561],{"id":2561},"监听水合事件",[1024,2563,2564,2565,2568],{},"所有延迟水合组件在水合时都会发出 ",[1035,2566,2567],{},"@hydrated"," 事件。",[1028,2570,2572],{"className":1448,"code":2571,"filename":1494,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CLazyMyComponent\n      hydrate-on-visible\n      @hydrated=\"onHydrate\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nfunction onHydrate () {\n  console.log('组件已水合！')\n}\n\u003C\u002Fscript>\n",[1035,2573,2574,2582,2590,2597,2602,2616,2621,2629,2637,2641,2661,2672,2693,2697],{"__ignoreMap":354},[1038,2575,2576,2578,2580],{"class":1040,"line":1041},[1038,2577,1087],{"class":1086},[1038,2579,1091],{"class":1090},[1038,2581,1094],{"class":1086},[1038,2583,2584,2586,2588],{"class":1040,"line":1055},[1038,2585,1099],{"class":1086},[1038,2587,1102],{"class":1090},[1038,2589,1094],{"class":1086},[1038,2591,2592,2594],{"class":1040,"line":1066},[1038,2593,1109],{"class":1086},[1038,2595,2596],{"class":1090},"LazyMyComponent\n",[1038,2598,2599],{"class":1040,"line":1119},[1038,2600,2601],{"class":1460},"      hydrate-on-visible\n",[1038,2603,2604,2607,2609,2611,2614],{"class":1040,"line":1129},[1038,2605,2606],{"class":1460},"      @hydrated",[1038,2608,1464],{"class":1086},[1038,2610,1467],{"class":1376},[1038,2612,2613],{"class":1380},"onHydrate",[1038,2615,1864],{"class":1376},[1038,2617,2618],{"class":1040,"line":1139},[1038,2619,2620],{"class":1086},"    \u002F>\n",[1038,2622,2623,2625,2627],{"class":1040,"line":1149},[1038,2624,1142],{"class":1086},[1038,2626,1102],{"class":1090},[1038,2628,1094],{"class":1086},[1038,2630,2631,2633,2635],{"class":1040,"line":1419},[1038,2632,1152],{"class":1086},[1038,2634,1091],{"class":1090},[1038,2636,1094],{"class":1086},[1038,2638,2639],{"class":1040,"line":1619},[1038,2640,1549],{"emptyLinePlaceholder":1548},[1038,2642,2643,2645,2647,2649,2651,2653,2655,2657,2659],{"class":1040,"line":1639},[1038,2644,1087],{"class":1086},[1038,2646,1503],{"class":1090},[1038,2648,1506],{"class":1460},[1038,2650,1509],{"class":1460},[1038,2652,1464],{"class":1086},[1038,2654,1467],{"class":1376},[1038,2656,1327],{"class":1380},[1038,2658,1467],{"class":1376},[1038,2660,1094],{"class":1086},[1038,2662,2663,2665,2668,2670],{"class":1040,"line":1867},[1038,2664,2459],{"class":1554},[1038,2666,2667],{"class":1342}," onHydrate",[1038,2669,2465],{"class":1086},[1038,2671,2468],{"class":1086},[1038,2673,2674,2677,2679,2682,2684,2686,2689,2691],{"class":1040,"line":1882},[1038,2675,2676],{"class":1346},"  console",[1038,2678,2482],{"class":1086},[1038,2680,2681],{"class":1342},"log",[1038,2683,1242],{"class":1354},[1038,2685,1384],{"class":1376},[1038,2687,2688],{"class":1380},"组件已水合！",[1038,2690,1384],{"class":1376},[1038,2692,1425],{"class":1354},[1038,2694,2695],{"class":1040,"line":1888},[1038,2696,2495],{"class":1086},[1038,2698,2699,2701,2703],{"class":1040,"line":1894},[1038,2700,1152],{"class":1086},[1038,2702,1503],{"class":1090},[1038,2704,1094],{"class":1086},[1935,2706,2707],{"id":2707},"注意事项与最佳实践",[1024,2709,2710],{},"延迟水合可以带来性能优势，但正确使用它至关重要：",[2712,2713,2714,2722,2732,2742,2766],"ol",{},[2715,2716,2717,2721],"li",{},[2718,2719,2720],"strong",{},"优先处理视口内的内容："," 不要对关键的、首屏以上的内容使用延迟水合。它最适合用于并非立即需要的内容。",[2715,2723,2724,2727,2728,2731],{},[2718,2725,2726],{},"条件渲染："," 当在懒组件上使用 ",[1035,2729,2730],{},"v-if=\"false\""," 时，你可能不需要延迟水合。你只需使用普通的懒组件即可。",[2715,2733,2734,2737,2738,2741],{},[2718,2735,2736],{},"共享状态："," 注意跨多个组件的共享状态（",[1035,2739,2740],{},"v-model","）。在一个组件中更新 model 会触发所有绑定到该 model 的组件水合。",[2715,2743,2744,2747,2748],{},[2718,2745,2746],{},"使用每种策略的预定用途："," 每种策略都为特定目的而优化。",[2749,2750,2751,2756,2761],"ul",{},[2715,2752,2753,2755],{},[1035,2754,2351],{}," 最适合可能并不总是需要水合的组件。",[2715,2757,2758,2760],{},[1035,2759,2286],{}," 适合可以等待特定时间的组件。",[2715,2762,2763,2765],{},[1035,2764,2049],{}," 适合可以在浏览器空闲时水合的组件。",[2715,2767,2768,2773],{},[2718,2769,2770,2771,1322],{},"不要在交互组件上用 ",[1035,2772,1948],{}," 如果一个组件需要用户交互，就不应该将其设为永不下水合。",[1158,2775,2776],{"id":2776},"直接导入",[1024,2778,2779,2780,2782],{},"如果你想要或需要绕过 Nuxt 的自动导入功能，你也可以从 ",[1035,2781,1483],{}," 显式导入组件。",[1028,2784,2786],{"className":1448,"code":2785,"filename":1494,"language":1449,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nimport { LazyMountainsList, NuxtLink } from '#components'\n\nconst show = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Mountains\u003C\u002Fh1>\n    \u003CLazyMountainsList v-if=\"show\" \u002F>\n    \u003Cbutton\n      v-if=\"!show\"\n      @click=\"show = true\"\n    >\n      Show List\n    \u003C\u002Fbutton>\n    \u003CNuxtLink to=\"\u002F\">Home\u003C\u002FNuxtLink>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1035,2787,2788,2808,2832,2836,2852,2860,2864,2872,2880,2896,2914,2920,2932,2944,2948,2952,2960,2991,3000],{"__ignoreMap":354},[1038,2789,2790,2792,2794,2796,2798,2800,2802,2804,2806],{"class":1040,"line":1041},[1038,2791,1087],{"class":1086},[1038,2793,1503],{"class":1090},[1038,2795,1506],{"class":1460},[1038,2797,1509],{"class":1460},[1038,2799,1464],{"class":1086},[1038,2801,1467],{"class":1376},[1038,2803,1327],{"class":1380},[1038,2805,1467],{"class":1376},[1038,2807,1094],{"class":1086},[1038,2809,2810,2812,2814,2817,2819,2822,2824,2826,2828,2830],{"class":1040,"line":1055},[1038,2811,1524],{"class":1335},[1038,2813,1527],{"class":1086},[1038,2815,2816],{"class":1346}," LazyMountainsList",[1038,2818,1404],{"class":1086},[1038,2820,2821],{"class":1346}," NuxtLink",[1038,2823,1533],{"class":1086},[1038,2825,1536],{"class":1335},[1038,2827,1377],{"class":1376},[1038,2829,1483],{"class":1380},[1038,2831,1543],{"class":1376},[1038,2833,2834],{"class":1040,"line":1066},[1038,2835,1549],{"emptyLinePlaceholder":1548},[1038,2837,2838,2840,2842,2844,2846,2848,2850],{"class":1040,"line":1119},[1038,2839,1555],{"class":1554},[1038,2841,1764],{"class":1558},[1038,2843,1562],{"class":1048},[1038,2845,1769],{"class":1342},[1038,2847,1242],{"class":1346},[1038,2849,1321],{"class":1400},[1038,2851,1425],{"class":1346},[1038,2853,2854,2856,2858],{"class":1040,"line":1129},[1038,2855,1152],{"class":1086},[1038,2857,1503],{"class":1090},[1038,2859,1094],{"class":1086},[1038,2861,2862],{"class":1040,"line":1139},[1038,2863,1549],{"emptyLinePlaceholder":1548},[1038,2865,2866,2868,2870],{"class":1040,"line":1149},[1038,2867,1087],{"class":1086},[1038,2869,1091],{"class":1090},[1038,2871,1094],{"class":1086},[1038,2873,2874,2876,2878],{"class":1040,"line":1419},[1038,2875,1099],{"class":1086},[1038,2877,1102],{"class":1090},[1038,2879,1094],{"class":1086},[1038,2881,2882,2884,2886,2888,2890,2892,2894],{"class":1040,"line":1619},[1038,2883,1109],{"class":1086},[1038,2885,1810],{"class":1090},[1038,2887,1475],{"class":1086},[1038,2889,1815],{"class":1346},[1038,2891,1152],{"class":1086},[1038,2893,1810],{"class":1090},[1038,2895,1094],{"class":1086},[1038,2897,2898,2900,2902,2904,2906,2908,2910,2912],{"class":1040,"line":1639},[1038,2899,1109],{"class":1086},[1038,2901,1828],{"class":1090},[1038,2903,1831],{"class":1460},[1038,2905,1464],{"class":1086},[1038,2907,1467],{"class":1376},[1038,2909,1838],{"class":1380},[1038,2911,1467],{"class":1376},[1038,2913,1116],{"class":1086},[1038,2915,2916,2918],{"class":1040,"line":1867},[1038,2917,1109],{"class":1086},[1038,2919,1849],{"class":1090},[1038,2921,2922,2924,2926,2928,2930],{"class":1040,"line":1882},[1038,2923,1854],{"class":1460},[1038,2925,1464],{"class":1086},[1038,2927,1467],{"class":1376},[1038,2929,1861],{"class":1380},[1038,2931,1864],{"class":1376},[1038,2933,2934,2936,2938,2940,2942],{"class":1040,"line":1888},[1038,2935,1870],{"class":1460},[1038,2937,1464],{"class":1086},[1038,2939,1467],{"class":1376},[1038,2941,1877],{"class":1380},[1038,2943,1864],{"class":1376},[1038,2945,2946],{"class":1040,"line":1894},[1038,2947,1885],{"class":1086},[1038,2949,2950],{"class":1040,"line":1905},[1038,2951,1891],{"class":1346},[1038,2953,2954,2956,2958],{"class":1040,"line":1914},[1038,2955,1897],{"class":1086},[1038,2957,1900],{"class":1090},[1038,2959,1094],{"class":1086},[1038,2961,2963,2965,2968,2971,2973,2975,2978,2980,2982,2985,2987,2989],{"class":1040,"line":2962},17,[1038,2964,1109],{"class":1086},[1038,2966,2967],{"class":1090},"NuxtLink",[1038,2969,2970],{"class":1460}," to",[1038,2972,1464],{"class":1086},[1038,2974,1467],{"class":1376},[1038,2976,2977],{"class":1380},"\u002F",[1038,2979,1467],{"class":1376},[1038,2981,1475],{"class":1086},[1038,2983,2984],{"class":1346},"Home",[1038,2986,1152],{"class":1086},[1038,2988,2967],{"class":1090},[1038,2990,1094],{"class":1086},[1038,2992,2994,2996,2998],{"class":1040,"line":2993},18,[1038,2995,1142],{"class":1086},[1038,2997,1102],{"class":1090},[1038,2999,1094],{"class":1086},[1038,3001,3003,3005,3007],{"class":1040,"line":3002},19,[1038,3004,1152],{"class":1086},[1038,3006,1091],{"class":1090},[1038,3008,1094],{"class":1086},[1158,3010,3011],{"id":3011},"自定义目录",[1024,3013,3014,3015,3017],{},"默认情况下，只扫描 ",[1035,3016,1381],{}," 目录。如果你想添加其他目录，或更改在此目录的子文件夹中扫描组件的方式，可以向配置中添加额外的目录：",[1028,3019,3022],{"className":3020,"code":3021,"filename":174,"language":1327,"meta":1328,"style":354},"language-ts shiki shiki-themes material-theme-lighter github-dark material-theme-palenight","export default defineNuxtConfig({\n  components: [\n    \u002F\u002F ~\u002Fcalendar-module\u002Fcomponents\u002Fevent\u002FUpdate.vue => \u003CEventUpdate \u002F>\n    { path: '~\u002Fcalendar-module\u002Fcomponents' },\n\n    \u002F\u002F ~\u002Fuser-module\u002Fcomponents\u002Faccount\u002FUserDeleteDialog.vue => \u003CUserDeleteDialog \u002F>\n    { path: '~\u002Fuser-module\u002Fcomponents', pathPrefix: false },\n\n    \u002F\u002F ~\u002Fcomponents\u002Fspecial-components\u002FBtn.vue => \u003CSpecialBtn \u002F>\n    { path: '~\u002Fcomponents\u002Fspecial-components', prefix: 'Special' },\n\n    \u002F\u002F 如果你希望对 `~\u002Fcomponents` 子目录应用覆盖，此项必须放在最后\n    \u002F\u002F\n    \u002F\u002F ~\u002Fcomponents\u002FBtn.vue => \u003CBtn \u002F>\n    \u002F\u002F ~\u002Fcomponents\u002Fbase\u002FBtn.vue => \u003CBaseBtn \u002F>\n    '~\u002Fcomponents',\n  ],\n})\n",[1035,3023,3024,3036,3044,3049,3069,3073,3078,3104,3108,3113,3144,3148,3153,3158,3163,3168,3179,3185],{"__ignoreMap":354},[1038,3025,3026,3028,3030,3032,3034],{"class":1040,"line":1041},[1038,3027,1336],{"class":1335},[1038,3029,1339],{"class":1335},[1038,3031,1343],{"class":1342},[1038,3033,1242],{"class":1346},[1038,3035,1349],{"class":1086},[1038,3037,3038,3040,3042],{"class":1040,"line":1055},[1038,3039,1355],{"class":1354},[1038,3041,1358],{"class":1086},[1038,3043,1361],{"class":1346},[1038,3045,3046],{"class":1040,"line":1066},[1038,3047,3048],{"class":2473},"    \u002F\u002F ~\u002Fcalendar-module\u002Fcomponents\u002Fevent\u002FUpdate.vue => \u003CEventUpdate \u002F>\n",[1038,3050,3051,3054,3057,3059,3061,3064,3066],{"class":1040,"line":1119},[1038,3052,3053],{"class":1086},"    {",[1038,3055,3056],{"class":1354}," path",[1038,3058,1358],{"class":1086},[1038,3060,1377],{"class":1376},[1038,3062,3063],{"class":1380},"~\u002Fcalendar-module\u002Fcomponents",[1038,3065,1384],{"class":1376},[1038,3067,3068],{"class":1086}," },\n",[1038,3070,3071],{"class":1040,"line":1129},[1038,3072,1549],{"emptyLinePlaceholder":1548},[1038,3074,3075],{"class":1040,"line":1139},[1038,3076,3077],{"class":2473},"    \u002F\u002F ~\u002Fuser-module\u002Fcomponents\u002Faccount\u002FUserDeleteDialog.vue => \u003CUserDeleteDialog \u002F>\n",[1038,3079,3080,3082,3084,3086,3088,3091,3093,3095,3098,3100,3102],{"class":1040,"line":1149},[1038,3081,3053],{"class":1086},[1038,3083,3056],{"class":1354},[1038,3085,1358],{"class":1086},[1038,3087,1377],{"class":1376},[1038,3089,3090],{"class":1380},"~\u002Fuser-module\u002Fcomponents",[1038,3092,1384],{"class":1376},[1038,3094,1404],{"class":1086},[1038,3096,3097],{"class":1354}," pathPrefix",[1038,3099,1358],{"class":1086},[1038,3101,1401],{"class":1400},[1038,3103,3068],{"class":1086},[1038,3105,3106],{"class":1040,"line":1419},[1038,3107,1549],{"emptyLinePlaceholder":1548},[1038,3109,3110],{"class":1040,"line":1619},[1038,3111,3112],{"class":2473},"    \u002F\u002F ~\u002Fcomponents\u002Fspecial-components\u002FBtn.vue => \u003CSpecialBtn \u002F>\n",[1038,3114,3115,3117,3119,3121,3123,3126,3128,3130,3133,3135,3137,3140,3142],{"class":1040,"line":1639},[1038,3116,3053],{"class":1086},[1038,3118,3056],{"class":1354},[1038,3120,1358],{"class":1086},[1038,3122,1377],{"class":1376},[1038,3124,3125],{"class":1380},"~\u002Fcomponents\u002Fspecial-components",[1038,3127,1384],{"class":1376},[1038,3129,1404],{"class":1086},[1038,3131,3132],{"class":1354}," prefix",[1038,3134,1358],{"class":1086},[1038,3136,1377],{"class":1376},[1038,3138,3139],{"class":1380},"Special",[1038,3141,1384],{"class":1376},[1038,3143,3068],{"class":1086},[1038,3145,3146],{"class":1040,"line":1867},[1038,3147,1549],{"emptyLinePlaceholder":1548},[1038,3149,3150],{"class":1040,"line":1882},[1038,3151,3152],{"class":2473},"    \u002F\u002F 如果你希望对 `~\u002Fcomponents` 子目录应用覆盖，此项必须放在最后\n",[1038,3154,3155],{"class":1040,"line":1888},[1038,3156,3157],{"class":2473},"    \u002F\u002F\n",[1038,3159,3160],{"class":1040,"line":1894},[1038,3161,3162],{"class":2473},"    \u002F\u002F ~\u002Fcomponents\u002FBtn.vue => \u003CBtn \u002F>\n",[1038,3164,3165],{"class":1040,"line":1905},[1038,3166,3167],{"class":2473},"    \u002F\u002F ~\u002Fcomponents\u002Fbase\u002FBtn.vue => \u003CBaseBtn \u002F>\n",[1038,3169,3170,3173,3175,3177],{"class":1040,"line":1914},[1038,3171,3172],{"class":1376},"    '",[1038,3174,1381],{"class":1380},[1038,3176,1384],{"class":1376},[1038,3178,1387],{"class":1086},[1038,3180,3181,3183],{"class":1040,"line":2962},[1038,3182,1414],{"class":1346},[1038,3184,1387],{"class":1086},[1038,3186,3187,3189],{"class":1040,"line":2993},[1038,3188,1422],{"class":1086},[1038,3190,1425],{"class":1346},[1224,3192,3193],{},[1024,3194,3195],{},"任何嵌套目录都需要先添加，因为它们是按顺序扫描的。",[1024,3197,3198,3199,2192,3202,3205,3206,3209],{},"每个目录条目还接受 ",[1035,3200,3201],{},"pattern",[1035,3203,3204],{},"ignore"," glob 选项，用于控制 ",[1035,3207,3208],{},"path"," 中被扫描的文件。当你的组件位于不符合默认布局的嵌套文件夹中时（例如领域驱动的结构），这会很有用：",[1028,3211,3213],{"className":3020,"code":3212,"filename":174,"language":1327,"meta":1328,"style":354},"export default defineNuxtConfig({\n  components: [\n    \u002F\u002F ~\u002Fdomains\u002Fblog\u002Fcomponents\u002FPostCard.vue => \u003CPostCard \u002F>\n    {\n      path: '~\u002Fdomains',\n      pattern: '*\u002Fcomponents\u002F**',\n      pathPrefix: false,\n    },\n  ],\n})\n",[1035,3214,3215,3227,3235,3240,3244,3259,3275,3285,3289,3295],{"__ignoreMap":354},[1038,3216,3217,3219,3221,3223,3225],{"class":1040,"line":1041},[1038,3218,1336],{"class":1335},[1038,3220,1339],{"class":1335},[1038,3222,1343],{"class":1342},[1038,3224,1242],{"class":1346},[1038,3226,1349],{"class":1086},[1038,3228,3229,3231,3233],{"class":1040,"line":1055},[1038,3230,1355],{"class":1354},[1038,3232,1358],{"class":1086},[1038,3234,1361],{"class":1346},[1038,3236,3237],{"class":1040,"line":1066},[1038,3238,3239],{"class":2473},"    \u002F\u002F ~\u002Fdomains\u002Fblog\u002Fcomponents\u002FPostCard.vue => \u003CPostCard \u002F>\n",[1038,3241,3242],{"class":1040,"line":1119},[1038,3243,1366],{"class":1086},[1038,3245,3246,3248,3250,3252,3255,3257],{"class":1040,"line":1129},[1038,3247,1371],{"class":1354},[1038,3249,1358],{"class":1086},[1038,3251,1377],{"class":1376},[1038,3253,3254],{"class":1380},"~\u002Fdomains",[1038,3256,1384],{"class":1376},[1038,3258,1387],{"class":1086},[1038,3260,3261,3264,3266,3268,3271,3273],{"class":1040,"line":1139},[1038,3262,3263],{"class":1354},"      pattern",[1038,3265,1358],{"class":1086},[1038,3267,1377],{"class":1376},[1038,3269,3270],{"class":1380},"*\u002Fcomponents\u002F**",[1038,3272,1384],{"class":1376},[1038,3274,1387],{"class":1086},[1038,3276,3277,3279,3281,3283],{"class":1040,"line":1149},[1038,3278,1395],{"class":1354},[1038,3280,1358],{"class":1086},[1038,3282,1401],{"class":1400},[1038,3284,1387],{"class":1086},[1038,3286,3287],{"class":1040,"line":1419},[1038,3288,1409],{"class":1086},[1038,3290,3291,3293],{"class":1040,"line":1619},[1038,3292,1414],{"class":1346},[1038,3294,1387],{"class":1086},[1038,3296,3297,3299],{"class":1040,"line":1639},[1038,3298,1422],{"class":1086},[1038,3300,1425],{"class":1346},[1224,3302,3303],{},[1024,3304,3305,3306,3308,3309,3312],{},"如果指定了 ",[1035,3307,3201],{},"，",[1035,3310,3311],{},"extensions"," 选项将不起作用，因此请确保你的 pattern 匹配你想要扫描的文件扩展名。",[1158,3314,3316],{"id":3315},"npm-包","npm 包",[1024,3318,3319,3320,3323,3324,3330],{},"如果你想从 npm 包中自动导入组件，可以在",[2038,3321,3322],{"href":137},"本地模块","中使用 ",[2038,3325,3327],{"href":3326},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcomponents#addcomponent",[1035,3328,3329],{},"addComponent"," 来注册它们。",[3332,3333,3334,3471],"code-group",{},[1028,3335,3338],{"className":3020,"code":3336,"filename":3337,"language":1327,"meta":1328,"style":354},"import { addComponent, defineNuxtModule } from '@nuxt\u002Fkit'\n\nexport default defineNuxtModule({\n  setup () {\n    \u002F\u002F import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'\n    addComponent({\n      name: 'MyAutoImportedComponent',\n      export: 'MyComponent',\n      filePath: 'my-npm-package',\n    })\n  },\n})\n","~\u002Fmodules\u002Fregister-component.ts",[1035,3339,3340,3365,3369,3381,3391,3396,3405,3421,3437,3453,3460,3465],{"__ignoreMap":354},[1038,3341,3342,3344,3346,3349,3351,3354,3356,3358,3360,3363],{"class":1040,"line":1041},[1038,3343,1524],{"class":1335},[1038,3345,1527],{"class":1086},[1038,3347,3348],{"class":1346}," addComponent",[1038,3350,1404],{"class":1086},[1038,3352,3353],{"class":1346}," defineNuxtModule",[1038,3355,1533],{"class":1086},[1038,3357,1536],{"class":1335},[1038,3359,1377],{"class":1376},[1038,3361,3362],{"class":1380},"@nuxt\u002Fkit",[1038,3364,1543],{"class":1376},[1038,3366,3367],{"class":1040,"line":1055},[1038,3368,1549],{"emptyLinePlaceholder":1548},[1038,3370,3371,3373,3375,3377,3379],{"class":1040,"line":1066},[1038,3372,1336],{"class":1335},[1038,3374,1339],{"class":1335},[1038,3376,3353],{"class":1342},[1038,3378,1242],{"class":1346},[1038,3380,1349],{"class":1086},[1038,3382,3383,3387,3389],{"class":1040,"line":1119},[1038,3384,3386],{"class":3385},"syA7L","  setup",[1038,3388,2465],{"class":1086},[1038,3390,2468],{"class":1086},[1038,3392,3393],{"class":1040,"line":1129},[1038,3394,3395],{"class":2473},"    \u002F\u002F import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'\n",[1038,3397,3398,3401,3403],{"class":1040,"line":1139},[1038,3399,3400],{"class":1342},"    addComponent",[1038,3402,1242],{"class":1354},[1038,3404,1349],{"class":1086},[1038,3406,3407,3410,3412,3414,3417,3419],{"class":1040,"line":1149},[1038,3408,3409],{"class":1354},"      name",[1038,3411,1358],{"class":1086},[1038,3413,1377],{"class":1376},[1038,3415,3416],{"class":1380},"MyAutoImportedComponent",[1038,3418,1384],{"class":1376},[1038,3420,1387],{"class":1086},[1038,3422,3423,3426,3428,3430,3433,3435],{"class":1040,"line":1419},[1038,3424,3425],{"class":1354},"      export",[1038,3427,1358],{"class":1086},[1038,3429,1377],{"class":1376},[1038,3431,3432],{"class":1380},"MyComponent",[1038,3434,1384],{"class":1376},[1038,3436,1387],{"class":1086},[1038,3438,3439,3442,3444,3446,3449,3451],{"class":1040,"line":1619},[1038,3440,3441],{"class":1354},"      filePath",[1038,3443,1358],{"class":1086},[1038,3445,1377],{"class":1376},[1038,3447,3448],{"class":1380},"my-npm-package",[1038,3450,1384],{"class":1376},[1038,3452,1387],{"class":1086},[1038,3454,3455,3458],{"class":1040,"line":1639},[1038,3456,3457],{"class":1086},"    }",[1038,3459,1425],{"class":1354},[1038,3461,3462],{"class":1040,"line":1867},[1038,3463,3464],{"class":1086},"  },\n",[1038,3466,3467,3469],{"class":1040,"line":1882},[1038,3468,1422],{"class":1086},[1038,3470,1425],{"class":1346},[1028,3472,3474],{"className":1448,"code":3473,"filename":1078,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!--  组件使用我们指定的名称，并被自动导入  -->\n    \u003CMyAutoImportedComponent \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1035,3475,3476,3484,3492,3497,3505,3513],{"__ignoreMap":354},[1038,3477,3478,3480,3482],{"class":1040,"line":1041},[1038,3479,1087],{"class":1086},[1038,3481,1091],{"class":1090},[1038,3483,1094],{"class":1086},[1038,3485,3486,3488,3490],{"class":1040,"line":1055},[1038,3487,1099],{"class":1086},[1038,3489,1102],{"class":1090},[1038,3491,1094],{"class":1086},[1038,3493,3494],{"class":1040,"line":1066},[1038,3495,3496],{"class":2473},"    \u003C!--  组件使用我们指定的名称，并被自动导入  -->\n",[1038,3498,3499,3501,3503],{"class":1040,"line":1119},[1038,3500,1109],{"class":1086},[1038,3502,3416],{"class":1090},[1038,3504,1116],{"class":1086},[1038,3506,3507,3509,3511],{"class":1040,"line":1129},[1038,3508,1142],{"class":1086},[1038,3510,1102],{"class":1090},[1038,3512,1094],{"class":1086},[1038,3514,3515,3517,3519],{"class":1040,"line":1139},[1038,3516,1152],{"class":1086},[1038,3518,1091],{"class":1090},[1038,3520,1094],{"class":1086},[1158,3522,3523],{"id":3523},"组件扩展名",[1024,3525,3526,3527,3533,3534,3536],{},"默认情况下，任何具有 ",[2038,3528,3530,3532],{"href":3529},"\u002Fdocs\u002Fapi\u002Fnuxt-config#extensions",[1035,3531,174],{}," 的 extensions 键","中指定的扩展名的文件都会被视为组件。\n如果你需要限制应被注册为组件的扩展名，可以使用组件目录声明的扩展形式及其 ",[1035,3535,3311],{}," 键：",[1028,3538,3540],{"className":1325,"code":3539,"filename":174,"language":1327,"meta":1328,"style":354},"export default defineNuxtConfig({\n  components: [\n    {\n      path: '~\u002Fcomponents',\n      extensions: ['.vue'], \u002F\u002F [!code ++]\n    },\n  ],\n})\n",[1035,3541,3542,3554,3562,3566,3580,3603,3607,3613],{"__ignoreMap":354},[1038,3543,3544,3546,3548,3550,3552],{"class":1040,"line":1041},[1038,3545,1336],{"class":1335},[1038,3547,1339],{"class":1335},[1038,3549,1343],{"class":1342},[1038,3551,1242],{"class":1346},[1038,3553,1349],{"class":1086},[1038,3555,3556,3558,3560],{"class":1040,"line":1055},[1038,3557,1355],{"class":1354},[1038,3559,1358],{"class":1086},[1038,3561,1361],{"class":1346},[1038,3563,3564],{"class":1040,"line":1066},[1038,3565,1366],{"class":1086},[1038,3567,3568,3570,3572,3574,3576,3578],{"class":1040,"line":1119},[1038,3569,1371],{"class":1354},[1038,3571,1358],{"class":1086},[1038,3573,1377],{"class":1376},[1038,3575,1381],{"class":1380},[1038,3577,1384],{"class":1376},[1038,3579,1387],{"class":1086},[1038,3581,3583,3586,3588,3591,3593,3596,3598,3601],{"class":3582,"line":1129},[1040,1391,1392],[1038,3584,3585],{"class":1354},"      extensions",[1038,3587,1358],{"class":1086},[1038,3589,3590],{"class":1346}," [",[1038,3592,1384],{"class":1376},[1038,3594,3595],{"class":1380},".vue",[1038,3597,1384],{"class":1376},[1038,3599,3600],{"class":1346},"]",[1038,3602,1404],{"class":1086},[1038,3604,3605],{"class":1040,"line":1139},[1038,3606,1409],{"class":1086},[1038,3608,3609,3611],{"class":1040,"line":1149},[1038,3610,1414],{"class":1346},[1038,3612,1387],{"class":1086},[1038,3614,3615,3617],{"class":1040,"line":1419},[1038,3616,1422],{"class":1086},[1038,3618,1425],{"class":1346},[1158,3620,3621],{"id":3621},"客户端组件",[1024,3623,3624,3625,3628],{},"如果某个组件只应在客户端渲染，你可以为组件添加 ",[1035,3626,3627],{},".client"," 后缀。",[1028,3630,3632],{"className":1030,"code":3631,"filename":1032,"language":1033,"meta":354,"style":354},"| components\u002F\n--| Comments.client.vue\n",[1035,3633,3634,3640],{"__ignoreMap":354},[1038,3635,3636,3638],{"class":1040,"line":1041},[1038,3637,1049],{"class":1048},[1038,3639,1052],{"class":1044},[1038,3641,3642,3645,3647],{"class":1040,"line":1055},[1038,3643,3644],{"class":1044},"--",[1038,3646,1049],{"class":1048},[1038,3648,3649],{"class":1044}," Comments.client.vue\n",[1028,3651,3654],{"className":1448,"code":3652,"filename":3653,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- 此组件只在客户端渲染 -->\n    \u003CComments \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","app\u002Fpages\u002Fexample.vue",[1035,3655,3656,3664,3672,3677,3686,3694],{"__ignoreMap":354},[1038,3657,3658,3660,3662],{"class":1040,"line":1041},[1038,3659,1087],{"class":1086},[1038,3661,1091],{"class":1090},[1038,3663,1094],{"class":1086},[1038,3665,3666,3668,3670],{"class":1040,"line":1055},[1038,3667,1099],{"class":1086},[1038,3669,1102],{"class":1090},[1038,3671,1094],{"class":1086},[1038,3673,3674],{"class":1040,"line":1066},[1038,3675,3676],{"class":2473},"    \u003C!-- 此组件只在客户端渲染 -->\n",[1038,3678,3679,3681,3684],{"class":1040,"line":1119},[1038,3680,1109],{"class":1086},[1038,3682,3683],{"class":1090},"Comments",[1038,3685,1116],{"class":1086},[1038,3687,3688,3690,3692],{"class":1040,"line":1129},[1038,3689,1142],{"class":1086},[1038,3691,1102],{"class":1090},[1038,3693,1094],{"class":1086},[1038,3695,3696,3698,3700],{"class":1040,"line":1139},[1038,3697,1152],{"class":1086},[1038,3699,1091],{"class":1090},[1038,3701,1094],{"class":1086},[1224,3703,3704],{},[1024,3705,3706,3707,3709],{},"此特性仅适用于 Nuxt 自动导入和 ",[1035,3708,1483],{}," 导入。从这些组件的真实路径显式导入，不会将它们转换为仅客户端组件。",[1647,3711,3712],{},[1024,3713,3714,3716,3717,3720,3721,3723,3724,1236],{},[1035,3715,3627],{}," 组件在挂载后才会渲染。要使用 ",[1035,3718,3719],{},"onMounted()"," 访问渲染后的模板，请在 ",[1035,3722,3719],{}," 钩子的回调中添加 ",[1035,3725,3726],{},"await nextTick()",[2022,3728,3729,3735,3738,3741,3748],{"to":356},[1024,3730,3731,3732,3734],{},"你也可以使用 ",[1035,3733,357],{}," 组件实现类似结果。\n:::",[1158,3736,3737],{"id":3737},"服务端组件",[1024,3739,3740],{},"服务端组件允许在你的客户端应用中服务端渲染单个组件。即使在生成静态站点时，也可以在 Nuxt 中使用服务端组件。这使得构建混合动态组件、服务端渲染 HTML 甚至静态标记块的复杂站点成为可能。",[1024,3742,3743,3744,3747],{},"服务端组件可以单独使用，也可以与",[2038,3745,3621],{"href":3746},"\u002Fdocs\u002Fdirectory-structure\u002Fapp\u002Fcomponents#paired-with-a-client-component","配对使用。",[1656,3749,3752,3761,3764,3767,3770,3773,3821,3828,3850,3928,3944,3949,3954,4261,4266,4271,4274,4283,4290,4381,4394,4433,4436,4446,4449,4469,4474,4503,4509,4522,4525,4534,4564,4614,4618,4626,4628,4631,4634,4647,4650,4734,4744,4905,4912,4955,4965,5044,5051],{"title":3750,"video-id":3751},"观看 Learn Vue 关于 Nuxt 服务端组件的视频","u1yyXe86xJM",[3753,3754,3758],"tip",{"icon":3755,"target":3756,"to":3757},"i-lucide-newspaper","_blank","https:\u002F\u002Froe.dev\u002Fblog\u002Fnuxt-server-components",[1024,3759,3760],{},"阅读 Daniel Roe 关于 Nuxt 服务端组件的指南。",[1935,3762,3763],{"id":3763},"独立服务端组件",[1024,3765,3766],{},"独立服务端组件将始终在服务端渲染，也称为 Islands（岛屿）组件。",[1024,3768,3769],{},"当它们的 props 更新时，会触发一个网络请求，在原位更新渲染后的 HTML。",[1024,3771,3772],{},"服务端组件目前是实验性的，要使用它们，你需要在 nuxt.config 中启用 'component islands' 特性：",[1028,3774,3776],{"className":3020,"code":3775,"filename":174,"language":1327,"meta":1328,"style":354},"export default defineNuxtConfig({\n  experimental: {\n    componentIslands: true,\n  },\n})\n",[1035,3777,3778,3790,3799,3811,3815],{"__ignoreMap":354},[1038,3779,3780,3782,3784,3786,3788],{"class":1040,"line":1041},[1038,3781,1336],{"class":1335},[1038,3783,1339],{"class":1335},[1038,3785,1343],{"class":1342},[1038,3787,1242],{"class":1346},[1038,3789,1349],{"class":1086},[1038,3791,3792,3795,3797],{"class":1040,"line":1055},[1038,3793,3794],{"class":1354},"  experimental",[1038,3796,1358],{"class":1086},[1038,3798,2468],{"class":1086},[1038,3800,3801,3804,3806,3809],{"class":1040,"line":1066},[1038,3802,3803],{"class":1354},"    componentIslands",[1038,3805,1358],{"class":1086},[1038,3807,3808],{"class":1400}," true",[1038,3810,1387],{"class":1086},[1038,3812,3813],{"class":1040,"line":1119},[1038,3814,3464],{"class":1086},[1038,3816,3817,3819],{"class":1040,"line":1129},[1038,3818,1422],{"class":1086},[1038,3820,1425],{"class":1346},[1024,3822,3823,3824,3827],{},"现在你可以用 ",[1035,3825,3826],{},".server"," 后缀注册仅服务端组件，并在应用的任何地方自动使用它们。",[1028,3829,3831],{"className":1030,"code":3830,"filename":1032,"language":1033,"meta":354,"style":354},"-| components\u002F\n---| HighlightedMarkdown.server.vue\n",[1035,3832,3833,3841],{"__ignoreMap":354},[1038,3834,3835,3837,3839],{"class":1040,"line":1041},[1038,3836,1045],{"class":1044},[1038,3838,1049],{"class":1048},[1038,3840,1052],{"class":1044},[1038,3842,3843,3845,3847],{"class":1040,"line":1055},[1038,3844,1058],{"class":1044},[1038,3846,1049],{"class":1048},[1038,3848,3849],{"class":1044}," HighlightedMarkdown.server.vue\n",[1028,3851,3853],{"className":1448,"code":3852,"filename":3653,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!--\n      这将自动在服务端渲染，意味着你的 markdown 解析 + 高亮\n      库不会被包含进你的客户端包中。\n     -->\n    \u003CHighlightedMarkdown markdown=\"# Headline\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1035,3854,3855,3863,3871,3876,3881,3886,3891,3912,3920],{"__ignoreMap":354},[1038,3856,3857,3859,3861],{"class":1040,"line":1041},[1038,3858,1087],{"class":1086},[1038,3860,1091],{"class":1090},[1038,3862,1094],{"class":1086},[1038,3864,3865,3867,3869],{"class":1040,"line":1055},[1038,3866,1099],{"class":1086},[1038,3868,1102],{"class":1090},[1038,3870,1094],{"class":1086},[1038,3872,3873],{"class":1040,"line":1066},[1038,3874,3875],{"class":2473},"    \u003C!--\n",[1038,3877,3878],{"class":1040,"line":1119},[1038,3879,3880],{"class":2473},"      这将自动在服务端渲染，意味着你的 markdown 解析 + 高亮\n",[1038,3882,3883],{"class":1040,"line":1129},[1038,3884,3885],{"class":2473},"      库不会被包含进你的客户端包中。\n",[1038,3887,3888],{"class":1040,"line":1139},[1038,3889,3890],{"class":2473},"     -->\n",[1038,3892,3893,3895,3898,3901,3903,3905,3908,3910],{"class":1040,"line":1149},[1038,3894,1109],{"class":1086},[1038,3896,3897],{"class":1090},"HighlightedMarkdown",[1038,3899,3900],{"class":1460}," markdown",[1038,3902,1464],{"class":1086},[1038,3904,1467],{"class":1376},[1038,3906,3907],{"class":1380},"# Headline",[1038,3909,1467],{"class":1376},[1038,3911,1116],{"class":1086},[1038,3913,3914,3916,3918],{"class":1040,"line":1419},[1038,3915,1142],{"class":1086},[1038,3917,1102],{"class":1090},[1038,3919,1094],{"class":1086},[1038,3921,3922,3924,3926],{"class":1040,"line":1619},[1038,3923,1152],{"class":1086},[1038,3925,1091],{"class":1090},[1038,3927,1094],{"class":1086},[1024,3929,3930,3931,3935,3936,3939,3940,3943],{},"服务端组件在底层使用了 ",[2038,3932,3933],{"href":412},[1035,3934,413],{},"，这意味着 ",[1035,3937,3938],{},"lazy"," prop 和 ",[1035,3941,3942],{},"#fallback"," 插槽都会被传递给它。",[1951,3945,3946],{},[1024,3947,3948],{},"服务端组件（和 islands）必须只有一个根元素。（HTML 注释也被视为元素。）",[1951,3950,3951],{},[1024,3952,3953],{},"props 是通过 URL 查询参数传递给服务端组件的，因此受 URL 可能长度的限制，所以注意不要通过 props 向服务端组件传递过多的数据。",[1224,3955,3956,3996,4028,4031],{},[1024,3957,3958,3959,3962,3963,3966,3967,3969,3970,2188,3982,2188,3985,3988,3989,3991,3992,3995],{},"服务端组件 props 来自请求（URL 查询或 body），因此请将它们视为不受信任的输入。Nuxt 会拒绝最有可能被无意泄露的 props：组件未声明的顶层 ",[1035,3960,3961],{},"as","（未声明的 prop 会作为属性渗透到 island 的根元素上），以及（在启用 ",[1035,3964,3965],{},"vue.runtimeCompiler"," 时）props 中任意位置的 ",[1035,3968,1091],{},"。除此之外，避免将你未验证过的 props 喂给动态组件解析（",[1035,3971,3972,3974,3976,3978,3980],{"className":1448,"language":1449,"style":354},[1038,3973,1087],{"class":1086},[1038,3975,1454],{"class":1090},[1038,3977,1457],{"class":1086},[1038,3979,1461],{"class":1460},[1038,3981,1475],{"class":1086},[1035,3983,3984],{},"h()",[1035,3986,3987],{},"resolveDynamicComponent()","，或多态的 ",[1035,3990,3961],{}," \u002F ",[1035,3993,3994],{},"asChild"," prop），因为字符串可以解析为任何已注册的组件或 HTML 元素。",[1024,3997,3998,3999,3991,4002,4005,4006,4027],{},"组件未声明的 props 会作为属性渗透到它的单个根元素上，因此一个根元素是多态组件（例如来自 ",[1035,4000,4001],{},"reka-ui",[1035,4003,4004],{},"@nuxt\u002Fui","）的 island 可能会收到你未绑定的属性。在这样的 island 上设置 ",[1035,4007,4008,4011,4013,4016,4019,4021,4023,4025],{"className":3020,"language":1327,"style":354},[1038,4009,4010],{"class":1342},"defineOptions",[1038,4012,1242],{"class":1346},[1038,4014,4015],{"class":1086},"{",[1038,4017,4018],{"class":1354}," inheritAttrs",[1038,4020,1358],{"class":1086},[1038,4022,1401],{"class":1400},[1038,4024,1533],{"class":1086},[1038,4026,1246],{"class":1346},"，或者声明你接受的 props。",[1024,4029,4030],{},"要根据调用方输入切换组件，请通过导入组件的允许列表来映射判别值，而不是传递原始 prop：",[1028,4032,4034],{"className":1448,"code":4033,"language":1449,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport CardA from '.\u002FCardA.vue'\nimport CardB from '.\u002FCardB.vue'\n\nconst props = defineProps\u003C{ variant: string }>()\nconst allowed: Record\u003Cstring, Component> = { a: CardA, b: CardB }\nconst component = allowed[props.variant] ?? CardA\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ccomponent :is=\"component\" \u002F>\n\u003C\u002Ftemplate>\n",[1035,4035,4036,4056,4078,4095,4111,4115,4146,4192,4215,4223,4227,4235,4253],{"__ignoreMap":354},[1038,4037,4038,4040,4042,4044,4046,4048,4050,4052,4054],{"class":1040,"line":1041},[1038,4039,1087],{"class":1086},[1038,4041,1503],{"class":1090},[1038,4043,1506],{"class":1460},[1038,4045,1509],{"class":1460},[1038,4047,1464],{"class":1086},[1038,4049,1467],{"class":1376},[1038,4051,1327],{"class":1380},[1038,4053,1467],{"class":1376},[1038,4055,1094],{"class":1086},[1038,4057,4058,4060,4063,4065,4068,4070,4072,4074,4076],{"class":1040,"line":1055},[1038,4059,1524],{"class":1335},[1038,4061,4062],{"class":1335}," type",[1038,4064,1527],{"class":1086},[1038,4066,4067],{"class":1346}," Component",[1038,4069,1533],{"class":1086},[1038,4071,1536],{"class":1335},[1038,4073,1377],{"class":1376},[1038,4075,1449],{"class":1380},[1038,4077,1543],{"class":1376},[1038,4079,4080,4082,4085,4088,4090,4093],{"class":1040,"line":1066},[1038,4081,1524],{"class":1335},[1038,4083,4084],{"class":1346}," CardA ",[1038,4086,4087],{"class":1335},"from",[1038,4089,1377],{"class":1376},[1038,4091,4092],{"class":1380},".\u002FCardA.vue",[1038,4094,1543],{"class":1376},[1038,4096,4097,4099,4102,4104,4106,4109],{"class":1040,"line":1119},[1038,4098,1524],{"class":1335},[1038,4100,4101],{"class":1346}," CardB ",[1038,4103,4087],{"class":1335},[1038,4105,1377],{"class":1376},[1038,4107,4108],{"class":1380},".\u002FCardB.vue",[1038,4110,1543],{"class":1376},[1038,4112,4113],{"class":1040,"line":1129},[1038,4114,1549],{"emptyLinePlaceholder":1548},[1038,4116,4117,4119,4122,4124,4127,4130,4134,4136,4140,4143],{"class":1040,"line":1139},[1038,4118,1555],{"class":1554},[1038,4120,4121],{"class":1558}," props",[1038,4123,1562],{"class":1048},[1038,4125,4126],{"class":1342}," defineProps",[1038,4128,4129],{"class":1086},"\u003C{",[1038,4131,4133],{"class":4132},"sP6_D"," variant",[1038,4135,1358],{"class":1048},[1038,4137,4139],{"class":4138},"seQRr"," string",[1038,4141,4142],{"class":1086}," }>",[1038,4144,4145],{"class":1346},"()\n",[1038,4147,4148,4150,4153,4155,4158,4160,4163,4165,4167,4169,4171,4173,4176,4178,4181,4183,4186,4188,4190],{"class":1040,"line":1149},[1038,4149,1555],{"class":1554},[1038,4151,4152],{"class":1558}," allowed",[1038,4154,1358],{"class":1048},[1038,4156,4157],{"class":1044}," Record",[1038,4159,1087],{"class":1086},[1038,4161,4162],{"class":4138},"string",[1038,4164,1404],{"class":1086},[1038,4166,4067],{"class":1044},[1038,4168,1475],{"class":1086},[1038,4170,1562],{"class":1048},[1038,4172,1527],{"class":1086},[1038,4174,4175],{"class":1354}," a",[1038,4177,1358],{"class":1086},[1038,4179,4180],{"class":1346}," CardA",[1038,4182,1404],{"class":1086},[1038,4184,4185],{"class":1354}," b",[1038,4187,1358],{"class":1086},[1038,4189,4101],{"class":1346},[1038,4191,2495],{"class":1086},[1038,4193,4194,4196,4199,4201,4204,4206,4209,4212],{"class":1040,"line":1419},[1038,4195,1555],{"class":1554},[1038,4197,4198],{"class":1558}," component",[1038,4200,1562],{"class":1048},[1038,4202,4203],{"class":1346}," allowed[props",[1038,4205,2482],{"class":1086},[1038,4207,4208],{"class":1346},"variant] ",[1038,4210,4211],{"class":1048},"??",[1038,4213,4214],{"class":1346}," CardA\n",[1038,4216,4217,4219,4221],{"class":1040,"line":1619},[1038,4218,1152],{"class":1086},[1038,4220,1503],{"class":1090},[1038,4222,1094],{"class":1086},[1038,4224,4225],{"class":1040,"line":1639},[1038,4226,1549],{"emptyLinePlaceholder":1548},[1038,4228,4229,4231,4233],{"class":1040,"line":1867},[1038,4230,1087],{"class":1086},[1038,4232,1091],{"class":1090},[1038,4234,1094],{"class":1086},[1038,4236,4237,4239,4241,4243,4245,4247,4249,4251],{"class":1040,"line":1882},[1038,4238,1099],{"class":1086},[1038,4240,1454],{"class":1090},[1038,4242,1605],{"class":1460},[1038,4244,1464],{"class":1086},[1038,4246,1467],{"class":1376},[1038,4248,1454],{"class":1380},[1038,4250,1467],{"class":1376},[1038,4252,1116],{"class":1086},[1038,4254,4255,4257,4259],{"class":1040,"line":1888},[1038,4256,1152],{"class":1086},[1038,4258,1091],{"class":1090},[1038,4260,1094],{"class":1086},[1951,4262,4263],{},[1024,4264,4265],{},"在其它 island 中嵌套 island 时要小心，因为每个 island 都会增加一些额外开销。",[1951,4267,4268],{},[1024,4269,4270],{},"服务端组件和 island 组件的大部分特性（如插槽和客户端组件）只对单文件组件可用。",[1964,4272,4273],{"id":4273},"服务端组件内的客户端组件",[1224,4275,4276],{},[1024,4277,4278,4279,4282],{},"此特性需要在配置中将 ",[1035,4280,4281],{},"experimental.componentIslands.selectiveClient"," 设为 true。",[1024,4284,4285,4286,4289],{},"你可以通过在你希望客户端加载的组件上设置 ",[1035,4287,4288],{},"nuxt-client"," 属性来部分水合一个组件。",[1028,4291,4294],{"className":1448,"code":4292,"filename":4293,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CHighlightedMarkdown markdown=\"# Headline\" \u002F>\n    \u003C!-- Counter 将被加载并在客户端水合 -->\n    \u003CCounter\n      nuxt-client\n      :count=\"5\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002FServerWithClient.vue",[1035,4295,4296,4304,4312,4330,4335,4342,4347,4361,4365,4373],{"__ignoreMap":354},[1038,4297,4298,4300,4302],{"class":1040,"line":1041},[1038,4299,1087],{"class":1086},[1038,4301,1091],{"class":1090},[1038,4303,1094],{"class":1086},[1038,4305,4306,4308,4310],{"class":1040,"line":1055},[1038,4307,1099],{"class":1086},[1038,4309,1102],{"class":1090},[1038,4311,1094],{"class":1086},[1038,4313,4314,4316,4318,4320,4322,4324,4326,4328],{"class":1040,"line":1066},[1038,4315,1109],{"class":1086},[1038,4317,3897],{"class":1090},[1038,4319,3900],{"class":1460},[1038,4321,1464],{"class":1086},[1038,4323,1467],{"class":1376},[1038,4325,3907],{"class":1380},[1038,4327,1467],{"class":1376},[1038,4329,1116],{"class":1086},[1038,4331,4332],{"class":1040,"line":1119},[1038,4333,4334],{"class":2473},"    \u003C!-- Counter 将被加载并在客户端水合 -->\n",[1038,4336,4337,4339],{"class":1040,"line":1129},[1038,4338,1109],{"class":1086},[1038,4340,4341],{"class":1090},"Counter\n",[1038,4343,4344],{"class":1040,"line":1139},[1038,4345,4346],{"class":1460},"      nuxt-client\n",[1038,4348,4349,4352,4354,4356,4359],{"class":1040,"line":1149},[1038,4350,4351],{"class":1460},"      :count",[1038,4353,1464],{"class":1086},[1038,4355,1467],{"class":1376},[1038,4357,4358],{"class":1380},"5",[1038,4360,1864],{"class":1376},[1038,4362,4363],{"class":1040,"line":1419},[1038,4364,2620],{"class":1086},[1038,4366,4367,4369,4371],{"class":1040,"line":1619},[1038,4368,1142],{"class":1086},[1038,4370,1102],{"class":1090},[1038,4372,1094],{"class":1086},[1038,4374,4375,4377,4379],{"class":1040,"line":1639},[1038,4376,1152],{"class":1086},[1038,4378,1091],{"class":1090},[1038,4380,1094],{"class":1086},[1224,4382,4383],{},[1024,4384,4385,4386,4389,4390,4393],{},"这只在服务端组件内有效。客户端组件的插槽仅在 ",[1035,4387,4388],{},"experimental.componentIsland.selectiveClient"," 设为 ",[1035,4391,4392],{},"'deep'"," 时可用，并且由于它们是在服务端渲染的，在客户端并不具有交互性。",[1951,4395,4396],{},[1024,4397,4398,4399,4401,4402,4404,4405,4409,4410,4413,4414,4416,4417,4419,4420,4422,4423,2192,4428,1236],{},"只将 ",[1035,4400,4288],{}," 用于本地的 ",[1035,4403,3595],{}," SFC。像 ",[2038,4406,4407],{"href":396},[1035,4408,397],{}," 这样的内置组件会跳过 island 转换。在客户端导航之后，你可能会看到 ",[1035,4411,4412],{},"Failed to locate Teleport target","，或者链接消失且没有任何错误。请将内置组件包裹在你自己的 ",[1035,4415,3595],{}," 文件中，并在该包装上放置 ",[1035,4418,4288],{},"，或者从内置组件上移除 ",[1035,4421,4288],{},"。参见 ",[2038,4424,4427],{"href":4425,"rel":4426},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F29251",[2042],"#29251",[2038,4429,4432],{"href":4430,"rel":4431},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fnuxt\u002Fissues\u002F26002",[2042],"#26002",[1964,4434,4435],{"id":4435},"服务端组件上下文",[1024,4437,4438,4439,4441,4442,4445],{},"在渲染仅服务端或 island 组件时，",[1035,4440,413],{}," 会发起一个 fetch 请求，并返回 ",[1035,4443,4444],{},"NuxtIslandResponse","。（如果在服务端渲染，这是一个内部请求；如果在客户端导航时渲染，则是你能在网络标签页看到的请求。）",[1024,4447,4448],{},"这意味着：",[2749,4450,4451,4456,4459,4462],{},[2715,4452,4453,4454,1236],{},"会创建一个新的 Vue 应用来服务端创建 ",[1035,4455,4444],{},[2715,4457,4458],{},"在渲染组件时会创建一个新的「island 上下文」。",[2715,4460,4461],{},"你不能从应用的其他部分访问这个「island 上下文」，也不能从 island 组件访问应用其他部分的上下文。换句话说，服务端组件或 island 与应用的其他部分是_隔离_的。",[2715,4463,4464,4465,4468],{},"你的插件在渲染 island 时会再次运行，除非它们设置了 ",[1035,4466,4467],{},"env: { islands: false }","（你可以在对象语法的插件中这样做）。",[1647,4470,4471],{},[1024,4472,4473],{},"渲染 island 组件时不会运行路由中间件。中间件是一种适用于页面的路由概念，而非组件，并非为控制组件渲染而设计。",[1647,4475,4476,4489],{},[1024,4477,4478,4481,4482,4485,4486,4488],{},[1035,4479,4480],{},"useRoute()"," 和其他 ",[1035,4483,4484],{},"vue-router"," 组合式函数不会在仅服务端（island）组件内部跟踪当前页面路由。island 在它自己独立的 Vue 应用中渲染，只基于它的 props（和任何显式上下文）作为 key，这使得 island 能独立于所渲染的页面进行缓存。在 island 内部，",[1035,4487,4480],{}," 反映的是 island 自身的请求，而不是用户所在的页面。",[1024,4490,4491,4492,4494,4495,4498,4499,4502],{},"如果 island 需要关于当前路由的信息，请显式传入——要么作为来自父组件的 props，要么通过 ",[1035,4493,413],{}," 上的 ",[1035,4496,4497],{},"context"," prop（在 island 内通过 ",[1035,4500,4501],{},"nuxtApp.ssrContext.islandContext"," 读取）。",[1024,4504,4505,4506,4508],{},"在 island 组件内，你可以通过 ",[1035,4507,4501],{}," 访问它的 island 上下文。请注意，虽然 island 组件仍被标记为实验性，但此上下文的格式可能会变化。",[1224,4510,4511],{},[1024,4512,4513,4514,4517,4518,4521],{},"插槽可以是交互式的，并被包裹在一个带有 ",[1035,4515,4516],{},"display: contents;"," 的 ",[1035,4519,4520],{},"\u003Cdiv>"," 中。",[1935,4523,4524],{"id":4524},"与客户端组件配对",[1024,4526,4527,4528,4530,4531,4533],{},"在这种情况下，",[1035,4529,3826],{}," + ",[1035,4532,3627],{}," 组件是同一个组件的两个「半部分」，可用于在服务端和客户端实现分离的高级用例。",[1028,4535,4537],{"className":1030,"code":4536,"filename":1032,"language":1033,"meta":354,"style":354},"-| components\u002F\n---| Comments.client.vue\n---| Comments.server.vue\n",[1035,4538,4539,4547,4555],{"__ignoreMap":354},[1038,4540,4541,4543,4545],{"class":1040,"line":1041},[1038,4542,1045],{"class":1044},[1038,4544,1049],{"class":1048},[1038,4546,1052],{"class":1044},[1038,4548,4549,4551,4553],{"class":1040,"line":1055},[1038,4550,1058],{"class":1044},[1038,4552,1049],{"class":1048},[1038,4554,3649],{"class":1044},[1038,4556,4557,4559,4561],{"class":1040,"line":1066},[1038,4558,1058],{"class":1044},[1038,4560,1049],{"class":1048},[1038,4562,4563],{"class":1044}," Comments.server.vue\n",[1028,4565,4567],{"className":1448,"code":4566,"filename":3653,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- 此组件会在服务端渲染 Comments.server，然后在浏览器中挂载后渲染 Comments.client -->\n    \u003CComments \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1035,4568,4569,4577,4585,4590,4598,4606],{"__ignoreMap":354},[1038,4570,4571,4573,4575],{"class":1040,"line":1041},[1038,4572,1087],{"class":1086},[1038,4574,1091],{"class":1090},[1038,4576,1094],{"class":1086},[1038,4578,4579,4581,4583],{"class":1040,"line":1055},[1038,4580,1099],{"class":1086},[1038,4582,1102],{"class":1090},[1038,4584,1094],{"class":1086},[1038,4586,4587],{"class":1040,"line":1066},[1038,4588,4589],{"class":2473},"    \u003C!-- 此组件会在服务端渲染 Comments.server，然后在浏览器中挂载后渲染 Comments.client -->\n",[1038,4591,4592,4594,4596],{"class":1040,"line":1119},[1038,4593,1109],{"class":1086},[1038,4595,3683],{"class":1090},[1038,4597,1116],{"class":1086},[1038,4599,4600,4602,4604],{"class":1040,"line":1129},[1038,4601,1142],{"class":1086},[1038,4603,1102],{"class":1090},[1038,4605,1094],{"class":1086},[1038,4607,4608,4610,4612],{"class":1040,"line":1139},[1038,4609,1152],{"class":1086},[1038,4611,1091],{"class":1090},[1038,4613,1094],{"class":1086},[1158,4615,4617],{"id":4616},"nuxt-内置组件","Nuxt 内置组件",[1024,4619,4620,4621,2192,4623,4625],{},"Nuxt 提供了许多内置组件，包括 ",[1035,4622,357],{},[1035,4624,361],{},"。你可以在 API 文档中阅读更多关于它们的内容。",[2022,4627],{"to":818},[1158,4629,4630],{"id":4630},"库作者",[1024,4632,4633],{},"制作具有自动 tree-shaking 和组件注册的 Vue 组件库非常简单。✨",[1024,4635,4636,4637,4639,4640,4646],{},"你可以使用 ",[1035,4638,3362],{}," 提供的 ",[2038,4641,4643],{"href":4642},"\u002Fdocs\u002Fapi\u002Fkit\u002Fcomponents#addcomponentsdir",[1035,4644,4645],{},"addComponentsDir"," 方法，在你的 Nuxt 模块中注册你的组件目录。",[1024,4648,4649],{},"设想一个这样的目录结构：",[1028,4651,4653],{"className":1030,"code":4652,"filename":1032,"language":1033,"meta":354,"style":354},"-| node_modules\u002F\n---| awesome-ui\u002F\n-----| components\u002F\n-------| Alert.vue\n-------| Button.vue\n-----| nuxt.ts\n-| pages\u002F\n---| index.vue\n-| nuxt.config.ts\n",[1035,4654,4655,4664,4673,4681,4690,4698,4707,4716,4725],{"__ignoreMap":354},[1038,4656,4657,4659,4661],{"class":1040,"line":1041},[1038,4658,1045],{"class":1044},[1038,4660,1049],{"class":1048},[1038,4662,4663],{"class":1044}," node_modules\u002F\n",[1038,4665,4666,4668,4670],{"class":1040,"line":1055},[1038,4667,1058],{"class":1044},[1038,4669,1049],{"class":1048},[1038,4671,4672],{"class":1044}," awesome-ui\u002F\n",[1038,4674,4675,4677,4679],{"class":1040,"line":1066},[1038,4676,1190],{"class":1044},[1038,4678,1049],{"class":1048},[1038,4680,1052],{"class":1044},[1038,4682,4683,4685,4687],{"class":1040,"line":1119},[1038,4684,1200],{"class":1044},[1038,4686,1049],{"class":1048},[1038,4688,4689],{"class":1044}," Alert.vue\n",[1038,4691,4692,4694,4696],{"class":1040,"line":1129},[1038,4693,1200],{"class":1044},[1038,4695,1049],{"class":1048},[1038,4697,1205],{"class":1044},[1038,4699,4700,4702,4704],{"class":1040,"line":1139},[1038,4701,1190],{"class":1044},[1038,4703,1049],{"class":1048},[1038,4705,4706],{"class":1044}," nuxt.ts\n",[1038,4708,4709,4711,4713],{"class":1040,"line":1149},[1038,4710,1045],{"class":1044},[1038,4712,1049],{"class":1048},[1038,4714,4715],{"class":1044}," pages\u002F\n",[1038,4717,4718,4720,4722],{"class":1040,"line":1419},[1038,4719,1058],{"class":1044},[1038,4721,1049],{"class":1048},[1038,4723,4724],{"class":1044}," index.vue\n",[1038,4726,4727,4729,4731],{"class":1040,"line":1619},[1038,4728,1045],{"class":1044},[1038,4730,1049],{"class":1048},[1038,4732,4733],{"class":1044}," nuxt.config.ts\n",[1024,4735,4736,4737,4740,4741,4743],{},"然后在 ",[1035,4738,4739],{},"awesome-ui\u002Fnuxt.ts"," 中你可以使用 ",[1035,4742,4645],{}," 钩子：",[1028,4745,4747],{"className":3020,"code":4746,"language":1327,"meta":1328,"style":354},"import { addComponentsDir, createResolver, defineNuxtModule } from '@nuxt\u002Fkit'\n\nexport default defineNuxtModule({\n  setup () {\n    const resolver = createResolver(import.meta.url)\n\n    \u002F\u002F 将 .\u002Fcomponents 目录添加到列表中\n    addComponentsDir({\n      path: resolver.resolve('.\u002Fcomponents'),\n      prefix: 'awesome',\n    })\n  },\n})\n",[1035,4748,4749,4777,4781,4793,4801,4829,4833,4838,4847,4873,4889,4895,4899],{"__ignoreMap":354},[1038,4750,4751,4753,4755,4758,4760,4763,4765,4767,4769,4771,4773,4775],{"class":1040,"line":1041},[1038,4752,1524],{"class":1335},[1038,4754,1527],{"class":1086},[1038,4756,4757],{"class":1346}," addComponentsDir",[1038,4759,1404],{"class":1086},[1038,4761,4762],{"class":1346}," createResolver",[1038,4764,1404],{"class":1086},[1038,4766,3353],{"class":1346},[1038,4768,1533],{"class":1086},[1038,4770,1536],{"class":1335},[1038,4772,1377],{"class":1376},[1038,4774,3362],{"class":1380},[1038,4776,1543],{"class":1376},[1038,4778,4779],{"class":1040,"line":1055},[1038,4780,1549],{"emptyLinePlaceholder":1548},[1038,4782,4783,4785,4787,4789,4791],{"class":1040,"line":1066},[1038,4784,1336],{"class":1335},[1038,4786,1339],{"class":1335},[1038,4788,3353],{"class":1342},[1038,4790,1242],{"class":1346},[1038,4792,1349],{"class":1086},[1038,4794,4795,4797,4799],{"class":1040,"line":1119},[1038,4796,3386],{"class":3385},[1038,4798,2465],{"class":1086},[1038,4800,2468],{"class":1086},[1038,4802,4803,4806,4809,4811,4813,4815,4817,4819,4822,4824,4827],{"class":1040,"line":1129},[1038,4804,4805],{"class":1554},"    const",[1038,4807,4808],{"class":1558}," resolver",[1038,4810,1562],{"class":1048},[1038,4812,4762],{"class":1342},[1038,4814,1242],{"class":1354},[1038,4816,1524],{"class":1335},[1038,4818,2482],{"class":1086},[1038,4820,4821],{"class":1558},"meta",[1038,4823,2482],{"class":1086},[1038,4825,4826],{"class":1346},"url",[1038,4828,1425],{"class":1354},[1038,4830,4831],{"class":1040,"line":1139},[1038,4832,1549],{"emptyLinePlaceholder":1548},[1038,4834,4835],{"class":1040,"line":1149},[1038,4836,4837],{"class":2473},"    \u002F\u002F 将 .\u002Fcomponents 目录添加到列表中\n",[1038,4839,4840,4843,4845],{"class":1040,"line":1419},[1038,4841,4842],{"class":1342},"    addComponentsDir",[1038,4844,1242],{"class":1354},[1038,4846,1349],{"class":1086},[1038,4848,4849,4851,4853,4855,4857,4860,4862,4864,4867,4869,4871],{"class":1040,"line":1619},[1038,4850,1371],{"class":1354},[1038,4852,1358],{"class":1086},[1038,4854,4808],{"class":1346},[1038,4856,2482],{"class":1086},[1038,4858,4859],{"class":1342},"resolve",[1038,4861,1242],{"class":1354},[1038,4863,1384],{"class":1376},[1038,4865,4866],{"class":1380},".\u002Fcomponents",[1038,4868,1384],{"class":1376},[1038,4870,1246],{"class":1354},[1038,4872,1387],{"class":1086},[1038,4874,4875,4878,4880,4882,4885,4887],{"class":1040,"line":1639},[1038,4876,4877],{"class":1354},"      prefix",[1038,4879,1358],{"class":1086},[1038,4881,1377],{"class":1376},[1038,4883,4884],{"class":1380},"awesome",[1038,4886,1384],{"class":1376},[1038,4888,1387],{"class":1086},[1038,4890,4891,4893],{"class":1040,"line":1867},[1038,4892,3457],{"class":1086},[1038,4894,1425],{"class":1354},[1038,4896,4897],{"class":1040,"line":1882},[1038,4898,3464],{"class":1086},[1038,4900,4901,4903],{"class":1040,"line":1888},[1038,4902,1422],{"class":1086},[1038,4904,1425],{"class":1346},[1024,4906,4907,4908,4911],{},"就是这样！现在在你的项目中，你可以将 UI 库作为 Nuxt 模块导入到 ",[1035,4909,4910],{},"nuxt.config"," 文件中：",[1028,4913,4915],{"className":3020,"code":4914,"filename":174,"language":1327,"meta":1328,"style":354},"export default defineNuxtConfig({\n  modules: ['awesome-ui\u002Fnuxt'],\n})\n",[1035,4916,4917,4929,4949],{"__ignoreMap":354},[1038,4918,4919,4921,4923,4925,4927],{"class":1040,"line":1041},[1038,4920,1336],{"class":1335},[1038,4922,1339],{"class":1335},[1038,4924,1343],{"class":1342},[1038,4926,1242],{"class":1346},[1038,4928,1349],{"class":1086},[1038,4930,4931,4934,4936,4938,4940,4943,4945,4947],{"class":1040,"line":1055},[1038,4932,4933],{"class":1354},"  modules",[1038,4935,1358],{"class":1086},[1038,4937,3590],{"class":1346},[1038,4939,1384],{"class":1376},[1038,4941,4942],{"class":1380},"awesome-ui\u002Fnuxt",[1038,4944,1384],{"class":1376},[1038,4946,3600],{"class":1346},[1038,4948,1387],{"class":1086},[1038,4950,4951,4953],{"class":1040,"line":1066},[1038,4952,1422],{"class":1086},[1038,4954,1425],{"class":1346},[1024,4956,4957,4958,4960,4961,4964],{},"... 然后就可以在 ",[1035,4959,1494],{}," 中直接使用模块组件（带有 ",[1035,4962,4963],{},"awesome-"," 前缀）：",[1028,4966,4968],{"className":1448,"code":4967,"language":1449,"meta":354,"style":354},"\u003Ctemplate>\n  \u003Cdiv>\n    我的 \u003CAwesomeButton>UI button\u003C\u002FAwesomeButton>！\n    \u003Cawesome-alert>这里有一个警告！\u003C\u002Fawesome-alert>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1035,4969,4970,4978,4986,5010,5028,5036],{"__ignoreMap":354},[1038,4971,4972,4974,4976],{"class":1040,"line":1041},[1038,4973,1087],{"class":1086},[1038,4975,1091],{"class":1090},[1038,4977,1094],{"class":1086},[1038,4979,4980,4982,4984],{"class":1040,"line":1055},[1038,4981,1099],{"class":1086},[1038,4983,1102],{"class":1090},[1038,4985,1094],{"class":1086},[1038,4987,4988,4991,4993,4996,4998,5001,5003,5005,5007],{"class":1040,"line":1066},[1038,4989,4990],{"class":1346},"    我的 ",[1038,4992,1087],{"class":1086},[1038,4994,4995],{"class":1090},"AwesomeButton",[1038,4997,1475],{"class":1086},[1038,4999,5000],{"class":1346},"UI button",[1038,5002,1152],{"class":1086},[1038,5004,4995],{"class":1090},[1038,5006,1475],{"class":1086},[1038,5008,5009],{"class":1346},"！\n",[1038,5011,5012,5014,5017,5019,5022,5024,5026],{"class":1040,"line":1119},[1038,5013,1109],{"class":1086},[1038,5015,5016],{"class":1090},"awesome-alert",[1038,5018,1475],{"class":1086},[1038,5020,5021],{"class":1346},"这里有一个警告！",[1038,5023,1152],{"class":1086},[1038,5025,5016],{"class":1090},[1038,5027,1094],{"class":1086},[1038,5029,5030,5032,5034],{"class":1040,"line":1129},[1038,5031,1142],{"class":1086},[1038,5033,1102],{"class":1090},[1038,5035,1094],{"class":1086},[1038,5037,5038,5040,5042],{"class":1040,"line":1139},[1038,5039,1152],{"class":1086},[1038,5041,1091],{"class":1090},[1038,5043,1094],{"class":1086},[1024,5045,5046,5047,5050],{},"它会自动仅在使用时导入组件，并且在你更新 ",[1035,5048,5049],{},"node_modules\u002Fawesome-ui\u002Fcomponents\u002F"," 中的组件时还支持 HMR。",[5052,5053],"link-example",{"to":5054},"\u002Fdocs\u002Fexamples\u002Ffeatures\u002Fauto-imports",[5056,5057,5058],"style",{},"html pre.shiki code .sJK67, html code.shiki .sJK67{--shiki-light:#E2931D;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html pre.shiki code .sXPRQ, html code.shiki .sXPRQ{--shiki-light:#39ADB5;--shiki-default:#F97583;--shiki-dark:#89DDFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sF54B, html code.shiki .sF54B{--shiki-light:#39ADB5;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .s6g6u, html code.shiki .s6g6u{--shiki-light:#E53935;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .se1bN, html code.shiki .se1bN{--shiki-light:#E53935;--shiki-light-font-style:inherit;--shiki-default:#FDAEB7;--shiki-default-font-style:italic;--shiki-dark:#F07178;--shiki-dark-font-style:inherit}html pre.shiki code .szyBz, html code.shiki .szyBz{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .srJn9, html code.shiki .srJn9{--shiki-light:#6182B8;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .smVNa, html code.shiki .smVNa{--shiki-light:#90A4AE;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .sOtFm, html code.shiki .sOtFm{--shiki-light:#E53935;--shiki-default:#E1E4E8;--shiki-dark:#F07178}html pre.shiki code .s0jeK, html code.shiki .s0jeK{--shiki-light:#39ADB5;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .s-Aze, html code.shiki .s-Aze{--shiki-light:#91B859;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .si1Qm, html code.shiki .si1Qm{--shiki-light:#FF5370;--shiki-default:#79B8FF;--shiki-dark:#FF9CAC}html pre.shiki code .sXjFp, html code.shiki .sXjFp{--shiki-light:#9C3EDA;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .sV7Px, html code.shiki .sV7Px{--shiki-light:#9C3EDA;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sJTDI, html code.shiki .sJTDI{--shiki-light:#90A4AE;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sZqJ9, html code.shiki .sZqJ9{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .syA7L, html code.shiki .syA7L{--shiki-light:#E53935;--shiki-default:#B392F0;--shiki-dark:#F07178}html pre.shiki code .sP6_D, html code.shiki .sP6_D{--shiki-light:#E53935;--shiki-default:#FFAB70;--shiki-dark:#F07178}html pre.shiki code .seQRr, html code.shiki .seQRr{--shiki-light:#E2931D;--shiki-default:#79B8FF;--shiki-dark:#FFCB6B}",{"title":354,"searchDepth":1066,"depth":1066,"links":5060},[5061,5062,5063,5064,5077,5078,5079,5080,5081,5082],{"id":1160,"depth":1055,"text":1160},{"id":1442,"depth":1055,"text":1442},{"id":1719,"depth":1055,"text":1719},{"id":1923,"depth":1055,"text":1924,"children":5065},[5066,5075,5076],{"id":1937,"depth":1066,"text":1937,"children":5067},[5068,5069,5070,5071,5072,5073,5074],{"id":1966,"depth":1119,"text":1966},{"id":2049,"depth":1119,"text":2049},{"id":2119,"depth":1119,"text":2119},{"id":2210,"depth":1119,"text":2210},{"id":2286,"depth":1119,"text":2286},{"id":2351,"depth":1119,"text":2351},{"id":1948,"depth":1119,"text":1948},{"id":2561,"depth":1066,"text":2561},{"id":2707,"depth":1066,"text":2707},{"id":2776,"depth":1055,"text":2776},{"id":3011,"depth":1055,"text":3011},{"id":3315,"depth":1055,"text":3316},{"id":3523,"depth":1055,"text":3523},{"id":3621,"depth":1055,"text":3621},{"id":3737,"depth":1055,"text":3737},"md",{"head":5085},{"title":5086},"components\u002F","[object Object]",{"title":90,"description":91},"docs\u002F2.directory-structure\u002F1.app\u002F1.components","A5I52G0dlsolPsauVpoaOqIHvnMKhDFxGGwgZTF2PBM",1785179850396]