`、`meta`、`link` 标签。`useHead()` 接受通用的 head 描述对象，适合自定义标签；`useSeoMeta()` 提供了类型安全的常见 SEO 字段（如 `title`、`description`、`ogImage`），写法更简洁且不容易拼错属性名。在 SSR 模式下，这些标签会在服务端渲染阶段就写入 HTML，对 SEO 和社交分享预览生效；如果在 SPA 模式下使用，head 标签是在客户端通过 JS 修改的，爬虫可能看不到。","basicInterviewQuestion":"`useHead()` 和 `useSeoMeta()` 有什么区别？分别适合什么场景？","basicInterviewAnswer":"`useHead()` 接受通用的 head 描述对象，可以设置任意 `<head>` 标签，适合自定义标签或不在常见 SEO 字段范围内的内容；`useSeoMeta()` 提供了类型安全的常见 SEO 字段（如 `title`、`description`、`ogImage`），写法更简洁，且不容易拼错属性名，适合日常的页面标题和社交分享元信息设置。"},"en":{"title":"useHead and SEO","summaryMarkdown":"`useHead()` and `useSeoMeta()` are composables for setting `<head>` content from a component or page — `<title>`, `meta`, `link` tags. `useHead()` takes a generic head description object suited to custom tags; `useSeoMeta()` offers type-safe common SEO fields (`title`, `description`, `ogImage`) with a more concise syntax and less risk of misspelled keys. In SSR mode these tags are written into the HTML during server rendering, so they work for SEO and social preview cards; in SPA mode the head tags are modified via JS on the client, and crawlers may never see them.","basicInterviewQuestion":"What's the difference between `useHead()` and `useSeoMeta()`, and when should each be used?","basicInterviewAnswer":"`useHead()` takes a generic head description object and can set any `<head>` tag, suiting custom tags or content outside common SEO fields. `useSeoMeta()` provides type-safe common SEO fields — `title`, `description`, `ogImage` — with more concise syntax and less risk of misspelled keys, suiting everyday page titles and social-sharing metadata."}},"parentId":"160893f2-c442-4089-8ebd-ef5761eda0c9","sortOrder":340,"category":"core","isRoot":false,"summaryMarkdown":"`useHead()` 和 `useSeoMeta()` 是 Nuxt 提供的组合式函数，用于在组件或页面里设置 `<head>` 内容，比如 `<title>`、`meta`、`link` 标签。`useHead()` 接受通用的 head 描述对象，适合自定义标签；`useSeoMeta()` 提供了类型安全的常见 SEO 字段（如 `title`、`description`、`ogImage`），写法更简洁且不容易拼错属性名。在 SSR 模式下，这些标签会在服务端渲染阶段就写入 HTML，对 SEO 和社交分享预览生效；如果在 SPA 模式下使用，head 标签是在客户端通过 JS 修改的，爬虫可能看不到。","basicInterviewQuestion":"`useHead()` 和 `useSeoMeta()` 有什么区别？分别适合什么场景？","basicInterviewAnswer":"`useHead()` 接受通用的 head 描述对象，可以设置任意 `<head>` 标签，适合自定义标签或不在常见 SEO 字段范围内的内容；`useSeoMeta()` 提供了类型安全的常见 SEO 字段（如 `title`、`description`、`ogImage`），写法更简洁，且不容易拼错属性名，适合日常的页面标题和社交分享元信息设置。","isFavorite":false,"nodeStatus":"unknown"},{"id":"138f15f8-34c5-412a-b315-ea69938cf0a4","slug":"modules-build","title":"Modules 与构建","localizedContent":{"zh-CN":{"title":"Modules 与构建","summaryMarkdown":"Modules 与构建是 Nuxt 围绕“如何扩展框架能力”和“如何控制构建期行为”的能力域，覆盖模块系统、`nuxt.config`、layers、自动导入和 DevTools。模块是 Nuxt 生态扩展功能的标准方式（比如集成 UI 库、状态管理、SEO 工具），而 `nuxt.config` 是几乎所有框架行为的统一入口，理解这一层有助于判断“某个功能应该装模块还是改配置”。","basicInterviewQuestion":"Nuxt 模块、`nuxt.config`、layers 和自动导入这几个机制，分别解决什么问题？","basicInterviewAnswer":"模块（modules）通过 `defineNuxtModule` 封装可复用的功能扩展，通常会注册插件、组件、composables 或修改构建配置；`nuxt.config` 是项目级的中心配置文件，集中管理模块列表、运行时配置、渲染规则等；layers 通过 `extends` 让多个项目共享一套基础配置、组件和页面，实现跨项目复用；自动导入则是 Nuxt 的编译时机制，自动发现并按需导入 composables、工具函数和 Vue API，无需手写 import 语句。这几个机制共同构成了 Nuxt“约定优于配置”且可扩展的架构。"},"en":{"title":"Modules and Build","summaryMarkdown":"Modules and build is the capability area for extending the framework and controlling build-time behavior — covering the module system, `nuxt.config`, layers, auto-imports, and DevTools. Modules are the standard way the Nuxt ecosystem adds functionality (UI libraries, state management, SEO tooling), while `nuxt.config` is the central entry point for almost all framework behavior; understanding this area helps decide whether a feature should be a module or a config change.","basicInterviewQuestion":"What problems do Nuxt modules, `nuxt.config`, layers, and auto-imports each solve?","basicInterviewAnswer":"Modules wrap reusable functionality via `defineNuxtModule`, typically registering plugins, components, composables, or modifying build config. `nuxt.config` is the project's central configuration file managing the module list, runtime config, rendering rules, and more. Layers, via `extends`, let multiple projects share a base configuration, components, and pages for cross-project reuse. Auto-imports is a compile-time mechanism that discovers and imports composables, utilities, and Vue APIs on demand without manual `import` statements. Together these mechanisms form Nuxt's convention-over-configuration, extensible architecture."}},"parentId":"16da00ce-53b8-4c9a-b626-cf9a62046990","sortOrder":350,"category":"core","isRoot":false,"summaryMarkdown":"Modules 与构建是 Nuxt 围绕“如何扩展框架能力”和“如何控制构建期行为”的能力域，覆盖模块系统、`nuxt.config`、layers、自动导入和 DevTools。模块是 Nuxt 生态扩展功能的标准方式（比如集成 UI 库、状态管理、SEO 工具），而 `nuxt.config` 是几乎所有框架行为的统一入口，理解这一层有助于判断“某个功能应该装模块还是改配置”。","basicInterviewQuestion":"Nuxt 模块、`nuxt.config`、layers 和自动导入这几个机制，分别解决什么问题？","basicInterviewAnswer":"模块（modules）通过 `defineNuxtModule` 封装可复用的功能扩展，通常会注册插件、组件、composables 或修改构建配置；`nuxt.config` 是项目级的中心配置文件，集中管理模块列表、运行时配置、渲染规则等；layers 通过 `extends` 让多个项目共享一套基础配置、组件和页面，实现跨项目复用；自动导入则是 Nuxt 的编译时机制，自动发现并按需导入 composables、工具函数和 Vue API，无需手写 import 语句。这几个机制共同构成了 Nuxt“约定优于配置”且可扩展的架构。","isFavorite":false,"nodeStatus":"unknown"},{"id":"92f80df7-93ff-43c0-9630-cfc85cc26d57","slug":"modules","title":"modules","localizedContent":{"zh-CN":{"title":"modules","summaryMarkdown":"Modules 是 Nuxt 的官方扩展机制，在 `nuxt.config` 的 `modules` 数组中声明（比如 `@nuxt/image`、`@pinia/nuxt`），由 Nuxt 在构建时按声明顺序加载并执行。一个模块可以注册组件、composable、插件、构建钩子，相当于把一组相关功能打包成可插拔的单元。开发者自己也可以用 `defineNuxtModule()` 编写模块，但日常使用更多是安装并配置社区模块。容易出错的是模块加载顺序会影响某些钩子的执行结果，部分模块对顺序敏感（比如需要在某个模块之后注册）。","basicInterviewQuestion":"如何在 Nuxt 项目中安装并启用一个模块？","basicInterviewAnswer":"先用包管理器安装该模块的 npm 包（例如 `npm install @nuxtjs/tailwindcss`），然后在 `nuxt.config` 的 `modules` 数组中加入模块名字符串（`'@nuxtjs/tailwindcss'`）。Nuxt 在启动时会按数组顺序依次加载并执行每个模块的 `setup` 逻辑，模块可能会自动注册组件、composables、插件或修改构建配置，无需额外手动配置。"},"en":{"title":"Modules","summaryMarkdown":"Modules are Nuxt's official extension mechanism, declared in the `modules` array of `nuxt.config` (e.g. `@nuxt/image`, `@pinia/nuxt`), and loaded by Nuxt at build time in declaration order. A module can register components, composables, plugins, and build hooks — packaging related functionality into a pluggable unit. Developers can also author modules with `defineNuxtModule()`, though day-to-day usage is mostly installing and configuring community modules. A common pitfall is that module load order affects certain hooks, and some modules are order-sensitive, expecting to be registered after another module.","basicInterviewQuestion":"How do you install and enable a module in a Nuxt project?","basicInterviewAnswer":"First install the module's npm package with a package manager (e.g. `npm install @nuxtjs/tailwindcss`), then add the module name string (`'@nuxtjs/tailwindcss'`) to the `modules` array in `nuxt.config`. On startup, Nuxt loads and runs each module's `setup` logic in array order; a module may automatically register components, composables, plugins, or modify the build config without further manual setup."}},"parentId":"138f15f8-34c5-412a-b315-ea69938cf0a4","sortOrder":360,"category":"common","isRoot":false,"summaryMarkdown":"Modules 是 Nuxt 的官方扩展机制，在 `nuxt.config` 的 `modules` 数组中声明（比如 `@nuxt/image`、`@pinia/nuxt`），由 Nuxt 在构建时按声明顺序加载并执行。一个模块可以注册组件、composable、插件、构建钩子，相当于把一组相关功能打包成可插拔的单元。开发者自己也可以用 `defineNuxtModule()` 编写模块，但日常使用更多是安装并配置社区模块。容易出错的是模块加载顺序会影响某些钩子的执行结果，部分模块对顺序敏感（比如需要在某个模块之后注册）。","basicInterviewQuestion":"如何在 Nuxt 项目中安装并启用一个模块？","basicInterviewAnswer":"先用包管理器安装该模块的 npm 包（例如 `npm install @nuxtjs/tailwindcss`），然后在 `nuxt.config` 的 `modules` 数组中加入模块名字符串（`'@nuxtjs/tailwindcss'`）。Nuxt 在启动时会按数组顺序依次加载并执行每个模块的 `setup` 逻辑，模块可能会自动注册组件、composables、插件或修改构建配置，无需额外手动配置。","isFavorite":false,"nodeStatus":"unknown"},{"id":"6e450b73-1fc8-4ca0-984e-d38e4ae28f0b","slug":"nuxt-config","title":"nuxt.config","localizedContent":{"zh-CN":{"title":"nuxt.config","summaryMarkdown":"`nuxt.config.ts` 是 Nuxt 项目的中央配置文件，用 `defineNuxtConfig()` 包裹一个配置对象，几乎所有框架行为——模块、`runtimeConfig`、`routeRules`、构建选项、`css`、`app` 元信息——都通过它配置。它在构建时被读取，修改后通常需要重启开发服务器才能生效。","basicInterviewQuestion":"`nuxt.config.ts` 的基本结构是什么？常见的顶层配置项有哪些？","basicInterviewAnswer":"```ts\nexport default defineNuxtConfig({\n modules: ['@nuxtjs/tailwindcss'],\n css: ['~/assets/main.css'],\n app: {\n head: {\n title: 'My App'\n }\n }\n})\n```\n\n`nuxt.config.ts` 默认导出一个由 `defineNuxtConfig` 包裹的配置对象，常见顶层字段包括：`modules`（要启用的模块列表）、`css`（全局样式文件）、`app`（应用级配置，如 head 标签、页面过渡）、`runtimeConfig`（运行时变量）、`routeRules`（按路径的渲染规则）等。`defineNuxtConfig` 主要提供类型提示，本身不改变配置内容。"},"en":{"title":"nuxt.config","summaryMarkdown":"`nuxt.config.ts` is a Nuxt project's central configuration file, wrapping a config object with `defineNuxtConfig()`. Almost every framework behavior — modules, `runtimeConfig`, `routeRules`, build options, `css`, `app` metadata — is configured through it. It is read at build time, and changes usually require restarting the dev server to take effect.\n\n```ts\nexport default defineNuxtConfig({\n modules: ['@nuxt/image'],\n css: ['~/assets/main.css'],\n app: {\n head: {\n title: 'My App'\n }\n }\n})\n```\n\n这里同时声明了一个模块、一个全局样式文件和默认的页面标题。","basicInterviewQuestion":"What's the basic structure of `nuxt.config.ts`, and what are common top-level config fields?","basicInterviewAnswer":"```ts\nexport default defineNuxtConfig({\n modules: ['@nuxtjs/tailwindcss'],\n css: ['~/assets/main.css'],\n app: {\n head: {\n title: 'My App'\n }\n }\n})\n```\n\n`nuxt.config.ts` default-exports a config object wrapped in `defineNuxtConfig`. Common top-level fields include `modules` (modules to enable), `css` (global stylesheets), `app` (app-level config like head tags and page transitions), `runtimeConfig` (runtime variables), and `routeRules` (per-path rendering rules). `defineNuxtConfig` mainly provides type hints and doesn't change the config content itself."}},"parentId":"138f15f8-34c5-412a-b315-ea69938cf0a4","sortOrder":370,"category":"core","isRoot":false,"summaryMarkdown":"`nuxt.config.ts` 是 Nuxt 项目的中央配置文件，用 `defineNuxtConfig()` 包裹一个配置对象，几乎所有框架行为——模块、`runtimeConfig`、`routeRules`、构建选项、`css`、`app` 元信息——都通过它配置。它在构建时被读取，修改后通常需要重启开发服务器才能生效。","basicInterviewQuestion":"`nuxt.config.ts` 的基本结构是什么？常见的顶层配置项有哪些？","basicInterviewAnswer":"```ts\nexport default defineNuxtConfig({\n modules: ['@nuxtjs/tailwindcss'],\n css: ['~/assets/main.css'],\n app: {\n head: {\n title: 'My App'\n }\n }\n})\n```\n\n`nuxt.config.ts` 默认导出一个由 `defineNuxtConfig` 包裹的配置对象，常见顶层字段包括：`modules`（要启用的模块列表）、`css`（全局样式文件）、`app`（应用级配置，如 head 标签、页面过渡）、`runtimeConfig`（运行时变量）、`routeRules`（按路径的渲染规则）等。`defineNuxtConfig` 主要提供类型提示，本身不改变配置内容。","isFavorite":false,"nodeStatus":"unknown"},{"id":"75db370e-881a-4116-941d-ba3411f11144","slug":"layers","title":"layers","localizedContent":{"zh-CN":{"title":"layers","summaryMarkdown":"Layers 是 Nuxt 的配置和代码复用机制，通过在 `nuxt.config` 里设置 `extends`，一个 Nuxt 项目可以继承另一个项目（或一个共享的 layer 包）的 `pages/`、`components/`、`composables/`、配置等。多个项目可以共享同一套基础 layer，再各自覆盖部分文件，常用于多租户产品或团队内部的脚手架基座。需要注意的是子项目里同名文件会覆盖 layer 中的文件，理解这种覆盖优先级是排查“为什么改了基础 layer 不生效”的关键。","basicInterviewQuestion":"layers 机制的作用是什么？如何在一个项目中引用另一个项目作为基础 layer？","basicInterviewAnswer":"layers 允许一个 Nuxt 项目通过 `nuxt.config` 的 `extends` 字段继承另一个项目（或 npm 包）的配置、组件、页面、composables、插件等，从而实现跨项目的代码与配置复用。例如 `extends: ['../base']` 表示当前项目继承本地 `../base` 目录下的 Nuxt 项目结构；也可以指向一个发布到 npm 的 layer 包。"},"en":{"title":"Layers","summaryMarkdown":"Layers are Nuxt's mechanism for configuration and code reuse: by setting `extends` in `nuxt.config`, a project can inherit `pages/`, `components/`, `composables/`, and config from another project or a shared layer package. Multiple projects can share a base layer and override specific files, which is common for multi-tenant products or an internal team scaffold. A key thing to know is that a file in the extending project overrides the same-named file from the layer — understanding this override priority is essential when debugging \"why didn't my change to the base layer take effect\".","basicInterviewQuestion":"What does the layers mechanism do, and how does a project reference another project as a base layer?","basicInterviewAnswer":"Layers let a Nuxt project inherit another project's (or npm package's) config, components, pages, composables, and plugins via the `extends` field in `nuxt.config`, enabling cross-project code and config reuse. For example, `extends: ['../base']` makes the current project inherit the Nuxt project structure in the local `../base` directory; it can also point to a layer package published to npm."}},"parentId":"138f15f8-34c5-412a-b315-ea69938cf0a4","sortOrder":380,"category":"rare","isRoot":false,"summaryMarkdown":"Layers 是 Nuxt 的配置和代码复用机制，通过在 `nuxt.config` 里设置 `extends`，一个 Nuxt 项目可以继承另一个项目（或一个共享的 layer 包）的 `pages/`、`components/`、`composables/`、配置等。多个项目可以共享同一套基础 layer，再各自覆盖部分文件，常用于多租户产品或团队内部的脚手架基座。需要注意的是子项目里同名文件会覆盖 layer 中的文件，理解这种覆盖优先级是排查“为什么改了基础 layer 不生效”的关键。","basicInterviewQuestion":"layers 机制的作用是什么？如何在一个项目中引用另一个项目作为基础 layer？","basicInterviewAnswer":"layers 允许一个 Nuxt 项目通过 `nuxt.config` 的 `extends` 字段继承另一个项目（或 npm 包）的配置、组件、页面、composables、插件等，从而实现跨项目的代码与配置复用。例如 `extends: ['../base']` 表示当前项目继承本地 `../base` 目录下的 Nuxt 项目结构；也可以指向一个发布到 npm 的 layer 包。","isFavorite":false,"nodeStatus":"unknown"},{"id":"b5546155-cfd9-4d26-bd89-45f8db1e8f5f","slug":"auto-imports","title":"auto imports","localizedContent":{"zh-CN":{"title":"auto imports","summaryMarkdown":"自动导入是 Nuxt 在构建时分析项目代码，把 `composables/`、`components/`、`utils/` 等目录下导出的函数和组件自动加入全局可用作用域的机制，省去手写 `import` 语句。Vue 的核心 API（如 `ref`、`computed`）和 Nuxt 的内置组合式函数（如 `useFetch`、`useRoute`）也是通过同一套机制自动可用的。可以在 `nuxt.config` 的 `imports.dirs` 里添加额外目录纳入自动导入。容易出错的是自动导入依赖静态分析，如果通过非常规方式动态生成函数名或路径，Nuxt 可能无法识别，需要手动 `import`。","basicInterviewQuestion":"Nuxt 的自动导入机制覆盖哪些内容？开发者还需要手写 import 语句吗？","basicInterviewAnswer":"Nuxt 会自动导入 `components/` 目录下的组件、`composables/` 和 `utils/` 目录下导出的函数、Vue 的响应式 API（如 `ref`、`computed`）、Nuxt 内置的 composables（如 `useFetch`、`useRoute`），以及模块通过 `addImports` 注册的内容。在这些范围内，开发者通常不需要手写 import 语句，直接在模板或 `<script setup>` 中使用对应名称即可；对于不在自动导入范围内的第三方库或自定义路径，仍需要手动 import。"},"en":{"title":"Auto Imports","summaryMarkdown":"Auto-imports is Nuxt's build-time mechanism that statically analyzes the project and makes exports from `composables/`, `components/`, `utils/`, and similar directories globally available without manual `import` statements. Vue's core APIs (`ref`, `computed`) and Nuxt's built-in composables (`useFetch`, `useRoute`) are made available the same way. Extra directories can be added to auto-import via `imports.dirs` in `nuxt.config`. A common pitfall is that auto-import relies on static analysis — if a function name or path is generated dynamically in an unusual way, Nuxt may not detect it, requiring a manual `import`.","basicInterviewQuestion":"What does Nuxt's auto-import cover, and do developers still need to write import statements?","basicInterviewAnswer":"Nuxt auto-imports components from `components/`, exported functions from `composables/` and `utils/`, Vue's reactivity APIs (`ref`, `computed`), built-in Nuxt composables (`useFetch`, `useRoute`), and anything modules register via `addImports`. Within this scope, developers typically don't write import statements — they just use the names directly in templates or `<script setup>`. Third-party libraries or custom paths outside this scope still need manual imports."}},"parentId":"138f15f8-34c5-412a-b315-ea69938cf0a4","sortOrder":390,"category":"core","isRoot":false,"summaryMarkdown":"自动导入是 Nuxt 在构建时分析项目代码，把 `composables/`、`components/`、`utils/` 等目录下导出的函数和组件自动加入全局可用作用域的机制，省去手写 `import` 语句。Vue 的核心 API（如 `ref`、`computed`）和 Nuxt 的内置组合式函数（如 `useFetch`、`useRoute`）也是通过同一套机制自动可用的。可以在 `nuxt.config` 的 `imports.dirs` 里添加额外目录纳入自动导入。容易出错的是自动导入依赖静态分析，如果通过非常规方式动态生成函数名或路径，Nuxt 可能无法识别，需要手动 `import`。","basicInterviewQuestion":"Nuxt 的自动导入机制覆盖哪些内容？开发者还需要手写 import 语句吗？","basicInterviewAnswer":"Nuxt 会自动导入 `components/` 目录下的组件、`composables/` 和 `utils/` 目录下导出的函数、Vue 的响应式 API（如 `ref`、`computed`）、Nuxt 内置的 composables（如 `useFetch`、`useRoute`），以及模块通过 `addImports` 注册的内容。在这些范围内，开发者通常不需要手写 import 语句，直接在模板或 `<script setup>` 中使用对应名称即可；对于不在自动导入范围内的第三方库或自定义路径，仍需要手动 import。","isFavorite":false,"nodeStatus":"unknown"},{"id":"325c3743-e3f6-4d5e-b606-badbc54c0e0b","slug":"devtools","title":"Nuxt DevTools","localizedContent":{"zh-CN":{"title":"Nuxt DevTools","summaryMarkdown":"Nuxt DevTools 是内置于开发模式的可视化调试工具，可以在浏览器里查看当前项目的页面、组件树、composables、模块、运行时配置和性能信息，并支持实时编辑部分配置。它通过 `nuxt.config` 中的 `devtools: { enabled: true }` 开启，只在开发环境生效，不会被打包进生产构建。它常用于排查“某个组件为什么被自动导入”“某个模块注册了哪些 hook”这类只看代码不直观的问题。","basicInterviewQuestion":"Nuxt DevTools 提供了哪些主要功能？如何启用？","basicInterviewAnswer":"Nuxt DevTools 是一个内嵌在开发服务器中的可视化面板，可以查看页面的组件树、路由列表、自动导入的 composables 和组件、已安装的模块、运行时配置、payload 数据，以及性能分析等信息。在开发模式下，可以在 `nuxt.config` 中设置 `devtools: { enabled: true }`（较新版本默认开启），然后通过浏览器页面右下角的悬浮图标打开面板。"},"en":{"title":"Nuxt DevTools","summaryMarkdown":"Nuxt DevTools is a built-in visual debugging tool for development that lets you inspect the current project's pages, component tree, composables, modules, runtime config, and performance info in the browser, with live editing for some settings. It's enabled via `devtools: { enabled: true }` in `nuxt.config`, only active in development, and never included in production builds. It's commonly used to debug questions that aren't obvious from reading code alone, like \"why is this component auto-imported\" or \"which hooks did this module register\".","basicInterviewQuestion":"What does Nuxt DevTools provide, and how is it enabled?","basicInterviewAnswer":"Nuxt DevTools is a visual panel embedded in the dev server that shows the page's component tree, route list, auto-imported composables and components, installed modules, runtime config, payload data, and performance profiling. In dev mode, set `devtools: { enabled: true }` in `nuxt.config` (enabled by default in newer versions), then open the panel via the floating icon in the bottom-right of the browser page."}},"parentId":"138f15f8-34c5-412a-b315-ea69938cf0a4","sortOrder":400,"category":"common","isRoot":false,"summaryMarkdown":"Nuxt DevTools 是内置于开发模式的可视化调试工具，可以在浏览器里查看当前项目的页面、组件树、composables、模块、运行时配置和性能信息，并支持实时编辑部分配置。它通过 `nuxt.config` 中的 `devtools: { enabled: true }` 开启，只在开发环境生效，不会被打包进生产构建。它常用于排查“某个组件为什么被自动导入”“某个模块注册了哪些 hook”这类只看代码不直观的问题。","basicInterviewQuestion":"Nuxt DevTools 提供了哪些主要功能？如何启用？","basicInterviewAnswer":"Nuxt DevTools 是一个内嵌在开发服务器中的可视化面板，可以查看页面的组件树、路由列表、自动导入的 composables 和组件、已安装的模块、运行时配置、payload 数据，以及性能分析等信息。在开发模式下，可以在 `nuxt.config` 中设置 `devtools: { enabled: true }`（较新版本默认开启），然后通过浏览器页面右下角的悬浮图标打开面板。","isFavorite":false,"nodeStatus":"unknown"}],"lines":[{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990:68147ca1-6681-45c1-b4c0-5ac68efd975b","sourceId":"16da00ce-53b8-4c9a-b626-cf9a62046990","targetId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","type":"tree"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b:85e52dae-358f-48f3-ae29-acbfbb154c38","sourceId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","targetId":"85e52dae-358f-48f3-ae29-acbfbb154c38","type":"tree"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b:19511c91-605c-4cb6-87d6-05a8fe843698","sourceId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","targetId":"19511c91-605c-4cb6-87d6-05a8fe843698","type":"tree"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b:58800e92-26e6-494d-ba94-a2729118de5f","sourceId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","targetId":"58800e92-26e6-494d-ba94-a2729118de5f","type":"tree"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b:8d481665-05fb-48d1-b14f-a8a91b40f7c8","sourceId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","targetId":"8d481665-05fb-48d1-b14f-a8a91b40f7c8","type":"tree"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b:2dd4fafe-4550-47b5-8f21-f418cd508990","sourceId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","targetId":"2dd4fafe-4550-47b5-8f21-f418cd508990","type":"tree"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b:607998b3-3e68-4158-9a49-9e74649ccc76","sourceId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","targetId":"607998b3-3e68-4158-9a49-9e74649ccc76","type":"tree"},{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990:0366d5f5-25cf-408a-b2e5-ae7fd440be31","sourceId":"16da00ce-53b8-4c9a-b626-cf9a62046990","targetId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","type":"tree"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31:1bf6c217-528f-4910-ab4e-6d3739379ee8","sourceId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","targetId":"1bf6c217-528f-4910-ab4e-6d3739379ee8","type":"tree"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31:7477173b-faf3-4c69-a565-8aadca7a275b","sourceId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","targetId":"7477173b-faf3-4c69-a565-8aadca7a275b","type":"tree"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31:f4e98fb2-2a43-4f82-ac51-a421f1a0f8ed","sourceId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","targetId":"f4e98fb2-2a43-4f82-ac51-a421f1a0f8ed","type":"tree"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31:8e63826e-9729-4f17-a4fb-65ad5f2d0d5c","sourceId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","targetId":"8e63826e-9729-4f17-a4fb-65ad5f2d0d5c","type":"tree"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31:2181768b-27f4-4bc2-bb70-cdb50ca5ada6","sourceId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","targetId":"2181768b-27f4-4bc2-bb70-cdb50ca5ada6","type":"tree"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31:cd3c9701-e4cc-4867-9794-13066b0f2e52","sourceId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","targetId":"cd3c9701-e4cc-4867-9794-13066b0f2e52","type":"tree"},{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990:fc244abc-0b64-437e-bdc2-9353ae208a7a","sourceId":"16da00ce-53b8-4c9a-b626-cf9a62046990","targetId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","type":"tree"},{"id":"fc244abc-0b64-437e-bdc2-9353ae208a7a:eaf62a10-b2a6-41b6-92fa-a9887b2e23fa","sourceId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","targetId":"eaf62a10-b2a6-41b6-92fa-a9887b2e23fa","type":"tree"},{"id":"fc244abc-0b64-437e-bdc2-9353ae208a7a:733a03dd-e966-4dfd-9caa-517c06ac996e","sourceId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","targetId":"733a03dd-e966-4dfd-9caa-517c06ac996e","type":"tree"},{"id":"fc244abc-0b64-437e-bdc2-9353ae208a7a:2ab2d684-2d4c-4e3f-b422-1789461fc22e","sourceId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","targetId":"2ab2d684-2d4c-4e3f-b422-1789461fc22e","type":"tree"},{"id":"fc244abc-0b64-437e-bdc2-9353ae208a7a:b74d7e85-1ccc-4f6f-87a4-e3bafa3612ad","sourceId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","targetId":"b74d7e85-1ccc-4f6f-87a4-e3bafa3612ad","type":"tree"},{"id":"fc244abc-0b64-437e-bdc2-9353ae208a7a:1b925857-99be-462e-93a6-a8201c8ec568","sourceId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","targetId":"1b925857-99be-462e-93a6-a8201c8ec568","type":"tree"},{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990:3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","sourceId":"16da00ce-53b8-4c9a-b626-cf9a62046990","targetId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","type":"tree"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e:e65aeefc-c4b2-4647-92f1-de1ad3b8a149","sourceId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","targetId":"e65aeefc-c4b2-4647-92f1-de1ad3b8a149","type":"tree"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e:232efdb1-31c7-4cf2-b631-97e30b6e891b","sourceId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","targetId":"232efdb1-31c7-4cf2-b631-97e30b6e891b","type":"tree"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e:0b1c4134-4885-4124-915f-cc19172f2bd8","sourceId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","targetId":"0b1c4134-4885-4124-915f-cc19172f2bd8","type":"tree"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e:b1d02b7d-3eab-4d01-942e-1380a907c5c1","sourceId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","targetId":"b1d02b7d-3eab-4d01-942e-1380a907c5c1","type":"tree"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e:d86245d2-2a7f-4193-b13b-652ead3a500c","sourceId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","targetId":"d86245d2-2a7f-4193-b13b-652ead3a500c","type":"tree"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e:754dedcd-df19-4df9-8838-fdccfa4dc1c1","sourceId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","targetId":"754dedcd-df19-4df9-8838-fdccfa4dc1c1","type":"tree"},{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990:160893f2-c442-4089-8ebd-ef5761eda0c9","sourceId":"16da00ce-53b8-4c9a-b626-cf9a62046990","targetId":"160893f2-c442-4089-8ebd-ef5761eda0c9","type":"tree"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9:71470cab-a5be-4b78-8663-46364c92643b","sourceId":"160893f2-c442-4089-8ebd-ef5761eda0c9","targetId":"71470cab-a5be-4b78-8663-46364c92643b","type":"tree"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9:5c2104a7-c0e2-4e52-8ec9-dc49c7e24d2f","sourceId":"160893f2-c442-4089-8ebd-ef5761eda0c9","targetId":"5c2104a7-c0e2-4e52-8ec9-dc49c7e24d2f","type":"tree"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9:58f0b141-17d0-4aef-a234-d81f8c55fcba","sourceId":"160893f2-c442-4089-8ebd-ef5761eda0c9","targetId":"58f0b141-17d0-4aef-a234-d81f8c55fcba","type":"tree"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9:2bb2d027-489e-45b9-bb48-15edde180d66","sourceId":"160893f2-c442-4089-8ebd-ef5761eda0c9","targetId":"2bb2d027-489e-45b9-bb48-15edde180d66","type":"tree"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9:5b44796d-7f1b-41f7-8f13-2969b44679bd","sourceId":"160893f2-c442-4089-8ebd-ef5761eda0c9","targetId":"5b44796d-7f1b-41f7-8f13-2969b44679bd","type":"tree"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9:e7f2aff0-0fa8-4d10-825d-c5fe0e0d5534","sourceId":"160893f2-c442-4089-8ebd-ef5761eda0c9","targetId":"e7f2aff0-0fa8-4d10-825d-c5fe0e0d5534","type":"tree"},{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990:138f15f8-34c5-412a-b315-ea69938cf0a4","sourceId":"16da00ce-53b8-4c9a-b626-cf9a62046990","targetId":"138f15f8-34c5-412a-b315-ea69938cf0a4","type":"tree"},{"id":"138f15f8-34c5-412a-b315-ea69938cf0a4:92f80df7-93ff-43c0-9630-cfc85cc26d57","sourceId":"138f15f8-34c5-412a-b315-ea69938cf0a4","targetId":"92f80df7-93ff-43c0-9630-cfc85cc26d57","type":"tree"},{"id":"138f15f8-34c5-412a-b315-ea69938cf0a4:6e450b73-1fc8-4ca0-984e-d38e4ae28f0b","sourceId":"138f15f8-34c5-412a-b315-ea69938cf0a4","targetId":"6e450b73-1fc8-4ca0-984e-d38e4ae28f0b","type":"tree"},{"id":"138f15f8-34c5-412a-b315-ea69938cf0a4:75db370e-881a-4116-941d-ba3411f11144","sourceId":"138f15f8-34c5-412a-b315-ea69938cf0a4","targetId":"75db370e-881a-4116-941d-ba3411f11144","type":"tree"},{"id":"138f15f8-34c5-412a-b315-ea69938cf0a4:b5546155-cfd9-4d26-bd89-45f8db1e8f5f","sourceId":"138f15f8-34c5-412a-b315-ea69938cf0a4","targetId":"b5546155-cfd9-4d26-bd89-45f8db1e8f5f","type":"tree"},{"id":"138f15f8-34c5-412a-b315-ea69938cf0a4:325c3743-e3f6-4d5e-b606-badbc54c0e0b","sourceId":"138f15f8-34c5-412a-b315-ea69938cf0a4","targetId":"325c3743-e3f6-4d5e-b606-badbc54c0e0b","type":"tree"},{"id":"85e52dae-358f-48f3-ae29-acbfbb154c38:1bf6c217-528f-4910-ab4e-6d3739379ee8:related","sourceId":"85e52dae-358f-48f3-ae29-acbfbb154c38","targetId":"1bf6c217-528f-4910-ab4e-6d3739379ee8","type":"related"},{"id":"1bf6c217-528f-4910-ab4e-6d3739379ee8:eaf62a10-b2a6-41b6-92fa-a9887b2e23fa:related","sourceId":"1bf6c217-528f-4910-ab4e-6d3739379ee8","targetId":"eaf62a10-b2a6-41b6-92fa-a9887b2e23fa","type":"related"},{"id":"eaf62a10-b2a6-41b6-92fa-a9887b2e23fa:e65aeefc-c4b2-4647-92f1-de1ad3b8a149:related","sourceId":"eaf62a10-b2a6-41b6-92fa-a9887b2e23fa","targetId":"e65aeefc-c4b2-4647-92f1-de1ad3b8a149","type":"related"},{"id":"e65aeefc-c4b2-4647-92f1-de1ad3b8a149:71470cab-a5be-4b78-8663-46364c92643b:related","sourceId":"e65aeefc-c4b2-4647-92f1-de1ad3b8a149","targetId":"71470cab-a5be-4b78-8663-46364c92643b","type":"related"},{"id":"71470cab-a5be-4b78-8663-46364c92643b:92f80df7-93ff-43c0-9630-cfc85cc26d57:related","sourceId":"71470cab-a5be-4b78-8663-46364c92643b","targetId":"92f80df7-93ff-43c0-9630-cfc85cc26d57","type":"related"}]},"nodeIndex":{"key":"default","items":[{"id":"136567c8-2205-4617-906e-9add4a1eac52","nodeId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","parentItemId":null,"orderIndex":10},{"id":"6039f020-d322-4818-8d2c-82a0a3c5af5d","nodeId":"85e52dae-358f-48f3-ae29-acbfbb154c38","parentItemId":"136567c8-2205-4617-906e-9add4a1eac52","orderIndex":20},{"id":"465b2e46-1fce-4228-aaaa-ce562c2787f1","nodeId":"19511c91-605c-4cb6-87d6-05a8fe843698","parentItemId":"136567c8-2205-4617-906e-9add4a1eac52","orderIndex":30},{"id":"a155a696-bebb-458b-9330-7cb9f99c009b","nodeId":"58800e92-26e6-494d-ba94-a2729118de5f","parentItemId":"136567c8-2205-4617-906e-9add4a1eac52","orderIndex":40},{"id":"c6c44aa7-40c7-42fb-ae56-ee6f35dec2c7","nodeId":"8d481665-05fb-48d1-b14f-a8a91b40f7c8","parentItemId":"136567c8-2205-4617-906e-9add4a1eac52","orderIndex":50},{"id":"3c47bdf8-aed6-4a9a-850c-54b22c5fd74a","nodeId":"2dd4fafe-4550-47b5-8f21-f418cd508990","parentItemId":"136567c8-2205-4617-906e-9add4a1eac52","orderIndex":60},{"id":"53b80886-164b-4c09-aeb2-2c1df87e54a7","nodeId":"607998b3-3e68-4158-9a49-9e74649ccc76","parentItemId":"136567c8-2205-4617-906e-9add4a1eac52","orderIndex":70},{"id":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","nodeId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","parentItemId":null,"orderIndex":80},{"id":"f00f1245-6855-40f5-8180-c31140037fed","nodeId":"1bf6c217-528f-4910-ab4e-6d3739379ee8","parentItemId":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","orderIndex":90},{"id":"c6c7dd41-08ea-497c-87ca-81195c38adae","nodeId":"7477173b-faf3-4c69-a565-8aadca7a275b","parentItemId":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","orderIndex":100},{"id":"be081c93-57d3-4f93-92ec-56b603e69b25","nodeId":"f4e98fb2-2a43-4f82-ac51-a421f1a0f8ed","parentItemId":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","orderIndex":110},{"id":"0ae4fba7-cab8-41cc-8fb4-4d2d6e8b21da","nodeId":"8e63826e-9729-4f17-a4fb-65ad5f2d0d5c","parentItemId":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","orderIndex":120},{"id":"8e813141-7b60-4e02-8b63-010f1a7748b4","nodeId":"2181768b-27f4-4bc2-bb70-cdb50ca5ada6","parentItemId":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","orderIndex":130},{"id":"ab6336ad-dfaf-42d2-b94e-66a999451009","nodeId":"cd3c9701-e4cc-4867-9794-13066b0f2e52","parentItemId":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","orderIndex":140},{"id":"73bebb5b-67ea-4fba-878d-25fa56f95277","nodeId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","parentItemId":null,"orderIndex":150},{"id":"f5d8ac54-bbd3-4767-9ff7-52d7616b2b59","nodeId":"eaf62a10-b2a6-41b6-92fa-a9887b2e23fa","parentItemId":"73bebb5b-67ea-4fba-878d-25fa56f95277","orderIndex":160},{"id":"52d4faad-1f78-43ce-a46e-e10a00e1a4be","nodeId":"733a03dd-e966-4dfd-9caa-517c06ac996e","parentItemId":"73bebb5b-67ea-4fba-878d-25fa56f95277","orderIndex":170},{"id":"50d0fd5b-e969-45e7-975d-00d5c06c5b28","nodeId":"2ab2d684-2d4c-4e3f-b422-1789461fc22e","parentItemId":"73bebb5b-67ea-4fba-878d-25fa56f95277","orderIndex":180},{"id":"17d85818-4075-4c96-b568-fc6e1540b430","nodeId":"b74d7e85-1ccc-4f6f-87a4-e3bafa3612ad","parentItemId":"73bebb5b-67ea-4fba-878d-25fa56f95277","orderIndex":190},{"id":"aef3797a-3fa4-4cb2-a71e-ea70b9955457","nodeId":"1b925857-99be-462e-93a6-a8201c8ec568","parentItemId":"73bebb5b-67ea-4fba-878d-25fa56f95277","orderIndex":200},{"id":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","nodeId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","parentItemId":null,"orderIndex":210},{"id":"a204a661-e3fa-41a2-af0c-ff77398dfe41","nodeId":"e65aeefc-c4b2-4647-92f1-de1ad3b8a149","parentItemId":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","orderIndex":220},{"id":"4994d58e-b2e5-46b5-9833-7b5662bce010","nodeId":"232efdb1-31c7-4cf2-b631-97e30b6e891b","parentItemId":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","orderIndex":230},{"id":"df1320c3-ba9b-4706-ae44-e07335d71d64","nodeId":"0b1c4134-4885-4124-915f-cc19172f2bd8","parentItemId":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","orderIndex":240},{"id":"c9c283f2-75ed-4277-a5dc-5a648ddbd837","nodeId":"b1d02b7d-3eab-4d01-942e-1380a907c5c1","parentItemId":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","orderIndex":250},{"id":"f91330a4-a15f-4595-88ae-a8e01eb4cdc5","nodeId":"d86245d2-2a7f-4193-b13b-652ead3a500c","parentItemId":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","orderIndex":260},{"id":"878a312f-236f-4763-8f54-e2af0b50d791","nodeId":"754dedcd-df19-4df9-8838-fdccfa4dc1c1","parentItemId":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","orderIndex":270},{"id":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","nodeId":"160893f2-c442-4089-8ebd-ef5761eda0c9","parentItemId":null,"orderIndex":280},{"id":"813c245d-f72a-4a5f-a3fb-528625a04aa6","nodeId":"71470cab-a5be-4b78-8663-46364c92643b","parentItemId":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","orderIndex":290},{"id":"b8c17049-ca52-4377-885c-16457d2eeaee","nodeId":"5c2104a7-c0e2-4e52-8ec9-dc49c7e24d2f","parentItemId":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","orderIndex":300},{"id":"18e04c50-8502-45dd-9b2c-198689f4eba8","nodeId":"58f0b141-17d0-4aef-a234-d81f8c55fcba","parentItemId":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","orderIndex":310},{"id":"a33b2607-2c65-40b9-aeb2-0bfced1181c6","nodeId":"2bb2d027-489e-45b9-bb48-15edde180d66","parentItemId":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","orderIndex":320},{"id":"ec5ed9a6-58a3-433f-b39c-d352f4b6e1e5","nodeId":"5b44796d-7f1b-41f7-8f13-2969b44679bd","parentItemId":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","orderIndex":330},{"id":"6e01b52e-2f15-4eab-a9e7-401dfa360d08","nodeId":"e7f2aff0-0fa8-4d10-825d-c5fe0e0d5534","parentItemId":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","orderIndex":340},{"id":"4dc7d2da-fdd8-440d-8e58-9c5377e9db8d","nodeId":"138f15f8-34c5-412a-b315-ea69938cf0a4","parentItemId":null,"orderIndex":350},{"id":"f4f3a24b-d13c-487a-8e86-cc7e278c4895","nodeId":"92f80df7-93ff-43c0-9630-cfc85cc26d57","parentItemId":"4dc7d2da-fdd8-440d-8e58-9c5377e9db8d","orderIndex":360},{"id":"309e4d1a-7bd4-4f78-8282-0d5f4eb11a96","nodeId":"6e450b73-1fc8-4ca0-984e-d38e4ae28f0b","parentItemId":"4dc7d2da-fdd8-440d-8e58-9c5377e9db8d","orderIndex":370},{"id":"ea722e2c-16d3-4e5c-9801-1f274f004d66","nodeId":"75db370e-881a-4116-941d-ba3411f11144","parentItemId":"4dc7d2da-fdd8-440d-8e58-9c5377e9db8d","orderIndex":380},{"id":"566efdbd-3353-4188-ad38-3812df2f9f25","nodeId":"b5546155-cfd9-4d26-bd89-45f8db1e8f5f","parentItemId":"4dc7d2da-fdd8-440d-8e58-9c5377e9db8d","orderIndex":390},{"id":"9b2bed9f-4ff9-4cca-8583-c29dc92cd4cf","nodeId":"325c3743-e3f6-4d5e-b606-badbc54c0e0b","parentItemId":"4dc7d2da-fdd8-440d-8e58-9c5377e9db8d","orderIndex":400}]},"favoriteNodeIds":[],"nodeStatusByNodeId":{"16da00ce-53b8-4c9a-b626-cf9a62046990":"unknown","68147ca1-6681-45c1-b4c0-5ac68efd975b":"unknown","85e52dae-358f-48f3-ae29-acbfbb154c38":"unknown","19511c91-605c-4cb6-87d6-05a8fe843698":"unknown","58800e92-26e6-494d-ba94-a2729118de5f":"unknown","8d481665-05fb-48d1-b14f-a8a91b40f7c8":"unknown","2dd4fafe-4550-47b5-8f21-f418cd508990":"unknown","607998b3-3e68-4158-9a49-9e74649ccc76":"unknown","0366d5f5-25cf-408a-b2e5-ae7fd440be31":"unknown","1bf6c217-528f-4910-ab4e-6d3739379ee8":"unknown","7477173b-faf3-4c69-a565-8aadca7a275b":"unknown","f4e98fb2-2a43-4f82-ac51-a421f1a0f8ed":"unknown","8e63826e-9729-4f17-a4fb-65ad5f2d0d5c":"unknown","2181768b-27f4-4bc2-bb70-cdb50ca5ada6":"unknown","cd3c9701-e4cc-4867-9794-13066b0f2e52":"unknown","fc244abc-0b64-437e-bdc2-9353ae208a7a":"unknown","eaf62a10-b2a6-41b6-92fa-a9887b2e23fa":"unknown","733a03dd-e966-4dfd-9caa-517c06ac996e":"unknown","2ab2d684-2d4c-4e3f-b422-1789461fc22e":"unknown","b74d7e85-1ccc-4f6f-87a4-e3bafa3612ad":"unknown","1b925857-99be-462e-93a6-a8201c8ec568":"unknown","3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e":"unknown","e65aeefc-c4b2-4647-92f1-de1ad3b8a149":"unknown","232efdb1-31c7-4cf2-b631-97e30b6e891b":"unknown","0b1c4134-4885-4124-915f-cc19172f2bd8":"unknown","b1d02b7d-3eab-4d01-942e-1380a907c5c1":"unknown","d86245d2-2a7f-4193-b13b-652ead3a500c":"unknown","754dedcd-df19-4df9-8838-fdccfa4dc1c1":"unknown","160893f2-c442-4089-8ebd-ef5761eda0c9":"unknown","71470cab-a5be-4b78-8663-46364c92643b":"unknown","5c2104a7-c0e2-4e52-8ec9-dc49c7e24d2f":"unknown","58f0b141-17d0-4aef-a234-d81f8c55fcba":"unknown","2bb2d027-489e-45b9-bb48-15edde180d66":"unknown","5b44796d-7f1b-41f7-8f13-2969b44679bd":"unknown","e7f2aff0-0fa8-4d10-825d-c5fe0e0d5534":"unknown","138f15f8-34c5-412a-b315-ea69938cf0a4":"unknown","92f80df7-93ff-43c0-9630-cfc85cc26d57":"unknown","6e450b73-1fc8-4ca0-984e-d38e4ae28f0b":"unknown","75db370e-881a-4116-941d-ba3411f11144":"unknown","b5546155-cfd9-4d26-bd89-45f8db1e8f5f":"unknown","325c3743-e3f6-4d5e-b606-badbc54c0e0b":"unknown"},"isAuthenticated":false,"isPro":false}}] </article></body></html>

14:["$","$L20",null,{"pageData":{"graphSlug":"nuxt","contentVersion":"1.0.0","graphTitle":"Nuxt","graphTitleByLocale":{"zh-CN":"Nuxt","en":"Nuxt"},"graphDescription":"覆盖 Nuxt 的 Vue 全栈框架核心：文件路由、layouts、pages、server、data fetching、runtime config、modules、Nitro 和渲染模式，不重复 Vue 基础。","graphDescriptionByLocale":{"zh-CN":"覆盖 Nuxt 的 Vue 全栈框架核心：文件路由、layouts、pages、server、data fetching、runtime config、modules、Nitro 和渲染模式，不重复 Vue 基础。","en":"Covers Nuxt's Vue full-stack framework core: file routing, layouts, pages, server, data fetching, runtime config, modules, Nitro, and rendering modes, without repeating Vue basics."},"graph":{"rootId":"16da00ce-53b8-4c9a-b626-cf9a62046990","nodes":[{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990","slug":"nuxt","title":"Nuxt","localizedContent":{"zh-CN":{"title":"Nuxt","summaryMarkdown":"Nuxt 是基于 Vue 的全栈框架，在 Vue 的组件和响应式系统之上提供约定式目录结构、文件路由、服务端渲染和内置的 Nitro 服务端引擎。它解决的是“从 Vue 组件到可部署全栈应用”之间的工程化问题：路由、SSR/SSG、API 层、构建和部署都有官方默认方案，开发者不用从零搭建这些基础设施。容易混淆的是，Nuxt 不是 UI 库或状态管理库，Vue 的响应式系统和组件模型仍按 Vue 的方式工作，Nuxt 主要扩展的是应用结构、渲染流程和服务端能力。","basicInterviewQuestion":"Nuxt 相比直接用 Vue + Vite 搭建项目，主要多提供了什么能力？","basicInterviewAnswer":"Nuxt 在 Vue 组件和响应式系统之上增加了约定式目录结构、文件路由、服务端渲染（SSR）和内置的 Nitro 服务端引擎。开发者不需要自己配置 `vue-router`、SSR 渲染流程或 API 服务，只要按约定放置文件，Nuxt 就会自动接入这些能力。"},"en":{"title":"Nuxt","summaryMarkdown":"Nuxt is a Vue-based full-stack framework that adds a convention-driven directory structure, file-based routing, server-side rendering, and a built-in Nitro server engine on top of Vue's component and reactivity model. It solves the engineering gap between \"a Vue component\" and \"a deployable full-stack app\": routing, SSR/SSG, an API layer, build, and deployment all have official defaults so you don't build that infrastructure yourself. A common confusion is that Nuxt is not a UI library or state manager — Vue's reactivity and components still work as in Vue, while Nuxt mainly extends app structure, rendering, and server capabilities.","basicInterviewQuestion":"Compared to a plain Vue + Vite project, what extra capabilities does Nuxt provide?","basicInterviewAnswer":"Nuxt adds a convention-based directory structure, file-based routing, server-side rendering (SSR), and a built-in Nitro server engine on top of Vue's component and reactivity model. Developers don't need to configure `vue-router`, an SSR rendering pipeline, or an API server themselves — placing files by convention is enough for Nuxt to wire these up automatically."}},"parentId":null,"sortOrder":0,"category":"core","isRoot":true,"summaryMarkdown":"Nuxt 是基于 Vue 的全栈框架，在 Vue 的组件和响应式系统之上提供约定式目录结构、文件路由、服务端渲染和内置的 Nitro 服务端引擎。它解决的是“从 Vue 组件到可部署全栈应用”之间的工程化问题：路由、SSR/SSG、API 层、构建和部署都有官方默认方案，开发者不用从零搭建这些基础设施。容易混淆的是，Nuxt 不是 UI 库或状态管理库，Vue 的响应式系统和组件模型仍按 Vue 的方式工作，Nuxt 主要扩展的是应用结构、渲染流程和服务端能力。","basicInterviewQuestion":"Nuxt 相比直接用 Vue + Vite 搭建项目，主要多提供了什么能力？","basicInterviewAnswer":"Nuxt 在 Vue 组件和响应式系统之上增加了约定式目录结构、文件路由、服务端渲染（SSR）和内置的 Nitro 服务端引擎。开发者不需要自己配置 `vue-router`、SSR 渲染流程或 API 服务，只要按约定放置文件，Nuxt 就会自动接入这些能力。","isFavorite":false,"nodeStatus":"unknown"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b","slug":"app-structure","title":"应用结构","localizedContent":{"zh-CN":{"title":"应用结构","summaryMarkdown":"应用结构是 Nuxt 的约定式目录体系，决定了 `app.vue`、`pages/`、`layouts/`、`components/`、`composables/`、`plugins/` 等目录在框架中各自的角色和加载顺序。它解决的问题是：让团队不用手写路由表、注册表和入口文件，只要把文件放进对应目录，Nuxt 就会自动识别并接入构建流程。常见误区是把这些目录当成普通文件夹随意摆放文件，实际上目录名和文件名直接决定了路由路径、组件名和自动导入的可用性。","basicInterviewQuestion":"Nuxt 的核心约定目录有哪些，各自的角色是什么？","basicInterviewAnswer":"`app.vue` 是应用根组件；`pages/` 存放路由页面；`layouts/` 存放页面外层的公共布局；`components/` 和 `composables/` 分别存放自动注册的组件和自动导入的组合式函数；`plugins/` 存放应用启动时执行的初始化代码。Nuxt 在构建时扫描这些目录，把文件位置转换成路由、组件注册表和自动导入列表。"},"en":{"title":"Application Structure","summaryMarkdown":"Application structure is Nuxt's convention-based directory layout, defining the role and load order of `app.vue`, `pages/`, `layouts/`, `components/`, `composables/`, and `plugins/`. It removes the need to hand-write route tables, registries, or entry files — drop a file in the right directory and Nuxt wires it into the build automatically. A common mistake is treating these as plain folders; in reality, directory and file names directly determine route paths, component names, and what gets auto-imported.","basicInterviewQuestion":"What are Nuxt's core convention directories, and what role does each play?","basicInterviewAnswer":"`app.vue` is the application root component; `pages/` holds routed pages; `layouts/` holds the shared shell around pages; `components/` and `composables/` hold auto-registered components and auto-imported composables respectively; `plugins/` holds initialization code that runs at app startup. Nuxt scans these directories at build time and turns file locations into routes, a component registry, and an auto-import list."}},"parentId":"16da00ce-53b8-4c9a-b626-cf9a62046990","sortOrder":10,"category":"core","isRoot":false,"summaryMarkdown":"应用结构是 Nuxt 的约定式目录体系，决定了 `app.vue`、`pages/`、`layouts/`、`components/`、`composables/`、`plugins/` 等目录在框架中各自的角色和加载顺序。它解决的问题是：让团队不用手写路由表、注册表和入口文件，只要把文件放进对应目录，Nuxt 就会自动识别并接入构建流程。常见误区是把这些目录当成普通文件夹随意摆放文件，实际上目录名和文件名直接决定了路由路径、组件名和自动导入的可用性。","basicInterviewQuestion":"Nuxt 的核心约定目录有哪些，各自的角色是什么？","basicInterviewAnswer":"`app.vue` 是应用根组件；`pages/` 存放路由页面；`layouts/` 存放页面外层的公共布局；`components/` 和 `composables/` 分别存放自动注册的组件和自动导入的组合式函数；`plugins/` 存放应用启动时执行的初始化代码。Nuxt 在构建时扫描这些目录，把文件位置转换成路由、组件注册表和自动导入列表。","isFavorite":false,"nodeStatus":"unknown"},{"id":"85e52dae-358f-48f3-ae29-acbfbb154c38","slug":"app-vue","title":"app.vue","localizedContent":{"zh-CN":{"title":"app.vue","summaryMarkdown":"`app.vue` 是 Nuxt 应用的根组件，相当于 Vue 项目里的 `App.vue`，但 Nuxt 会自动把它包裹进应用渲染流程，不需要手动挂载。它通常只放 ``、`` 和全局共享的元素（比如全局弹窗或通知容器），不放具体页面内容。如果项目没有 `app.vue`，Nuxt 会使用内置的默认根组件，效果等价于只渲染 ``。容易出错的地方是在 `app.vue` 里直接写页面级业务逻辑，这会让所有页面共享同一份状态和生命周期，破坏页面级的独立性。","basicInterviewQuestion":"`app.vue` 在 Nuxt 应用渲染流程中扮演什么角色？","basicInterviewAnswer":"`app.vue` 是整个应用的根组件，Nuxt 会自动把它接入渲染流程并挂载到页面上，不需要手动调用 `createApp().mount()`。它通常只包含 ``、`` 和少量全局共享的 UI（比如全局通知容器），具体页面内容由 `` 渲染。"},"en":{"title":"app.vue","summaryMarkdown":"`app.vue` is the root component of a Nuxt app, similar to `App.vue` in a plain Vue project, except Nuxt automatically mounts it into the rendering pipeline. It typically contains only ``, ``, and globally shared elements like a modal or toast container, not page-specific content. If the project has no `app.vue`, Nuxt falls back to a default root that's equivalent to rendering `` alone. A common mistake is putting page-level business logic directly in `app.vue`, which makes all pages share the same state and lifecycle and breaks per-page isolation.","basicInterviewQuestion":"What role does `app.vue` play in a Nuxt app's rendering pipeline?","basicInterviewAnswer":"`app.vue` is the application's root component, automatically wired into the rendering pipeline and mounted by Nuxt without a manual `createApp().mount()` call. It typically contains only ``, ``, and a handful of globally shared UI elements like a notification container, with page content rendered by ``."}},"parentId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","sortOrder":20,"category":"core","isRoot":false,"summaryMarkdown":"`app.vue` 是 Nuxt 应用的根组件，相当于 Vue 项目里的 `App.vue`，但 Nuxt 会自动把它包裹进应用渲染流程，不需要手动挂载。它通常只放 ``、`` 和全局共享的元素（比如全局弹窗或通知容器），不放具体页面内容。如果项目没有 `app.vue`，Nuxt 会使用内置的默认根组件，效果等价于只渲染 ``。容易出错的地方是在 `app.vue` 里直接写页面级业务逻辑，这会让所有页面共享同一份状态和生命周期，破坏页面级的独立性。","basicInterviewQuestion":"`app.vue` 在 Nuxt 应用渲染流程中扮演什么角色？","basicInterviewAnswer":"`app.vue` 是整个应用的根组件，Nuxt 会自动把它接入渲染流程并挂载到页面上，不需要手动调用 `createApp().mount()`。它通常只包含 ``、`` 和少量全局共享的 UI（比如全局通知容器），具体页面内容由 `` 渲染。","isFavorite":false,"nodeStatus":"unknown"},{"id":"19511c91-605c-4cb6-87d6-05a8fe843698","slug":"pages","title":"pages","localizedContent":{"zh-CN":{"title":"pages","summaryMarkdown":"`pages/` 目录是 Nuxt 文件路由的入口：目录下每个 `.vue` 文件都会按文件路径自动生成一条路由，并注入到 `` 渲染。一旦项目里存在 `pages/` 目录，Nuxt 会自动启用 `vue-router` 并要求 `app.vue`（或默认根组件）包含 ``。每个页面组件可以用 `definePageMeta()` 声明该路由的元信息，比如布局、中间件或 SEO 相关字段。常见误区是把非页面的展示组件也放进 `pages/`，这会意外生成多余的路由。","basicInterviewQuestion":"`pages/` 目录下的文件是如何映射成路由的？","basicInterviewAnswer":"Nuxt 会扫描 `pages/` 目录，根据文件路径自动生成 `vue-router` 路由表：`pages/index.vue` 对应 `/`，`pages/about.vue` 对应 `/about`，`pages/users/index.vue` 对应 `/users`，文件名和目录层级直接决定路由路径。这些路由会被注入到 `` 中渲染，不需要手动维护路由配置文件。"},"en":{"title":"pages","summaryMarkdown":"The `pages/` directory is the entry point of Nuxt's file-based routing: every `.vue` file under it becomes a route based on its file path and is rendered through ``. As soon as a `pages/` directory exists, Nuxt enables `vue-router` automatically and expects `app.vue` (or the default root) to include ``. Each page component can declare route-level metadata — layout, middleware, SEO fields — via `definePageMeta()`. A common mistake is putting plain presentational components inside `pages/`, which accidentally registers them as extra routes.","basicInterviewQuestion":"How are files under `pages/` mapped to routes?","basicInterviewAnswer":"Nuxt scans the `pages/` directory and generates a `vue-router` route table from file paths: `pages/index.vue` becomes `/`, `pages/about.vue` becomes `/about`, and `pages/users/index.vue` becomes `/users` — file and folder names directly determine the route path. These routes are rendered through ``, with no manually maintained routing config."}},"parentId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","sortOrder":30,"category":"core","isRoot":false,"summaryMarkdown":"`pages/` 目录是 Nuxt 文件路由的入口：目录下每个 `.vue` 文件都会按文件路径自动生成一条路由，并注入到 `` 渲染。一旦项目里存在 `pages/` 目录，Nuxt 会自动启用 `vue-router` 并要求 `app.vue`（或默认根组件）包含 ``。每个页面组件可以用 `definePageMeta()` 声明该路由的元信息，比如布局、中间件或 SEO 相关字段。常见误区是把非页面的展示组件也放进 `pages/`，这会意外生成多余的路由。","basicInterviewQuestion":"`pages/` 目录下的文件是如何映射成路由的？","basicInterviewAnswer":"Nuxt 会扫描 `pages/` 目录，根据文件路径自动生成 `vue-router` 路由表：`pages/index.vue` 对应 `/`，`pages/about.vue` 对应 `/about`，`pages/users/index.vue` 对应 `/users`，文件名和目录层级直接决定路由路径。这些路由会被注入到 `` 中渲染，不需要手动维护路由配置文件。","isFavorite":false,"nodeStatus":"unknown"},{"id":"58800e92-26e6-494d-ba94-a2729118de5f","slug":"layouts","title":"layouts","localizedContent":{"zh-CN":{"title":"layouts","summaryMarkdown":"`layouts/` 目录用来定义页面外层的公共结构，比如导航栏、侧边栏和页脚。`layouts/default.vue` 是默认布局，没有显式指定布局的页面都会套用它；其他文件名（如 `layouts/admin.vue`）可以通过 `definePageMeta({ layout: 'admin' })` 在页面里指定。布局组件必须包含 ``，页面内容会被渲染到这个插槽位置。容易混淆的是布局切换不会重新加载整个应用，只是替换 `` 包裹的部分，所以布局组件里的状态在页面跳转之间可能被保留。","basicInterviewQuestion":"`layouts/default.vue` 在什么时候被使用，布局组件的模板里必须包含什么？","basicInterviewAnswer":"当页面没有通过 `definePageMeta({ layout: ... })` 显式指定布局时，Nuxt 会自动套用 `layouts/default.vue` 作为该页面的外层布局。布局组件的模板里必须包含 ``，页面内容会被渲染到这个插槽位置；如果缺少 ``，页面内容将不会显示。"},"en":{"title":"layouts","summaryMarkdown":"The `layouts/` directory defines the shared shell around pages, such as a nav bar, sidebar, or footer. `layouts/default.vue` is the default layout applied when a page doesn't specify one; other files like `layouts/admin.vue` can be selected per page with `definePageMeta({ layout: 'admin' })`. A layout component must include ``, where the page content is rendered. A common point of confusion is that switching layouts doesn't reload the whole app — only the content inside `` is swapped, so state held in a layout component can persist across page navigations.","basicInterviewQuestion":"When is `layouts/default.vue` used, and what must a layout component's template include?","basicInterviewAnswer":"When a page doesn't explicitly set a layout via `definePageMeta({ layout: ... })`, Nuxt automatically applies `layouts/default.vue` as its outer shell. A layout component's template must include ``, where the page content is rendered; without ``, the page content won't appear at all."}},"parentId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","sortOrder":40,"category":"core","isRoot":false,"summaryMarkdown":"`layouts/` 目录用来定义页面外层的公共结构，比如导航栏、侧边栏和页脚。`layouts/default.vue` 是默认布局，没有显式指定布局的页面都会套用它；其他文件名（如 `layouts/admin.vue`）可以通过 `definePageMeta({ layout: 'admin' })` 在页面里指定。布局组件必须包含 ``，页面内容会被渲染到这个插槽位置。容易混淆的是布局切换不会重新加载整个应用，只是替换 `` 包裹的部分，所以布局组件里的状态在页面跳转之间可能被保留。","basicInterviewQuestion":"`layouts/default.vue` 在什么时候被使用，布局组件的模板里必须包含什么？","basicInterviewAnswer":"当页面没有通过 `definePageMeta({ layout: ... })` 显式指定布局时，Nuxt 会自动套用 `layouts/default.vue` 作为该页面的外层布局。布局组件的模板里必须包含 ``，页面内容会被渲染到这个插槽位置；如果缺少 ``，页面内容将不会显示。","isFavorite":false,"nodeStatus":"unknown"},{"id":"8d481665-05fb-48d1-b14f-a8a91b40f7c8","slug":"components","title":"components auto-import","localizedContent":{"zh-CN":{"title":"components auto-import","summaryMarkdown":"`components/` 目录里的组件会被 Nuxt 自动注册并按需导入，不需要手动 `import` 或 `components: {}` 声明。组件名由文件路径决定：`components/base/Button.vue` 默认会被注册为 ``。给组件名加上 `Lazy` 前缀（如 ``）可以让 Nuxt 生成异步组件，延迟加载其代码。常见误区是以为所有组件都会被立即打包进首屏，实际上未使用的组件以及 `Lazy` 组件都会被代码分割，按需加载。","basicInterviewQuestion":"`components/` 目录下的组件是如何被自动注册和命名的？","basicInterviewAnswer":"Nuxt 会扫描 `components/` 目录，把每个组件按照其相对路径自动注册为全局组件，不需要手动 `import` 或在 `components: {}` 里声明。组件名由路径拼接而成，比如 `components/base/Button.vue` 会被注册为 ``。"},"en":{"title":"Components Auto-import","summaryMarkdown":"Components placed in `components/` are auto-registered and resolved on demand by Nuxt without manual `import` or a `components: {}` map. The component name is derived from its file path: `components/base/Button.vue` is registered as `` by default. Prefixing a name with `Lazy`, e.g. ``, makes Nuxt generate an async component whose code is loaded on demand. A common misconception is that every component ships in the initial bundle — in reality, unused and `Lazy`-prefixed components are code-split and loaded only when needed.","basicInterviewQuestion":"How are components under `components/` auto-registered and named?","basicInterviewAnswer":"Nuxt scans the `components/` directory and auto-registers each component globally based on its relative path, with no manual `import` or `components: {}` declaration needed. The component name is derived by joining the path segments, so `components/base/Button.vue` is registered as ``."}},"parentId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","sortOrder":50,"category":"core","isRoot":false,"summaryMarkdown":"`components/` 目录里的组件会被 Nuxt 自动注册并按需导入，不需要手动 `import` 或 `components: {}` 声明。组件名由文件路径决定：`components/base/Button.vue` 默认会被注册为 ``。给组件名加上 `Lazy` 前缀（如 ``）可以让 Nuxt 生成异步组件，延迟加载其代码。常见误区是以为所有组件都会被立即打包进首屏，实际上未使用的组件以及 `Lazy` 组件都会被代码分割，按需加载。","basicInterviewQuestion":"`components/` 目录下的组件是如何被自动注册和命名的？","basicInterviewAnswer":"Nuxt 会扫描 `components/` 目录，把每个组件按照其相对路径自动注册为全局组件，不需要手动 `import` 或在 `components: {}` 里声明。组件名由路径拼接而成，比如 `components/base/Button.vue` 会被注册为 ``。","isFavorite":false,"nodeStatus":"unknown"},{"id":"2dd4fafe-4550-47b5-8f21-f418cd508990","slug":"composables","title":"composables auto-import","localizedContent":{"zh-CN":{"title":"composables auto-import","summaryMarkdown":"`composables/` 目录里以 `use` 开头命名的函数会被 Nuxt 自动导入，可以在任意组件、页面或其他 composable 里直接调用，不需要写 `import` 语句。这延续了 Vue 组合式函数（composable）的写法，但去掉了手动导入的样板代码，常用于封装跨页面复用的状态、请求逻辑或业务规则。容易出错的是在 composable 里把响应式状态定义在模块顶层并直接共享给多个组件实例，如果不做特殊处理，可能导致状态被所有调用者意外共享。","basicInterviewQuestion":"`composables/` 目录下的函数是如何被自动导入的，命名上有什么约定？","basicInterviewAnswer":"Nuxt 会扫描 `composables/` 目录，把其中以 `use` 开头命名导出的函数自动加入全局作用域，调用方在组件、页面或其他 composable 里可以直接使用这些函数，不需要写 `import` 语句。这延续了 Vue 组合式函数的命名约定，让代码风格和 Vue 内置的 `useXxx` API 保持一致。"},"en":{"title":"Composables Auto-import","summaryMarkdown":"Functions named with a `use` prefix inside `composables/` are auto-imported by Nuxt, so they can be called directly in any component, page, or other composable without an `import` statement. This keeps Vue's composable pattern but removes the manual import boilerplate, and is commonly used to share state, request logic, or business rules across pages. A frequent pitfall is defining reactive state at the module's top level and sharing it across components — without deliberate design, that state ends up shared by every caller instead of being per-instance.","basicInterviewQuestion":"How are functions under `composables/` auto-imported, and what naming convention applies?","basicInterviewAnswer":"Nuxt scans `composables/` and adds exported functions named with a `use` prefix to the global scope, so they can be called directly from components, pages, or other composables without an `import` statement. This follows Vue's composable naming convention, keeping the style consistent with Vue's built-in `useXxx` APIs."}},"parentId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","sortOrder":60,"category":"core","isRoot":false,"summaryMarkdown":"`composables/` 目录里以 `use` 开头命名的函数会被 Nuxt 自动导入，可以在任意组件、页面或其他 composable 里直接调用，不需要写 `import` 语句。这延续了 Vue 组合式函数（composable）的写法，但去掉了手动导入的样板代码，常用于封装跨页面复用的状态、请求逻辑或业务规则。容易出错的是在 composable 里把响应式状态定义在模块顶层并直接共享给多个组件实例，如果不做特殊处理，可能导致状态被所有调用者意外共享。","basicInterviewQuestion":"`composables/` 目录下的函数是如何被自动导入的，命名上有什么约定？","basicInterviewAnswer":"Nuxt 会扫描 `composables/` 目录，把其中以 `use` 开头命名导出的函数自动加入全局作用域，调用方在组件、页面或其他 composable 里可以直接使用这些函数，不需要写 `import` 语句。这延续了 Vue 组合式函数的命名约定，让代码风格和 Vue 内置的 `useXxx` API 保持一致。","isFavorite":false,"nodeStatus":"unknown"},{"id":"607998b3-3e68-4158-9a49-9e74649ccc76","slug":"plugins","title":"plugins","localizedContent":{"zh-CN":{"title":"plugins","summaryMarkdown":"`plugins/` 目录里的文件会在 Nuxt 应用启动时按顺序执行，常用于注册第三方库、添加全局指令，或通过 `provide` 向所有组件注入工具方法。插件用 `defineNuxtPlugin()` 定义，可以访问 Nuxt 应用实例（`nuxtApp`）。文件名加上 `.client` 或 `.server` 后缀（如 `analytics.client.ts`）可以限制插件只在客户端或服务端运行。常见误区是在没有后缀限制的插件里直接访问 `window` 或 `document`，这会在服务端渲染阶段抛错。","basicInterviewQuestion":"`plugins/` 目录下的文件是什么时候执行的，通常用来做什么？","basicInterviewAnswer":"`plugins/` 目录下的文件会在 Nuxt 应用启动、根组件挂载之前按顺序执行，常用于注册第三方库（比如初始化一个 SDK）、添加全局指令，或通过 `provide` 向所有组件注入工具方法。每个插件用 `defineNuxtPlugin()` 定义，可以访问 Nuxt 应用实例 `nuxtApp`。"},"en":{"title":"Plugins","summaryMarkdown":"Files in `plugins/` run in order during Nuxt app startup, and are commonly used to register third-party libraries, add global directives, or inject helper methods into every component via `provide`. A plugin is defined with `defineNuxtPlugin()` and has access to the Nuxt app instance (`nuxtApp`). Adding a `.client` or `.server` suffix to the filename, e.g. `analytics.client.ts`, restricts the plugin to run only on the client or server. A common mistake is accessing `window` or `document` in a plugin without that suffix, which throws during server-side rendering.","basicInterviewQuestion":"When do files in `plugins/` run, and what are they typically used for?","basicInterviewAnswer":"Files in `plugins/` run in order during Nuxt app startup, before the root component mounts, and are commonly used to register third-party libraries (e.g. initializing an SDK), add global directives, or inject helper methods into every component via `provide`. Each plugin is defined with `defineNuxtPlugin()` and has access to the Nuxt app instance `nuxtApp`."}},"parentId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","sortOrder":70,"category":"common","isRoot":false,"summaryMarkdown":"`plugins/` 目录里的文件会在 Nuxt 应用启动时按顺序执行，常用于注册第三方库、添加全局指令，或通过 `provide` 向所有组件注入工具方法。插件用 `defineNuxtPlugin()` 定义，可以访问 Nuxt 应用实例（`nuxtApp`）。文件名加上 `.client` 或 `.server` 后缀（如 `analytics.client.ts`）可以限制插件只在客户端或服务端运行。常见误区是在没有后缀限制的插件里直接访问 `window` 或 `document`，这会在服务端渲染阶段抛错。","basicInterviewQuestion":"`plugins/` 目录下的文件是什么时候执行的，通常用来做什么？","basicInterviewAnswer":"`plugins/` 目录下的文件会在 Nuxt 应用启动、根组件挂载之前按顺序执行，常用于注册第三方库（比如初始化一个 SDK）、添加全局指令，或通过 `provide` 向所有组件注入工具方法。每个插件用 `defineNuxtPlugin()` 定义，可以访问 Nuxt 应用实例 `nuxtApp`。","isFavorite":false,"nodeStatus":"unknown"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","slug":"routing","title":"路由","localizedContent":{"zh-CN":{"title":"路由","summaryMarkdown":"路由是 Nuxt 在 `vue-router` 之上提供的能力域，覆盖文件到路由的映射、动态参数、嵌套路由、路由中间件、编程式跳转和按路由定制渲染规则。它的目标是让路由配置尽量来自目录结构和约定，而不是手写一份庞大的路由表。学习这一层时要分清“路由是怎么生成的”（文件路由）和“路由跳转前后发生了什么”（中间件、`navigateTo`），这两类问题在面试和排查中经常分开考察。","basicInterviewQuestion":"Nuxt 的路由基于什么实现，文件路由解决了什么问题？","basicInterviewAnswer":"Nuxt 的路由基于 `vue-router`，但开发者通常不需要手写路由表——`pages/` 目录的文件结构会自动转换成路由配置。这解决了“路由定义和页面文件容易脱节”的问题：新增、删除或重命名一个页面文件，路由会自动同步，不需要在单独的路由配置文件里维护映射关系。"},"en":{"title":"Routing","summaryMarkdown":"Routing is the capability area Nuxt builds on top of `vue-router`, covering file-to-route mapping, dynamic params, nested routes, route middleware, programmatic navigation, and per-route rendering rules. The goal is for routing to come from directory structure and convention rather than a hand-written route table. When learning this area, separate \"how routes are generated\" (file-based routing) from \"what happens around navigation\" (middleware, `navigateTo`) — these are commonly tested as distinct topics.","basicInterviewQuestion":"What does Nuxt's routing build on, and what problem does file-based routing solve?","basicInterviewAnswer":"Nuxt's routing builds on `vue-router`, but developers usually don't hand-write a route table — the file structure under `pages/` is converted into routing config automatically. This solves the problem of route definitions drifting out of sync with page files: adding, removing, or renaming a page file automatically updates the routes, with no separate mapping file to maintain."}},"parentId":"16da00ce-53b8-4c9a-b626-cf9a62046990","sortOrder":80,"category":"core","isRoot":false,"summaryMarkdown":"路由是 Nuxt 在 `vue-router` 之上提供的能力域，覆盖文件到路由的映射、动态参数、嵌套路由、路由中间件、编程式跳转和按路由定制渲染规则。它的目标是让路由配置尽量来自目录结构和约定，而不是手写一份庞大的路由表。学习这一层时要分清“路由是怎么生成的”（文件路由）和“路由跳转前后发生了什么”（中间件、`navigateTo`），这两类问题在面试和排查中经常分开考察。","basicInterviewQuestion":"Nuxt 的路由基于什么实现，文件路由解决了什么问题？","basicInterviewAnswer":"Nuxt 的路由基于 `vue-router`，但开发者通常不需要手写路由表——`pages/` 目录的文件结构会自动转换成路由配置。这解决了“路由定义和页面文件容易脱节”的问题：新增、删除或重命名一个页面文件，路由会自动同步，不需要在单独的路由配置文件里维护映射关系。","isFavorite":false,"nodeStatus":"unknown"},{"id":"1bf6c217-528f-4910-ab4e-6d3739379ee8","slug":"file-based-routing","title":"文件路由","localizedContent":{"zh-CN":{"title":"文件路由","summaryMarkdown":"文件路由是 Nuxt 把 `pages/` 目录结构自动转换成 `vue-router` 路由表的机制。`pages/index.vue` 对应 `/`，`pages/about.vue` 对应 `/about`，`pages/users/index.vue` 对应 `/users`。文件名和目录层级直接决定路径，不需要在任何地方手动注册。常见误区是以为改文件名不影响线上路径，实际上重命名或移动 `pages/` 下的文件等价于修改路由地址，需要同步处理重定向和外部链接。","basicInterviewQuestion":"`pages/index.vue`、`pages/about.vue`、`pages/users/index.vue` 分别会生成什么路由路径？","basicInterviewAnswer":"`pages/index.vue` 对应根路径 `/`；`pages/about.vue` 对应 `/about`；`pages/users/index.vue` 对应 `/users`。文件名 `index` 表示该目录的默认子路径，目录层级直接对应 URL 的路径层级，整个映射在构建时完成，不需要手动注册。"},"en":{"title":"File-based Routing","summaryMarkdown":"File-based routing is the mechanism by which Nuxt turns the `pages/` directory structure into a `vue-router` route table automatically. `pages/index.vue` maps to `/`, `pages/about.vue` maps to `/about`, and `pages/users/index.vue` maps to `/users`. File and folder names directly determine the path, with no manual registration anywhere. A common mistake is assuming a rename doesn't affect production URLs — moving or renaming a file under `pages/` is effectively changing its route, so redirects and external links need to be updated accordingly.","basicInterviewQuestion":"What route paths do `pages/index.vue`, `pages/about.vue`, and `pages/users/index.vue` produce?","basicInterviewAnswer":"`pages/index.vue` maps to the root path `/`; `pages/about.vue` maps to `/about`; `pages/users/index.vue` maps to `/users`. The `index` filename represents the default sub-path of its directory, and folder nesting maps directly to URL path nesting — all resolved at build time with no manual registration."}},"parentId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","sortOrder":90,"category":"core","isRoot":false,"summaryMarkdown":"文件路由是 Nuxt 把 `pages/` 目录结构自动转换成 `vue-router` 路由表的机制。`pages/index.vue` 对应 `/`，`pages/about.vue` 对应 `/about`，`pages/users/index.vue` 对应 `/users`。文件名和目录层级直接决定路径，不需要在任何地方手动注册。常见误区是以为改文件名不影响线上路径，实际上重命名或移动 `pages/` 下的文件等价于修改路由地址，需要同步处理重定向和外部链接。","basicInterviewQuestion":"`pages/index.vue`、`pages/about.vue`、`pages/users/index.vue` 分别会生成什么路由路径？","basicInterviewAnswer":"`pages/index.vue` 对应根路径 `/`；`pages/about.vue` 对应 `/about`；`pages/users/index.vue` 对应 `/users`。文件名 `index` 表示该目录的默认子路径，目录层级直接对应 URL 的路径层级，整个映射在构建时完成，不需要手动注册。","isFavorite":false,"nodeStatus":"unknown"},{"id":"7477173b-faf3-4c69-a565-8aadca7a275b","slug":"dynamic-routes","title":"动态路由","localizedContent":{"zh-CN":{"title":"动态路由","summaryMarkdown":"动态路由用方括号文件名表示路径中的可变段：`pages/users/[id].vue` 会匹配 `/users/123`，参数通过 `useRoute().params.id` 读取。`[...slug].vue` 这种形式是 catch-all 路由，会匹配任意层级的剩余路径，并把结果作为数组传入 `params.slug`。容易出错的地方是动态参数始终是字符串（或字符串数组），需要自己做类型转换和合法性校验，Nuxt 不会自动帮你判断 `id` 是否是合法数字。","basicInterviewQuestion":"`pages/users/[id].vue` 如何匹配路径，参数如何在组件里读取？","basicInterviewAnswer":"`pages/users/[id].vue` 会匹配形如 `/users/123`、`/users/abc` 这样的路径，方括号中的 `id` 是动态段名称。在组件里通过 `useRoute().params.id` 读取该值，得到的始终是字符串类型，框架不会做任何类型转换。"},"en":{"title":"Dynamic Routes","summaryMarkdown":"Dynamic routes use bracketed filenames to mark variable path segments: `pages/users/[id].vue` matches `/users/123`, and the value is read via `useRoute().params.id`. A `[...slug].vue` file is a catch-all route that matches any remaining path depth, exposing the result as an array in `params.slug`. A common pitfall is that dynamic params are always strings (or string arrays) — Nuxt does not validate or convert them, so type coercion and validation, like checking that `id` is a valid number, is the developer's responsibility.","basicInterviewQuestion":"How does `pages/users/[id].vue` match a path, and how is the parameter read in the component?","basicInterviewAnswer":"`pages/users/[id].vue` matches paths like `/users/123` or `/users/abc`, where the bracketed `id` is the dynamic segment name. The component reads it via `useRoute().params.id`, which is always a string — Nuxt does not perform any type conversion."}},"parentId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","sortOrder":100,"category":"core","isRoot":false,"summaryMarkdown":"动态路由用方括号文件名表示路径中的可变段：`pages/users/[id].vue` 会匹配 `/users/123`，参数通过 `useRoute().params.id` 读取。`[...slug].vue` 这种形式是 catch-all 路由，会匹配任意层级的剩余路径，并把结果作为数组传入 `params.slug`。容易出错的地方是动态参数始终是字符串（或字符串数组），需要自己做类型转换和合法性校验，Nuxt 不会自动帮你判断 `id` 是否是合法数字。","basicInterviewQuestion":"`pages/users/[id].vue` 如何匹配路径，参数如何在组件里读取？","basicInterviewAnswer":"`pages/users/[id].vue` 会匹配形如 `/users/123`、`/users/abc` 这样的路径，方括号中的 `id` 是动态段名称。在组件里通过 `useRoute().params.id` 读取该值，得到的始终是字符串类型，框架不会做任何类型转换。","isFavorite":false,"nodeStatus":"unknown"},{"id":"f4e98fb2-2a43-4f82-ac51-a421f1a0f8ed","slug":"nested-routes","title":"嵌套路由","localizedContent":{"zh-CN":{"title":"嵌套路由","summaryMarkdown":"嵌套路由通过“同名文件 + 同名目录”的组合实现：`pages/users.vue` 作为父路由的壳层，内部放一个 ``，`pages/users/[id].vue` 等子路由会渲染到这个插槽里。这让父级页面可以保留共享的 UI（比如标签栏），同时子路由内容随路径变化切换。常见误区是只创建了 `pages/users/[id].vue` 却忘记 `pages/users.vue` 里写 ``，导致子路由匹配成功但页面空白。","basicInterviewQuestion":"如何用 Nuxt 的文件路由实现嵌套路由？父页面如何渲染子路由？","basicInterviewAnswer":"通过“同名文件 + 同名目录”实现：`pages/users.vue` 作为父路由的壳层，`pages/users/[id].vue` 等是子路由。父组件 `pages/users.vue` 的模板里需要包含一个 ``，匹配到的子路由组件会被渲染到这个位置，从而让父级的共享 UI（比如标签栏）和子路由内容同时显示。"},"en":{"title":"Nested Routes","summaryMarkdown":"Nested routes are created by pairing a file with a directory of the same name: `pages/users.vue` acts as a parent shell containing a ``, and child routes like `pages/users/[id].vue` render into that slot. This lets the parent page keep shared UI, such as a tab bar, while the child content changes with the path. A common mistake is creating `pages/users/[id].vue` without adding `` to `pages/users.vue`, so the child route matches but renders nothing.","basicInterviewQuestion":"How do you build nested routes with Nuxt's file-based routing, and how does the parent page render its child routes?","basicInterviewAnswer":"By pairing a file with a directory of the same name: `pages/users.vue` acts as the parent shell, and files like `pages/users/[id].vue` are its children. The parent component's template, `pages/users.vue`, must include a ``, where the matched child route renders, allowing shared parent UI (like a tab bar) to display alongside the child content."}},"parentId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","sortOrder":110,"category":"common","isRoot":false,"summaryMarkdown":"嵌套路由通过“同名文件 + 同名目录”的组合实现：`pages/users.vue` 作为父路由的壳层，内部放一个 ``，`pages/users/[id].vue` 等子路由会渲染到这个插槽里。这让父级页面可以保留共享的 UI（比如标签栏），同时子路由内容随路径变化切换。常见误区是只创建了 `pages/users/[id].vue` 却忘记 `pages/users.vue` 里写 ``，导致子路由匹配成功但页面空白。","basicInterviewQuestion":"如何用 Nuxt 的文件路由实现嵌套路由？父页面如何渲染子路由？","basicInterviewAnswer":"通过“同名文件 + 同名目录”实现：`pages/users.vue` 作为父路由的壳层，`pages/users/[id].vue` 等是子路由。父组件 `pages/users.vue` 的模板里需要包含一个 ``，匹配到的子路由组件会被渲染到这个位置，从而让父级的共享 UI（比如标签栏）和子路由内容同时显示。","isFavorite":false,"nodeStatus":"unknown"},{"id":"8e63826e-9729-4f17-a4fb-65ad5f2d0d5c","slug":"route-middleware","title":"route middleware","localizedContent":{"zh-CN":{"title":"route middleware","summaryMarkdown":"路由中间件是在页面导航前运行的函数，用 `defineNuxtRouteMiddleware((to, from) => {...})` 定义，常用于权限校验、登录跳转或重定向。放在 `middleware/` 目录下、文件名没有 `.global` 后缀的是命名中间件，需要在页面里通过 `definePageMeta({ middleware: 'auth' })` 显式引用；带 `.global` 后缀的会对所有路由自动生效。中间件里返回 `navigateTo()` 或抛出错误可以中断或重定向当前导航。容易出错的是在中间件里执行耗时的异步请求却没有处理好加载状态，会让页面切换看起来卡住。","basicInterviewQuestion":"`middleware/` 目录下的全局中间件和命名中间件分别如何定义和生效？","basicInterviewAnswer":"中间件统一用 `defineNuxtRouteMiddleware((to, from) => {...})` 定义。文件名带 `.global` 后缀（如 `auth.global.ts`）的中间件会对所有路由自动生效，不需要在页面里引用；不带该后缀的是命名中间件，必须在页面组件里通过 `definePageMeta({ middleware: 'auth' })` 显式引用才会执行。"},"en":{"title":"Route Middleware","summaryMarkdown":"Route middleware are functions that run before navigation, defined with `defineNuxtRouteMiddleware((to, from) => {...})`, commonly used for auth checks, login redirects, or rewrites. Files in `middleware/` without a `.global` suffix are named middleware that must be referenced explicitly via `definePageMeta({ middleware: 'auth' })`; files with `.global` run automatically on every route. Returning `navigateTo()` or throwing an error inside middleware can abort or redirect the current navigation. A common issue is running a slow async request inside middleware without handling the loading state, which makes navigation appear to freeze.","basicInterviewQuestion":"How are global and named middleware defined and applied under `middleware/`?","basicInterviewAnswer":"Middleware is defined with `defineNuxtRouteMiddleware((to, from) => {...})`. Files with a `.global` suffix, e.g. `auth.global.ts`, run automatically for every route without being referenced. Files without that suffix are named middleware, and must be explicitly referenced from a page component via `definePageMeta({ middleware: 'auth' })` to take effect."}},"parentId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","sortOrder":120,"category":"core","isRoot":false,"summaryMarkdown":"路由中间件是在页面导航前运行的函数，用 `defineNuxtRouteMiddleware((to, from) => {...})` 定义，常用于权限校验、登录跳转或重定向。放在 `middleware/` 目录下、文件名没有 `.global` 后缀的是命名中间件，需要在页面里通过 `definePageMeta({ middleware: 'auth' })` 显式引用；带 `.global` 后缀的会对所有路由自动生效。中间件里返回 `navigateTo()` 或抛出错误可以中断或重定向当前导航。容易出错的是在中间件里执行耗时的异步请求却没有处理好加载状态，会让页面切换看起来卡住。","basicInterviewQuestion":"`middleware/` 目录下的全局中间件和命名中间件分别如何定义和生效？","basicInterviewAnswer":"中间件统一用 `defineNuxtRouteMiddleware((to, from) => {...})` 定义。文件名带 `.global` 后缀（如 `auth.global.ts`）的中间件会对所有路由自动生效，不需要在页面里引用；不带该后缀的是命名中间件，必须在页面组件里通过 `definePageMeta({ middleware: 'auth' })` 显式引用才会执行。","isFavorite":false,"nodeStatus":"unknown"},{"id":"2181768b-27f4-4bc2-bb70-cdb50ca5ada6","slug":"navigate-to","title":"navigateTo()","localizedContent":{"zh-CN":{"title":"navigateTo()","summaryMarkdown":"`navigateTo()` 是 Nuxt 提供的编程式导航工具函数，可以在组件、中间件、插件和服务端代码中统一使用，替代直接操作 `vue-router` 的实例方法。它接受路径字符串、路由对象或外部 URL，并支持 `replace`、`redirectCode`、`external` 等选项。在路由中间件里，`navigateTo()` 必须配合 `return` 使用，否则中间件会继续执行后续逻辑，导致重定向不生效或出现竞态。","basicInterviewQuestion":"`navigateTo()` 是做什么的，可以在哪些地方调用？","basicInterviewAnswer":"`navigateTo()` 是 Nuxt 提供的统一编程式导航函数，可以在组件、路由中间件、插件和服务端代码中调用，替代直接操作 `vue-router` 实例。它接受路径字符串、路由对象或外部 URL，并支持 `replace`、`redirectCode`、`external` 等选项来控制跳转行为。"},"en":{"title":"navigateTo()","summaryMarkdown":"`navigateTo()` is Nuxt's universal helper for programmatic navigation, usable in components, middleware, plugins, and server code instead of calling `vue-router`'s instance methods directly. It accepts a path string, a route object, or an external URL, and supports options like `replace`, `redirectCode`, and `external`. Inside route middleware, `navigateTo()` must be used with `return`; otherwise the middleware keeps executing afterward, which can make the redirect not take effect or cause a race.","basicInterviewQuestion":"What does `navigateTo()` do, and where can it be called from?","basicInterviewAnswer":"`navigateTo()` is Nuxt's universal programmatic navigation function, callable from components, route middleware, plugins, and server code, instead of using `vue-router`'s instance directly. It accepts a path string, a route object, or an external URL, and supports options like `replace`, `redirectCode`, and `external` to control the navigation."}},"parentId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","sortOrder":130,"category":"common","isRoot":false,"summaryMarkdown":"`navigateTo()` 是 Nuxt 提供的编程式导航工具函数，可以在组件、中间件、插件和服务端代码中统一使用，替代直接操作 `vue-router` 的实例方法。它接受路径字符串、路由对象或外部 URL，并支持 `replace`、`redirectCode`、`external` 等选项。在路由中间件里，`navigateTo()` 必须配合 `return` 使用，否则中间件会继续执行后续逻辑，导致重定向不生效或出现竞态。","basicInterviewQuestion":"`navigateTo()` 是做什么的，可以在哪些地方调用？","basicInterviewAnswer":"`navigateTo()` 是 Nuxt 提供的统一编程式导航函数，可以在组件、路由中间件、插件和服务端代码中调用，替代直接操作 `vue-router` 实例。它接受路径字符串、路由对象或外部 URL，并支持 `replace`、`redirectCode`、`external` 等选项来控制跳转行为。","isFavorite":false,"nodeStatus":"unknown"},{"id":"cd3c9701-e4cc-4867-9794-13066b0f2e52","slug":"route-rules","title":"route rules","localizedContent":{"zh-CN":{"title":"route rules","summaryMarkdown":"`routeRules` 是在 `nuxt.config` 里按路径模式（支持通配符）配置渲染策略和响应行为的功能，比如让某些路径预渲染、关闭 SSR、设置缓存或重定向。它把“某个路径要怎么渲染/缓存”从代码逻辑里抽离成集中配置，常用于混合渲染（部分页面 SSR、部分静态、部分 SPA）。","basicInterviewQuestion":"如何用 `routeRules` 给 `/api/**` 路径添加自定义响应头，并把 `/old-page` 重定向到 `/new-page`？","basicInterviewAnswer":"在 `nuxt.config` 的 `routeRules` 里按路径模式配置：\n\n```ts\nexport default defineNuxtConfig({\n routeRules: {\n '/api/**': { headers: { 'cache-control': 's-maxage=60' } },\n '/old-page': { redirect: '/new-page' }\n }\n})\n```\n\n`/api/**` 使用通配符匹配该前缀下所有路径，统一附加 `cache-control` 响应头；`/old-page` 配置 `redirect` 后，访问该路径会被 Nitro 自动重定向到 `/new-page`，不需要在页面代码里手动处理。"},"en":{"title":"Route Rules","summaryMarkdown":"`routeRules` lets you configure rendering strategy and response behavior per path pattern (with wildcards) in `nuxt.config`, such as prerendering certain paths, disabling SSR, setting cache headers, or redirects. It pulls \"how this path should render or be cached\" out of application code into centralized config, and is the basis for hybrid rendering — some pages SSR, some static, some SPA.\n\n```ts\nexport default defineNuxtConfig({\n routeRules: {\n '/': { prerender: true },\n '/admin/**': { ssr: false },\n '/blog/**': { swr: 3600 }\n }\n})\n```\n\n这里 `/` 在构建期生成静态 HTML，`/admin/**` 关闭服务端渲染按 SPA 处理，`/blog/**` 使用 1 小时的 stale-while-revalidate 缓存。","basicInterviewQuestion":"How do you use `routeRules` to add a custom response header to `/api/**` and redirect `/old-page` to `/new-page`?","basicInterviewAnswer":"Configure path patterns under `routeRules` in `nuxt.config`:\n\n```ts\nexport default defineNuxtConfig({\n routeRules: {\n '/api/**': { headers: { 'cache-control': 's-maxage=60' } },\n '/old-page': { redirect: '/new-page' }\n }\n})\n```\n\nThe `/api/**` wildcard matches every path under that prefix and applies the `cache-control` header to all of them; `redirect` on `/old-page` makes Nitro automatically redirect requests to `/new-page`, with no manual handling in page code."}},"parentId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","sortOrder":140,"category":"common","isRoot":false,"summaryMarkdown":"`routeRules` 是在 `nuxt.config` 里按路径模式（支持通配符）配置渲染策略和响应行为的功能，比如让某些路径预渲染、关闭 SSR、设置缓存或重定向。它把“某个路径要怎么渲染/缓存”从代码逻辑里抽离成集中配置，常用于混合渲染（部分页面 SSR、部分静态、部分 SPA）。","basicInterviewQuestion":"如何用 `routeRules` 给 `/api/**` 路径添加自定义响应头，并把 `/old-page` 重定向到 `/new-page`？","basicInterviewAnswer":"在 `nuxt.config` 的 `routeRules` 里按路径模式配置：\n\n```ts\nexport default defineNuxtConfig({\n routeRules: {\n '/api/**': { headers: { 'cache-control': 's-maxage=60' } },\n '/old-page': { redirect: '/new-page' }\n }\n})\n```\n\n`/api/**` 使用通配符匹配该前缀下所有路径，统一附加 `cache-control` 响应头；`/old-page` 配置 `redirect` 后，访问该路径会被 Nitro 自动重定向到 `/new-page`，不需要在页面代码里手动处理。","isFavorite":false,"nodeStatus":"unknown"},{"id":"fc244abc-0b64-437e-bdc2-9353ae208a7a","slug":"data-fetching","title":"数据获取","localizedContent":{"zh-CN":{"title":"数据获取","summaryMarkdown":"数据获取是 Nuxt 围绕“在服务端和客户端之间安全、不重复地获取数据”这一问题提供的能力域，核心是 `useFetch`、`useAsyncData` 这两个组合式函数，以及它们背后的 payload 序列化和 hydration 机制。理解这一层的关键是知道数据请求会先在服务端执行一次，再把结果通过 payload 传给客户端，避免客户端再发一次相同请求。","basicInterviewQuestion":"`useFetch` 和 `useAsyncData` 共同解决了什么问题，为什么不直接在组件里用原生 `fetch`？","basicInterviewAnswer":"它们解决的是“在 SSR 场景下数据请求只执行一次，并在服务端和客户端之间共享结果”的问题。如果直接在 `setup()` 里用原生 `fetch` 发起请求，请求会在服务端渲染时执行一次，客户端 hydration 时又会重新执行一次（因为客户端不知道服务端已经请求过），造成重复请求和数据闪烁。`useFetch`/`useAsyncData` 通过统一的 key 和 payload 机制避免这种重复。"},"en":{"title":"Data Fetching","summaryMarkdown":"Data fetching is the capability area covering how to fetch data safely and without duplication across server and client, centered on the `useFetch` and `useAsyncData` composables and the payload serialization / hydration mechanism behind them. The key idea is that a data request runs once on the server, and its result is shipped to the client via the payload so the client doesn't re-issue the same request.","basicInterviewQuestion":"What problem do `useFetch` and `useAsyncData` solve together, and why not just use native `fetch` in a component?","basicInterviewAnswer":"They solve the problem of running a data request once and sharing its result between server and client during SSR. Calling native `fetch` directly in `setup()` would run the request once during server rendering, and again during client hydration — since the client has no idea the server already fetched it — causing duplicate requests and data flicker. `useFetch`/`useAsyncData` avoid this through a shared key and payload mechanism."}},"parentId":"16da00ce-53b8-4c9a-b626-cf9a62046990","sortOrder":150,"category":"core","isRoot":false,"summaryMarkdown":"数据获取是 Nuxt 围绕“在服务端和客户端之间安全、不重复地获取数据”这一问题提供的能力域，核心是 `useFetch`、`useAsyncData` 这两个组合式函数，以及它们背后的 payload 序列化和 hydration 机制。理解这一层的关键是知道数据请求会先在服务端执行一次，再把结果通过 payload 传给客户端，避免客户端再发一次相同请求。","basicInterviewQuestion":"`useFetch` 和 `useAsyncData` 共同解决了什么问题，为什么不直接在组件里用原生 `fetch`？","basicInterviewAnswer":"它们解决的是“在 SSR 场景下数据请求只执行一次，并在服务端和客户端之间共享结果”的问题。如果直接在 `setup()` 里用原生 `fetch` 发起请求，请求会在服务端渲染时执行一次，客户端 hydration 时又会重新执行一次（因为客户端不知道服务端已经请求过），造成重复请求和数据闪烁。`useFetch`/`useAsyncData` 通过统一的 key 和 payload 机制避免这种重复。","isFavorite":false,"nodeStatus":"unknown"},{"id":"eaf62a10-b2a6-41b6-92fa-a9887b2e23fa","slug":"use-fetch","title":"useFetch()","localizedContent":{"zh-CN":{"title":"useFetch()","summaryMarkdown":"`useFetch()` 是对 `$fetch` 和 `useAsyncData` 的封装，用于在组件中发起 HTTP 请求并自动处理 SSR 数据共享、缓存 key 生成和响应式状态。调用 `useFetch('/api/users')` 会返回 `data`、`pending`、`error`、`refresh` 等响应式引用，请求会在服务端渲染期间执行一次，结果通过 payload 传给客户端，避免重复请求。它的 key 默认根据 URL 和参数自动生成，但在动态参数场景下最好用 `key` 选项显式指定，避免不同请求被错误地复用同一份缓存。","basicInterviewQuestion":"`useFetch('/api/users')` 返回哪些值，请求在 SSR 模式下会执行几次？","basicInterviewAnswer":"```ts\nconst { data, pending, error, refresh } = await useFetch('/api/users')\n```\n\n`data` 是响应结果的响应式引用，`pending` 表示是否正在加载，`error` 是错误信息，`refresh` 是重新请求的方法。在 SSR 模式下请求只在服务端执行一次，结果通过 payload 传给客户端，客户端 hydration 时不会重新发起请求。"},"en":{"title":"useFetch()","summaryMarkdown":"`useFetch()` wraps `$fetch` and `useAsyncData` to issue an HTTP request from a component while automatically handling SSR data sharing, cache-key generation, and reactive state. Calling `useFetch('/api/users')` returns reactive refs like `data`, `pending`, `error`, and `refresh`; the request runs once during server rendering and its result is sent to the client via the payload, avoiding a duplicate client-side request. The cache key is auto-derived from the URL and params by default, but with dynamic params it's safer to pass an explicit `key` option to avoid different requests incorrectly sharing the same cached result.","basicInterviewQuestion":"What does `useFetch('/api/users')` return, and how many times does the request run under SSR?","basicInterviewAnswer":"```ts\nconst { data, pending, error, refresh } = await useFetch('/api/users')\n```\n\n`data` is a reactive ref holding the response, `pending` indicates loading state, `error` holds any error, and `refresh` re-runs the request. Under SSR, the request runs once on the server, and the result is shipped to the client via the payload — client hydration does not re-issue the request."}},"parentId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","sortOrder":160,"category":"core","isRoot":false,"summaryMarkdown":"`useFetch()` 是对 `$fetch` 和 `useAsyncData` 的封装，用于在组件中发起 HTTP 请求并自动处理 SSR 数据共享、缓存 key 生成和响应式状态。调用 `useFetch('/api/users')` 会返回 `data`、`pending`、`error`、`refresh` 等响应式引用，请求会在服务端渲染期间执行一次，结果通过 payload 传给客户端，避免重复请求。它的 key 默认根据 URL 和参数自动生成，但在动态参数场景下最好用 `key` 选项显式指定，避免不同请求被错误地复用同一份缓存。","basicInterviewQuestion":"`useFetch('/api/users')` 返回哪些值，请求在 SSR 模式下会执行几次？","basicInterviewAnswer":"```ts\nconst { data, pending, error, refresh } = await useFetch('/api/users')\n```\n\n`data` 是响应结果的响应式引用，`pending` 表示是否正在加载，`error` 是错误信息，`refresh` 是重新请求的方法。在 SSR 模式下请求只在服务端执行一次，结果通过 payload 传给客户端，客户端 hydration 时不会重新发起请求。","isFavorite":false,"nodeStatus":"unknown"},{"id":"733a03dd-e966-4dfd-9caa-517c06ac996e","slug":"use-async-data","title":"useAsyncData()","localizedContent":{"zh-CN":{"title":"useAsyncData()","summaryMarkdown":"`useAsyncData()` 是比 `useFetch` 更底层的数据获取组合式函数，第一个参数是唯一 key，第二个参数是任意返回 Promise 的异步函数，不限于 HTTP 请求，比如可以调用多个 API 后再合并结果。它同样支持 `lazy`、`server`、`immediate` 等选项来控制何时执行以及是否参与 SSR。和 `useFetch` 相比，`useAsyncData` 更适合需要自定义请求逻辑或聚合多个数据源的场景；如果只是单个简单的 `$fetch` 调用，`useFetch` 通常代码更少。","basicInterviewQuestion":"`useAsyncData` 的两个必需参数分别是什么，各起什么作用？","basicInterviewAnswer":"第一个参数是字符串 `key`，唯一标识这次数据请求，用于 SSR payload 的查找和缓存；第二个参数是一个返回 `Promise` 的异步函数，内部可以是任意逻辑，不限于单次 HTTP 请求。\n\n```ts\nconst { data } = await useAsyncData('dashboard', async () => {\n const [stats, alerts] = await Promise.all([\n $fetch('/api/stats'),\n $fetch('/api/alerts')\n ])\n return { stats, alerts }\n})\n```\n\n这里通过一次 `useAsyncData` 调用聚合了两个接口的结果。"},"en":{"title":"useAsyncData()","summaryMarkdown":"`useAsyncData()` is the lower-level data-fetching composable: its first argument is a unique key and its second is any function returning a promise, not limited to HTTP requests — for example, calling multiple APIs and merging the results. It supports the same `lazy`, `server`, and `immediate` options as `useFetch` to control when it runs and whether it participates in SSR. Compared to `useFetch`, `useAsyncData` fits custom fetching logic or aggregating multiple data sources; for a single plain `$fetch` call, `useFetch` is usually less code.","basicInterviewQuestion":"What are `useAsyncData`'s two required arguments, and what does each do?","basicInterviewAnswer":"The first argument is a string `key` that uniquely identifies the request, used for SSR payload lookup and caching; the second is an async function returning a `Promise`, which can contain any logic, not limited to a single HTTP call.\n\n```ts\nconst { data } = await useAsyncData('dashboard', async () => {\n const [stats, alerts] = await Promise.all([\n $fetch('/api/stats'),\n $fetch('/api/alerts')\n ])\n return { stats, alerts }\n})\n```\n\nHere a single `useAsyncData` call aggregates results from two endpoints."}},"parentId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","sortOrder":170,"category":"core","isRoot":false,"summaryMarkdown":"`useAsyncData()` 是比 `useFetch` 更底层的数据获取组合式函数，第一个参数是唯一 key，第二个参数是任意返回 Promise 的异步函数，不限于 HTTP 请求，比如可以调用多个 API 后再合并结果。它同样支持 `lazy`、`server`、`immediate` 等选项来控制何时执行以及是否参与 SSR。和 `useFetch` 相比，`useAsyncData` 更适合需要自定义请求逻辑或聚合多个数据源的场景；如果只是单个简单的 `$fetch` 调用，`useFetch` 通常代码更少。","basicInterviewQuestion":"`useAsyncData` 的两个必需参数分别是什么，各起什么作用？","basicInterviewAnswer":"第一个参数是字符串 `key`，唯一标识这次数据请求，用于 SSR payload 的查找和缓存；第二个参数是一个返回 `Promise` 的异步函数，内部可以是任意逻辑，不限于单次 HTTP 请求。\n\n```ts\nconst { data } = await useAsyncData('dashboard', async () => {\n const [stats, alerts] = await Promise.all([\n $fetch('/api/stats'),\n $fetch('/api/alerts')\n ])\n return { stats, alerts }\n})\n```\n\n这里通过一次 `useAsyncData` 调用聚合了两个接口的结果。","isFavorite":false,"nodeStatus":"unknown"},{"id":"2ab2d684-2d4c-4e3f-b422-1789461fc22e","slug":"refresh-clear","title":"refresh / clear","localizedContent":{"zh-CN":{"title":"refresh / clear","summaryMarkdown":"`refresh()` 和 `clear()` 是 `useFetch` / `useAsyncData` 返回对象里的方法，用来在不重新挂载组件的情况下重新获取或清空数据。`refresh()` 会重新执行原来的请求并更新 `data`、`pending`、`error`，常用于“刷新按钮”或在某个操作后重新拉取最新列表；`clear()` 会把 `data` 重置为初始值（通常是 `undefined` 或 `null`）并取消挂起的请求，但不会触发新的请求。容易混淆的是 `refresh()` 默认会复用相同的 key 和参数，如果请求参数变化了但 key 没变，需要显式更新 key 或传入新的请求函数才能拿到新数据。","basicInterviewQuestion":"`useFetch`/`useAsyncData` 返回的 `refresh()` 和 `clear()` 分别做什么？","basicInterviewAnswer":"`refresh()` 会重新执行原来的请求并更新 `data`、`pending`、`error`，常用于“刷新”按钮或在某个写操作后重新拉取最新列表；`clear()` 会把 `data` 重置为初始值（通常是 `undefined`），并取消挂起的请求，但不会触发新的请求。"},"en":{"title":"refresh and clear","summaryMarkdown":"`refresh()` and `clear()` are methods returned by `useFetch` / `useAsyncData` for re-fetching or resetting data without remounting the component. `refresh()` re-runs the original request and updates `data`, `pending`, and `error`, commonly used for a refresh button or to reload a list after a mutation. `clear()` resets `data` to its initial value (usually `undefined` or `null`) and cancels any pending request, without triggering a new one. A common confusion is that `refresh()` reuses the same key and params by default — if the request parameters changed but the key didn't, you need to update the key or pass a new fetch function to get fresh data.","basicInterviewQuestion":"What do the `refresh()` and `clear()` methods returned by `useFetch`/`useAsyncData` do?","basicInterviewAnswer":"`refresh()` re-runs the original request and updates `data`, `pending`, and `error`, commonly used for a refresh button or to reload a list after a mutation. `clear()` resets `data` to its initial value (usually `undefined`) and cancels any pending request, without triggering a new one."}},"parentId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","sortOrder":180,"category":"common","isRoot":false,"summaryMarkdown":"`refresh()` 和 `clear()` 是 `useFetch` / `useAsyncData` 返回对象里的方法，用来在不重新挂载组件的情况下重新获取或清空数据。`refresh()` 会重新执行原来的请求并更新 `data`、`pending`、`error`，常用于“刷新按钮”或在某个操作后重新拉取最新列表；`clear()` 会把 `data` 重置为初始值（通常是 `undefined` 或 `null`）并取消挂起的请求，但不会触发新的请求。容易混淆的是 `refresh()` 默认会复用相同的 key 和参数，如果请求参数变化了但 key 没变，需要显式更新 key 或传入新的请求函数才能拿到新数据。","basicInterviewQuestion":"`useFetch`/`useAsyncData` 返回的 `refresh()` 和 `clear()` 分别做什么？","basicInterviewAnswer":"`refresh()` 会重新执行原来的请求并更新 `data`、`pending`、`error`，常用于“刷新”按钮或在某个写操作后重新拉取最新列表；`clear()` 会把 `data` 重置为初始值（通常是 `undefined`），并取消挂起的请求，但不会触发新的请求。","isFavorite":false,"nodeStatus":"unknown"},{"id":"b74d7e85-1ccc-4f6f-87a4-e3bafa3612ad","slug":"payload-hydration","title":"payload hydration","localizedContent":{"zh-CN":{"title":"payload hydration","summaryMarkdown":"Payload hydration 是 Nuxt 把服务端渲染期间产生的状态（`useState`、`useFetch`/`useAsyncData` 的结果等）序列化后内嵌进 HTML，再由客户端在挂载时读取并恢复，从而避免“服务端请求过一次、客户端再请求一次”的重复工作。这部分数据通常可以在 `window.__NUXT__` 中观察到。容易出错的是把不可序列化的内容（比如类实例、循环引用、函数）放进需要被 SSR 共享的状态里，会导致 hydration 时丢失数据或运行时报错。","basicInterviewQuestion":"Payload hydration 解决了什么问题，序列化后的数据通常出现在哪里？","basicInterviewAnswer":"Payload hydration 把服务端渲染期间产生的状态（`useState`、`useFetch`/`useAsyncData` 的结果等）序列化后内嵌进返回的 HTML，客户端在挂载时读取并恢复这些数据，从而避免“服务端请求过一次、客户端再请求一次”的重复工作。这部分序列化数据通常可以在浏览器中通过 `window.__NUXT__` 观察到。"},"en":{"title":"Payload Hydration","summaryMarkdown":"Payload hydration is how Nuxt serializes server-rendered state — `useState` values, `useFetch`/`useAsyncData` results — and embeds it in the HTML, so the client reads and restores it on mount instead of re-running the same fetches. This data is typically visible in `window.__NUXT__`. A common pitfall is putting non-serializable values — class instances, circular references, functions — into state that needs to be shared via SSR, which causes data loss or runtime errors during hydration.","basicInterviewQuestion":"What problem does payload hydration solve, and where does the serialized data typically show up?","basicInterviewAnswer":"Payload hydration serializes server-rendered state — `useState` values, `useFetch`/`useAsyncData` results — and embeds it in the returned HTML, so the client reads and restores it on mount instead of re-running the same fetches. This serialized data is typically visible in the browser via `window.__NUXT__`."}},"parentId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","sortOrder":190,"category":"core","isRoot":false,"summaryMarkdown":"Payload hydration 是 Nuxt 把服务端渲染期间产生的状态（`useState`、`useFetch`/`useAsyncData` 的结果等）序列化后内嵌进 HTML，再由客户端在挂载时读取并恢复，从而避免“服务端请求过一次、客户端再请求一次”的重复工作。这部分数据通常可以在 `window.__NUXT__` 中观察到。容易出错的是把不可序列化的内容（比如类实例、循环引用、函数）放进需要被 SSR 共享的状态里，会导致 hydration 时丢失数据或运行时报错。","basicInterviewQuestion":"Payload hydration 解决了什么问题，序列化后的数据通常出现在哪里？","basicInterviewAnswer":"Payload hydration 把服务端渲染期间产生的状态（`useState`、`useFetch`/`useAsyncData` 的结果等）序列化后内嵌进返回的 HTML，客户端在挂载时读取并恢复这些数据，从而避免“服务端请求过一次、客户端再请求一次”的重复工作。这部分序列化数据通常可以在浏览器中通过 `window.__NUXT__` 观察到。","isFavorite":false,"nodeStatus":"unknown"},{"id":"1b925857-99be-462e-93a6-a8201c8ec568","slug":"server-client-boundary","title":"server/client 边界","localizedContent":{"zh-CN":{"title":"server/client 边界","summaryMarkdown":"Server/client 边界指的是同一段 Nuxt 代码可能在服务端和浏览器两种环境下运行，必须区分哪些 API 和对象只在其中一侧可用。`import.meta.server` / `import.meta.client`（或 `process.server` / `process.client`）可以在代码里判断当前运行环境；`window`、`document`、`localStorage` 等浏览器 API 只能在客户端访问，通常放在 `onMounted()` 或 `.client` 后缀的文件里。常见错误是直接在组件 `setup()` 顶层访问 `window`，会在服务端渲染阶段抛出 `ReferenceError`。","basicInterviewQuestion":"为什么不能在组件 `setup()` 顶层直接访问 `window`？应该如何改写？","basicInterviewAnswer":"Nuxt 应用的代码会在服务端 Node.js 环境和浏览器环境中各运行一次；服务端环境没有 `window` 对象，在 `setup()` 顶层直接访问会抛出 `ReferenceError`，导致 SSR 渲染失败。应该把这类访问放进 `onMounted()`（只在客户端执行的生命周期钩子），或者用 `import.meta.client` 判断当前环境后再访问。"},"en":{"title":"Server and Client Boundary","summaryMarkdown":"The server/client boundary refers to the fact that the same Nuxt code can run both on the server and in the browser, so you must know which APIs and globals are only available on one side. `import.meta.server` / `import.meta.client` (or `process.server` / `process.client`) let code branch on the current environment; browser-only APIs like `window`, `document`, and `localStorage` are only safe on the client, typically inside `onMounted()` or `.client`-suffixed files. A common error is accessing `window` directly at the top level of a component's `setup()`, which throws a `ReferenceError` during server rendering.","basicInterviewQuestion":"Why can't you access `window` directly at the top level of a component's `setup()`, and how should it be rewritten?","basicInterviewAnswer":"Nuxt app code runs once on the server in Node.js and once in the browser; the server environment has no `window` object, so accessing it at the top level of `setup()` throws a `ReferenceError` and breaks SSR. Such access should go inside `onMounted()`, a lifecycle hook that only runs on the client, or be guarded with `import.meta.client` before accessing it."}},"parentId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","sortOrder":200,"category":"core","isRoot":false,"summaryMarkdown":"Server/client 边界指的是同一段 Nuxt 代码可能在服务端和浏览器两种环境下运行，必须区分哪些 API 和对象只在其中一侧可用。`import.meta.server` / `import.meta.client`（或 `process.server` / `process.client`）可以在代码里判断当前运行环境；`window`、`document`、`localStorage` 等浏览器 API 只能在客户端访问，通常放在 `onMounted()` 或 `.client` 后缀的文件里。常见错误是直接在组件 `setup()` 顶层访问 `window`，会在服务端渲染阶段抛出 `ReferenceError`。","basicInterviewQuestion":"为什么不能在组件 `setup()` 顶层直接访问 `window`？应该如何改写？","basicInterviewAnswer":"Nuxt 应用的代码会在服务端 Node.js 环境和浏览器环境中各运行一次；服务端环境没有 `window` 对象，在 `setup()` 顶层直接访问会抛出 `ReferenceError`，导致 SSR 渲染失败。应该把这类访问放进 `onMounted()`（只在客户端执行的生命周期钩子），或者用 `import.meta.client` 判断当前环境后再访问。","isFavorite":false,"nodeStatus":"unknown"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","slug":"server-nitro","title":"Server 与 Nitro","localizedContent":{"zh-CN":{"title":"Server 与 Nitro","summaryMarkdown":"Server 与 Nitro 是 Nuxt 服务端能力的总称，覆盖 `server/` 目录下的 API 路由、中间件、存储和工具函数，以及它们背后由 Nitro 提供的运行时。这一层解决的是“前端框架如何同时承担轻量后端职责”的问题：不需要单独的 Express/Koa 服务，Nuxt 应用本身就能处理 API 请求、读写存储和跨平台部署。","basicInterviewQuestion":"`server/` 目录和 Nitro 是什么关系？为什么 Nuxt 应用能直接处理 API 请求而不需要单独的后端服务？","basicInterviewAnswer":"`server/` 目录里的文件（API 路由、中间件、存储、工具函数）由 Nitro 这个服务端引擎统一编译和运行；Nitro 把这些代码和页面渲染逻辑一起打包成一个可以独立运行的服务端产物（Node.js 服务器、Serverless 函数等）。这意味着 Nuxt 应用本身就具备 HTTP 服务端能力，可以在 `server/api/` 下编写接口处理逻辑，不需要额外起一个 Express 服务来配合。"},"en":{"title":"Server and Nitro","summaryMarkdown":"Server and Nitro is the umbrella for Nuxt's server-side capability — API routes, middleware, storage, and utilities under `server/`, all running on the Nitro runtime underneath. It addresses how a frontend framework can also act as a lightweight backend: a Nuxt app can handle API requests, read and write storage, and deploy across platforms without a separate Express or Koa server.","basicInterviewQuestion":"What's the relationship between the `server/` directory and Nitro, and why can a Nuxt app handle API requests without a separate backend service?","basicInterviewAnswer":"Files under `server/` — API routes, middleware, storage, utilities — are compiled and run by Nitro, the server engine. Nitro bundles this code together with the page rendering logic into a single deployable server output (a Node.js server, serverless functions, etc.). This means a Nuxt app itself has HTTP server capability — you can write request handlers under `server/api/` without spinning up a separate Express server."}},"parentId":"16da00ce-53b8-4c9a-b626-cf9a62046990","sortOrder":210,"category":"core","isRoot":false,"summaryMarkdown":"Server 与 Nitro 是 Nuxt 服务端能力的总称，覆盖 `server/` 目录下的 API 路由、中间件、存储和工具函数，以及它们背后由 Nitro 提供的运行时。这一层解决的是“前端框架如何同时承担轻量后端职责”的问题：不需要单独的 Express/Koa 服务，Nuxt 应用本身就能处理 API 请求、读写存储和跨平台部署。","basicInterviewQuestion":"`server/` 目录和 Nitro 是什么关系？为什么 Nuxt 应用能直接处理 API 请求而不需要单独的后端服务？","basicInterviewAnswer":"`server/` 目录里的文件（API 路由、中间件、存储、工具函数）由 Nitro 这个服务端引擎统一编译和运行；Nitro 把这些代码和页面渲染逻辑一起打包成一个可以独立运行的服务端产物（Node.js 服务器、Serverless 函数等）。这意味着 Nuxt 应用本身就具备 HTTP 服务端能力，可以在 `server/api/` 下编写接口处理逻辑，不需要额外起一个 Express 服务来配合。","isFavorite":false,"nodeStatus":"unknown"},{"id":"e65aeefc-c4b2-4647-92f1-de1ad3b8a149","slug":"server-routes","title":"server routes","localizedContent":{"zh-CN":{"title":"server routes","summaryMarkdown":"`server/api/` 和 `server/routes/` 下的文件会被 Nitro 自动注册为服务端路由，每个文件用 `defineEventHandler()` 导出一个处理函数，接收 `event` 对象。`server/api/` 下的路径会自动加上 `/api` 前缀，`server/routes/` 不会。文件名可以包含 HTTP 方法后缀，比如 `users.get.ts` 只处理 `GET` 请求、`users.post.ts` 只处理 `POST`，这样同一路径的不同方法可以拆成不同文件。","basicInterviewQuestion":"`server/api/users.get.ts` 是如何被 Nitro 注册为路由的？文件名里的 `.get` 起什么作用？","basicInterviewAnswer":"```ts\n// server/api/users.get.ts\nexport default defineEventHandler((event) => {\n return { users: ['alice', 'bob'] }\n})\n```\n\nNitro 会扫描 `server/api/` 目录，把 `users.get.ts` 注册为路径 `/api/users` 的处理函数，文件名中的 `.get` 后缀表示这个 handler 只处理 `GET` 请求。`defineEventHandler` 接收 `event` 对象，返回值会被自动序列化为 JSON 响应。"},"en":{"title":"Server Routes","summaryMarkdown":"Files under `server/api/` and `server/routes/` are automatically registered as server routes by Nitro, each exporting a handler created with `defineEventHandler()` that receives an `event` object. Paths under `server/api/` get an automatic `/api` prefix; `server/routes/` do not. Filenames can include an HTTP method suffix — `users.get.ts` only handles `GET`, `users.post.ts` only `POST` — so different methods on the same path can live in separate files.\n\n```ts\n// server/api/users.get.ts\nexport default defineEventHandler((event) => {\n return { users: ['alice', 'bob'] }\n})\n```\n\n这个 handler 会注册为 `/api/users` 的 `GET` 处理函数。","basicInterviewQuestion":"How does `server/api/users.get.ts` get registered as a route by Nitro, and what does the `.get` suffix in the filename do?","basicInterviewAnswer":"```ts\n// server/api/users.get.ts\nexport default defineEventHandler((event) => {\n return { users: ['alice', 'bob'] }\n})\n```\n\nNitro scans `server/api/` and registers `users.get.ts` as the handler for `/api/users`; the `.get` suffix in the filename means this handler only responds to `GET` requests. `defineEventHandler` receives an `event` object, and its return value is automatically serialized as a JSON response."}},"parentId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","sortOrder":220,"category":"core","isRoot":false,"summaryMarkdown":"`server/api/` 和 `server/routes/` 下的文件会被 Nitro 自动注册为服务端路由，每个文件用 `defineEventHandler()` 导出一个处理函数，接收 `event` 对象。`server/api/` 下的路径会自动加上 `/api` 前缀，`server/routes/` 不会。文件名可以包含 HTTP 方法后缀，比如 `users.get.ts` 只处理 `GET` 请求、`users.post.ts` 只处理 `POST`，这样同一路径的不同方法可以拆成不同文件。","basicInterviewQuestion":"`server/api/users.get.ts` 是如何被 Nitro 注册为路由的？文件名里的 `.get` 起什么作用？","basicInterviewAnswer":"```ts\n// server/api/users.get.ts\nexport default defineEventHandler((event) => {\n return { users: ['alice', 'bob'] }\n})\n```\n\nNitro 会扫描 `server/api/` 目录，把 `users.get.ts` 注册为路径 `/api/users` 的处理函数，文件名中的 `.get` 后缀表示这个 handler 只处理 `GET` 请求。`defineEventHandler` 接收 `event` 对象，返回值会被自动序列化为 JSON 响应。","isFavorite":false,"nodeStatus":"unknown"},{"id":"232efdb1-31c7-4cf2-b631-97e30b6e891b","slug":"api-routes","title":"API routes","localizedContent":{"zh-CN":{"title":"API routes","summaryMarkdown":"API routes 是 `server/api/` 目录下专门用于构建后端接口的服务端路由，统一加上 `/api` 前缀，通常用 `readBody(event)`、`getQuery(event)`、`getRouterParam(event, 'id')` 读取请求数据，并直接 `return` JSON 数据或调用 `createError()` 抛出 HTTP 错误。它让 Nuxt 项目可以内置一个轻量后端，常用于 BFF（Backend for Frontend）场景：把第三方 API 聚合、鉴权或裁剪后再返回给前端。容易出错的是在 API route 里直接把数据库连接或密钥暴露在响应里，或者忘记对输入做校验。","basicInterviewQuestion":"在 `server/api/login.post.ts` 里如何读取请求体并在校验失败时返回错误？","basicInterviewAnswer":"```ts\nexport default defineEventHandler(async (event) => {\n const body = await readBody(event)\n\n if (!body.username || !body.password) {\n throw createError({ statusCode: 400, statusMessage: 'Missing credentials' })\n }\n\n return { token: 'xxx' }\n})\n```\n\n`readBody(event)` 解析请求体（自动处理 JSON），`createError()` 抛出的错误会被 Nitro 转换成对应状态码的 HTTP 响应，普通 `return` 的对象会被序列化为 JSON 响应体。"},"en":{"title":"API Routes","summaryMarkdown":"API routes are the server routes under `server/api/` dedicated to building backend endpoints, automatically prefixed with `/api`. They typically read request data with `readBody(event)`, `getQuery(event)`, or `getRouterParam(event, 'id')`, then `return` JSON or throw an HTTP error via `createError()`. This lets a Nuxt project ship a lightweight backend, commonly used as a BFF (backend for frontend) that aggregates, authenticates, or trims third-party APIs before returning data to the client. Common mistakes are leaking database connections or secrets in the response, or skipping input validation.","basicInterviewQuestion":"How do you read the request body and return an error on validation failure in `server/api/login.post.ts`?","basicInterviewAnswer":"```ts\nexport default defineEventHandler(async (event) => {\n const body = await readBody(event)\n\n if (!body.username || !body.password) {\n throw createError({ statusCode: 400, statusMessage: 'Missing credentials' })\n }\n\n return { token: 'xxx' }\n})\n```\n\n`readBody(event)` parses the request body (handling JSON automatically), an error thrown via `createError()` is converted by Nitro into an HTTP response with that status code, and a plain returned object is serialized as the JSON response body."}},"parentId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","sortOrder":230,"category":"core","isRoot":false,"summaryMarkdown":"API routes 是 `server/api/` 目录下专门用于构建后端接口的服务端路由，统一加上 `/api` 前缀，通常用 `readBody(event)`、`getQuery(event)`、`getRouterParam(event, 'id')` 读取请求数据，并直接 `return` JSON 数据或调用 `createError()` 抛出 HTTP 错误。它让 Nuxt 项目可以内置一个轻量后端，常用于 BFF（Backend for Frontend）场景：把第三方 API 聚合、鉴权或裁剪后再返回给前端。容易出错的是在 API route 里直接把数据库连接或密钥暴露在响应里，或者忘记对输入做校验。","basicInterviewQuestion":"在 `server/api/login.post.ts` 里如何读取请求体并在校验失败时返回错误？","basicInterviewAnswer":"```ts\nexport default defineEventHandler(async (event) => {\n const body = await readBody(event)\n\n if (!body.username || !body.password) {\n throw createError({ statusCode: 400, statusMessage: 'Missing credentials' })\n }\n\n return { token: 'xxx' }\n})\n```\n\n`readBody(event)` 解析请求体（自动处理 JSON），`createError()` 抛出的错误会被 Nitro 转换成对应状态码的 HTTP 响应，普通 `return` 的对象会被序列化为 JSON 响应体。","isFavorite":false,"nodeStatus":"unknown"},{"id":"0b1c4134-4885-4124-915f-cc19172f2bd8","slug":"server-middleware","title":"server middleware","localizedContent":{"zh-CN":{"title":"server middleware","summaryMarkdown":"`server/middleware/` 目录下的文件会在每个进入 Nitro 的请求上运行，常用于日志记录、设置响应头、鉴权预处理等横切逻辑。和 `server/api/` 不同，server middleware 默认不返回响应内容，只能读取或修改 `event`（比如设置 `event.context` 上的自定义字段供后续 handler 使用），如果需要提前结束请求，需要显式调用 `sendRedirect` 或抛出错误。文件名前缀的字母顺序决定了多个 middleware 的执行顺序。","basicInterviewQuestion":"`server/middleware/` 下的文件和 `server/api/` 下的 handler，在“是否产生响应内容”这一点上有什么区别？","basicInterviewAnswer":"`server/api/` 下的 handler 通过 `return` 一个值来产生响应体，是处理某个具体路径请求的终点。`server/middleware/` 下的文件会在每个请求上运行，但默认不返回响应内容，只能读取或修改 `event`（比如往 `event.context` 写入数据供后续 handler 使用）；如果需要提前结束请求（比如返回错误或重定向），需要显式调用相应的函数。"},"en":{"title":"Server Middleware","summaryMarkdown":"Files in `server/middleware/` run on every request that hits Nitro, commonly used for cross-cutting logic like logging, setting response headers, or auth pre-checks. Unlike `server/api/` handlers, server middleware doesn't return a response body by default — it can only read or mutate the `event` (e.g. attaching custom fields to `event.context` for later handlers); ending the request early requires calling `sendRedirect` or throwing an error explicitly. The alphabetical order of filenames determines the execution order of multiple middleware.","basicInterviewQuestion":"In terms of \"whether they produce a response body,\" how do files under `server/middleware/` differ from handlers under `server/api/`?","basicInterviewAnswer":"A handler under `server/api/` produces a response body by `return`ing a value — it's the terminal point for a specific path's request. Files under `server/middleware/` run on every request but don't produce a response body by default; they can only read or mutate the `event` (e.g. attaching data to `event.context` for later handlers). Ending the request early — returning an error or a redirect — requires calling the appropriate function explicitly."}},"parentId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","sortOrder":240,"category":"common","isRoot":false,"summaryMarkdown":"`server/middleware/` 目录下的文件会在每个进入 Nitro 的请求上运行，常用于日志记录、设置响应头、鉴权预处理等横切逻辑。和 `server/api/` 不同，server middleware 默认不返回响应内容，只能读取或修改 `event`（比如设置 `event.context` 上的自定义字段供后续 handler 使用），如果需要提前结束请求，需要显式调用 `sendRedirect` 或抛出错误。文件名前缀的字母顺序决定了多个 middleware 的执行顺序。","basicInterviewQuestion":"`server/middleware/` 下的文件和 `server/api/` 下的 handler，在“是否产生响应内容”这一点上有什么区别？","basicInterviewAnswer":"`server/api/` 下的 handler 通过 `return` 一个值来产生响应体，是处理某个具体路径请求的终点。`server/middleware/` 下的文件会在每个请求上运行，但默认不返回响应内容，只能读取或修改 `event`（比如往 `event.context` 写入数据供后续 handler 使用）；如果需要提前结束请求（比如返回错误或重定向），需要显式调用相应的函数。","isFavorite":false,"nodeStatus":"unknown"},{"id":"b1d02b7d-3eab-4d01-942e-1380a907c5c1","slug":"nitro","title":"Nitro","localizedContent":{"zh-CN":{"title":"Nitro","summaryMarkdown":"Nitro 是 Nuxt 底层的服务端引擎，负责把 `server/` 目录下的代码、API 路由和渲染逻辑打包成可以部署到不同平台的产物，比如 Node.js 服务器、Serverless 函数（Vercel、Netlify、AWS Lambda）或边缘运行时（Cloudflare Workers）。开发者一般不直接调用 Nitro 的 API，而是通过 `nuxt.config` 里的 `nitro` 选项配置预设（preset）、路由规则和构建行为。理解 Nitro 的关键是知道“同一份代码可以一次构建、多平台部署”，但不同平台对文件系统、长连接、定时任务的支持存在差异，需要按目标平台调整。","basicInterviewQuestion":"Nitro 在 Nuxt 架构中扮演什么角色？开发者一般通过什么方式配置它？","basicInterviewAnswer":"Nitro 是 Nuxt 底层的服务端引擎，负责把 `server/` 目录下的代码、API 路由和页面渲染逻辑打包成可以部署到不同平台（Node.js 服务器、Serverless、边缘运行时）的产物。开发者一般不直接调用 Nitro 的 API，而是通过 `nuxt.config` 里的 `nitro` 选项配置部署预设（preset）、路由规则等行为。"},"en":{"title":"Nitro","summaryMarkdown":"Nitro is the server engine underneath Nuxt, responsible for bundling code in `server/`, API routes, and rendering logic into output for different deployment targets — a Node.js server, serverless functions (Vercel, Netlify, AWS Lambda), or edge runtimes like Cloudflare Workers. Developers rarely call Nitro's APIs directly; instead they configure presets, route rules, and build behavior through the `nitro` option in `nuxt.config`. The key idea is \"build once, deploy to many platforms\" — but filesystem access, long-lived connections, and scheduled tasks vary by platform and may need target-specific adjustments.","basicInterviewQuestion":"What role does Nitro play in Nuxt's architecture, and how do developers typically configure it?","basicInterviewAnswer":"Nitro is the server engine underneath Nuxt, bundling code under `server/`, API routes, and page rendering logic into output deployable to different targets — Node.js servers, serverless, edge runtimes. Developers rarely call Nitro's APIs directly; instead they configure deployment presets, route rules, and similar behavior through the `nitro` option in `nuxt.config`."}},"parentId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","sortOrder":250,"category":"core","isRoot":false,"summaryMarkdown":"Nitro 是 Nuxt 底层的服务端引擎，负责把 `server/` 目录下的代码、API 路由和渲染逻辑打包成可以部署到不同平台的产物，比如 Node.js 服务器、Serverless 函数（Vercel、Netlify、AWS Lambda）或边缘运行时（Cloudflare Workers）。开发者一般不直接调用 Nitro 的 API，而是通过 `nuxt.config` 里的 `nitro` 选项配置预设（preset）、路由规则和构建行为。理解 Nitro 的关键是知道“同一份代码可以一次构建、多平台部署”，但不同平台对文件系统、长连接、定时任务的支持存在差异，需要按目标平台调整。","basicInterviewQuestion":"Nitro 在 Nuxt 架构中扮演什么角色？开发者一般通过什么方式配置它？","basicInterviewAnswer":"Nitro 是 Nuxt 底层的服务端引擎，负责把 `server/` 目录下的代码、API 路由和页面渲染逻辑打包成可以部署到不同平台（Node.js 服务器、Serverless、边缘运行时）的产物。开发者一般不直接调用 Nitro 的 API，而是通过 `nuxt.config` 里的 `nitro` 选项配置部署预设（preset）、路由规则等行为。","isFavorite":false,"nodeStatus":"unknown"},{"id":"d86245d2-2a7f-4193-b13b-652ead3a500c","slug":"server-storage","title":"server storage","localizedContent":{"zh-CN":{"title":"server storage","summaryMarkdown":"`useStorage()` 是 Nitro 提供的统一键值存储接口，底层基于 `unstorage`，可以挂载内存、文件系统、Redis、数据库等不同驱动，但调用方式（`getItem`、`setItem`、`removeItem`）保持一致。它常用于在服务端缓存计算结果、存放会话数据，或在不同部署环境之间切换存储后端而不改业务代码。需要注意的是默认的内存或文件驱动在 Serverless 环境下可能不持久化，跨请求或跨实例共享数据通常需要换成 Redis 等外部驱动。","basicInterviewQuestion":"`useStorage()` 提供了什么能力？调用方式是否依赖具体使用了哪种存储后端？","basicInterviewAnswer":"`useStorage()` 是 Nitro 提供的统一键值存储接口，底层基于 `unstorage`，可以挂载内存、文件系统、Redis、数据库等不同驱动。无论挂载的是哪种驱动，调用方式（`getItem`、`setItem`、`removeItem`）保持一致，业务代码不需要因为更换存储后端而修改。"},"en":{"title":"Server Storage","summaryMarkdown":"`useStorage()` is Nitro's unified key-value storage interface, built on `unstorage`, which can mount different drivers — memory, filesystem, Redis, databases — behind the same `getItem`, `setItem`, `removeItem` calls. It's commonly used for server-side caching, session data, or swapping storage backends across environments without changing application code. A key caveat is that the default memory or filesystem driver may not persist in serverless environments, so sharing data across requests or instances usually requires an external driver like Redis.","basicInterviewQuestion":"What does `useStorage()` provide, and does the calling code depend on which storage backend is used?","basicInterviewAnswer":"`useStorage()` is Nitro's unified key-value storage interface, built on `unstorage`, which can mount different drivers — memory, filesystem, Redis, databases. Regardless of which driver is mounted, the calling API (`getItem`, `setItem`, `removeItem`) stays the same, so application code doesn't need to change when the storage backend is swapped."}},"parentId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","sortOrder":260,"category":"common","isRoot":false,"summaryMarkdown":"`useStorage()` 是 Nitro 提供的统一键值存储接口，底层基于 `unstorage`，可以挂载内存、文件系统、Redis、数据库等不同驱动，但调用方式（`getItem`、`setItem`、`removeItem`）保持一致。它常用于在服务端缓存计算结果、存放会话数据，或在不同部署环境之间切换存储后端而不改业务代码。需要注意的是默认的内存或文件驱动在 Serverless 环境下可能不持久化，跨请求或跨实例共享数据通常需要换成 Redis 等外部驱动。","basicInterviewQuestion":"`useStorage()` 提供了什么能力？调用方式是否依赖具体使用了哪种存储后端？","basicInterviewAnswer":"`useStorage()` 是 Nitro 提供的统一键值存储接口，底层基于 `unstorage`，可以挂载内存、文件系统、Redis、数据库等不同驱动。无论挂载的是哪种驱动，调用方式（`getItem`、`setItem`、`removeItem`）保持一致，业务代码不需要因为更换存储后端而修改。","isFavorite":false,"nodeStatus":"unknown"},{"id":"754dedcd-df19-4df9-8838-fdccfa4dc1c1","slug":"server-utils","title":"server utils","localizedContent":{"zh-CN":{"title":"server utils","summaryMarkdown":"`server/utils/` 目录下导出的函数会被 Nitro 自动导入，可以直接在任意 `server/` 下的文件里调用，不需要写 `import` 语句，类似客户端的 `composables/` 自动导入。它常用于封装多个 API route 共享的逻辑，比如统一的鉴权检查、数据库连接获取或响应格式化。容易出错的是把客户端专用的代码（依赖 `window`、Vue 组件相关 API）放进 `server/utils/`，这些代码只在服务端运行环境里执行，混用会导致引用错误。","basicInterviewQuestion":"`server/utils/` 的自动导入和 `composables/` 的自动导入有什么相似和不同？","basicInterviewAnswer":"相似点：两者都是 Nuxt 基于目录扫描实现的自动导入机制，调用时不需要写 `import`。不同点：`composables/` 的内容只在客户端/通用代码（组件、页面）里可用；`server/utils/` 的内容只在 `server/` 目录下的代码（API 路由、中间件等）里自动可用，两者的运行环境和可用 API 完全不同，不能跨边界使用。"},"en":{"title":"Server Utils","summaryMarkdown":"Functions exported from `server/utils/` are auto-imported by Nitro and can be called directly from any file under `server/` without an `import` statement, similar to client-side auto-imports from `composables/`. It's commonly used to share logic across multiple API routes — auth checks, getting a database connection, or formatting responses. A common mistake is putting client-only code (depending on `window` or Vue component APIs) into `server/utils/`; this code only runs in the server environment, and mixing the two causes reference errors.","basicInterviewQuestion":"How is auto-import for `server/utils/` similar to and different from auto-import for `composables/`?","basicInterviewAnswer":"Both are directory-scan-based auto-import mechanisms in Nuxt that remove the need for `import` statements. The difference: `composables/` exports are available in client/universal code — components and pages — while `server/utils/` exports are only auto-available in code under `server/`, such as API routes and middleware. The two run in completely different environments with different available APIs and can't be used across that boundary."}},"parentId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","sortOrder":270,"category":"common","isRoot":false,"summaryMarkdown":"`server/utils/` 目录下导出的函数会被 Nitro 自动导入，可以直接在任意 `server/` 下的文件里调用，不需要写 `import` 语句，类似客户端的 `composables/` 自动导入。它常用于封装多个 API route 共享的逻辑，比如统一的鉴权检查、数据库连接获取或响应格式化。容易出错的是把客户端专用的代码（依赖 `window`、Vue 组件相关 API）放进 `server/utils/`，这些代码只在服务端运行环境里执行，混用会导致引用错误。","basicInterviewQuestion":"`server/utils/` 的自动导入和 `composables/` 的自动导入有什么相似和不同？","basicInterviewAnswer":"相似点：两者都是 Nuxt 基于目录扫描实现的自动导入机制，调用时不需要写 `import`。不同点：`composables/` 的内容只在客户端/通用代码（组件、页面）里可用；`server/utils/` 的内容只在 `server/` 目录下的代码（API 路由、中间件等）里自动可用，两者的运行环境和可用 API 完全不同，不能跨边界使用。","isFavorite":false,"nodeStatus":"unknown"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9","slug":"rendering-config","title":"渲染与配置","localizedContent":{"zh-CN":{"title":"渲染与配置","summaryMarkdown":"渲染与配置是 Nuxt 决定“页面在什么时候、用什么方式生成 HTML”以及“运行时配置如何在服务端和客户端之间传递”的能力域，覆盖 SSR、SPA 模式、预渲染、`runtimeConfig`、`app.config` 和 SEO 相关的 `useHead`。这一层的核心心智模型是：渲染模式决定了页面在构建时还是请求时生成 HTML，而配置机制决定了不同环境下的变量值如何注入应用，两者经常一起出现在部署和性能讨论里。","basicInterviewQuestion":"Nuxt 提供了哪些渲染模式？决定渲染模式和决定运行时配置分别属于哪类机制？","basicInterviewAnswer":"Nuxt 支持 SSR（默认，每次请求服务端渲染）、SPA（`ssr: false`，纯客户端渲染）和预渲染（构建时生成静态 HTML），还可以通过 `routeRules` 按路径混合使用这几种模式。渲染模式属于“页面 HTML 何时、如何生成”的构建/部署层决策；`runtimeConfig` 和 `app.config` 属于“运行时变量如何在服务端和客户端之间传递”的配置机制，两者可以正交组合——比如一个预渲染页面仍然可以读取 `runtimeConfig.public` 中的值。"},"en":{"title":"Rendering and Configuration","summaryMarkdown":"Rendering and configuration is the capability area covering when and how Nuxt generates HTML for a page, and how runtime configuration flows between server and client — including SSR, SPA mode, prerendering, `runtimeConfig`, `app.config`, and SEO via `useHead`. The core mental model: rendering mode decides whether HTML is generated at build time or request time, while configuration decides how environment-specific values are injected into the app — the two are frequently discussed together in deployment and performance contexts.","basicInterviewQuestion":"What rendering modes does Nuxt offer, and which category — rendering mode vs. runtime configuration — does each mechanism belong to?","basicInterviewAnswer":"Nuxt supports SSR (the default, rendering on every request), SPA (`ssr: false`, fully client-rendered), and prerendering (static HTML generated at build time), and these can be mixed per path via `routeRules`. Rendering mode is a build/deploy-level decision about when and how page HTML is generated; `runtimeConfig` and `app.config` are configuration mechanisms about how runtime values flow between server and client. The two are orthogonal — a prerendered page can still read values from `runtimeConfig.public`."}},"parentId":"16da00ce-53b8-4c9a-b626-cf9a62046990","sortOrder":280,"category":"core","isRoot":false,"summaryMarkdown":"渲染与配置是 Nuxt 决定“页面在什么时候、用什么方式生成 HTML”以及“运行时配置如何在服务端和客户端之间传递”的能力域，覆盖 SSR、SPA 模式、预渲染、`runtimeConfig`、`app.config` 和 SEO 相关的 `useHead`。这一层的核心心智模型是：渲染模式决定了页面在构建时还是请求时生成 HTML，而配置机制决定了不同环境下的变量值如何注入应用，两者经常一起出现在部署和性能讨论里。","basicInterviewQuestion":"Nuxt 提供了哪些渲染模式？决定渲染模式和决定运行时配置分别属于哪类机制？","basicInterviewAnswer":"Nuxt 支持 SSR（默认，每次请求服务端渲染）、SPA（`ssr: false`，纯客户端渲染）和预渲染（构建时生成静态 HTML），还可以通过 `routeRules` 按路径混合使用这几种模式。渲染模式属于“页面 HTML 何时、如何生成”的构建/部署层决策；`runtimeConfig` 和 `app.config` 属于“运行时变量如何在服务端和客户端之间传递”的配置机制，两者可以正交组合——比如一个预渲染页面仍然可以读取 `runtimeConfig.public` 中的值。","isFavorite":false,"nodeStatus":"unknown"},{"id":"71470cab-a5be-4b78-8663-46364c92643b","slug":"ssr","title":"SSR","localizedContent":{"zh-CN":{"title":"SSR","summaryMarkdown":"SSR（服务端渲染）是 Nuxt 的默认渲染模式：每次请求页面时，服务器先执行 Vue 组件并生成完整的 HTML 返回给浏览器，浏览器再加载 JS 完成 hydration。它的好处是首屏内容对用户和爬虫立即可见，不需要等待 JS 执行；代价是每次请求都需要服务器计算资源，且组件代码必须能在 Node.js 环境运行（不能直接用浏览器专属 API）。`nuxt.config` 中的 `ssr: false` 会全局关闭 SSR，退化为 SPA 模式。","basicInterviewQuestion":"SSR 模式下，一次页面请求的渲染流程是怎样的？关闭 SSR 会发生什么？","basicInterviewAnswer":"在 SSR（默认）模式下，每次请求页面时，服务器会执行 Vue 组件、运行 `setup()`、处理数据请求并生成完整的 HTML 返回给浏览器，浏览器再加载 JS 完成 hydration。`nuxt.config` 中设置 `ssr: false` 会全局关闭 SSR，应用退化为只在浏览器端渲染的 SPA 模式。"},"en":{"title":"SSR","summaryMarkdown":"SSR (server-side rendering) is Nuxt's default rendering mode: on each request, the server executes the Vue components to produce full HTML, sends it to the browser, which then loads JS and hydrates. The benefit is that initial content is visible to users and crawlers immediately, without waiting for JS execution; the cost is that every request consumes server compute, and component code must be able to run in Node.js (no direct use of browser-only APIs). Setting `ssr: false` in `nuxt.config` disables SSR globally, falling back to SPA mode.","basicInterviewQuestion":"What happens during a page request under SSR (the default mode), and what changes if SSR is disabled?","basicInterviewAnswer":"Under SSR (the default), each page request causes the server to execute the Vue components, run `setup()`, handle data requests, and produce full HTML returned to the browser, which then loads JS and hydrates. Setting `ssr: false` in `nuxt.config` disables SSR globally, and the app falls back to a browser-only SPA."}},"parentId":"160893f2-c442-4089-8ebd-ef5761eda0c9","sortOrder":290,"category":"core","isRoot":false,"summaryMarkdown":"SSR（服务端渲染）是 Nuxt 的默认渲染模式：每次请求页面时，服务器先执行 Vue 组件并生成完整的 HTML 返回给浏览器，浏览器再加载 JS 完成 hydration。它的好处是首屏内容对用户和爬虫立即可见，不需要等待 JS 执行；代价是每次请求都需要服务器计算资源，且组件代码必须能在 Node.js 环境运行（不能直接用浏览器专属 API）。`nuxt.config` 中的 `ssr: false` 会全局关闭 SSR，退化为 SPA 模式。","basicInterviewQuestion":"SSR 模式下，一次页面请求的渲染流程是怎样的？关闭 SSR 会发生什么？","basicInterviewAnswer":"在 SSR（默认）模式下，每次请求页面时，服务器会执行 Vue 组件、运行 `setup()`、处理数据请求并生成完整的 HTML 返回给浏览器，浏览器再加载 JS 完成 hydration。`nuxt.config` 中设置 `ssr: false` 会全局关闭 SSR，应用退化为只在浏览器端渲染的 SPA 模式。","isFavorite":false,"nodeStatus":"unknown"},{"id":"5c2104a7-c0e2-4e52-8ec9-dc49c7e24d2f","slug":"spa-mode","title":"SPA mode","localizedContent":{"zh-CN":{"title":"SPA mode","summaryMarkdown":"SPA 模式通过在 `nuxt.config` 中设置 `ssr: false` 关闭服务端渲染，应用在构建时只生成一个空壳 HTML 和一份 JS bundle，所有渲染都在浏览器里完成。Nuxt 会插入一个可自定义的加载占位页面（spa loading template），在 JS 加载完成前显示，避免白屏。SPA 模式适合后台管理系统这类不需要 SEO、且用户主要通过登录态访问的应用；代价是首屏内容依赖 JS 执行完成，对未登录的爬虫或慢网络用户不友好。","basicInterviewQuestion":"如何让 Nuxt 应用以 SPA 模式运行？这种模式下构建产物和渲染流程有什么变化？","basicInterviewAnswer":"在 `nuxt.config` 中设置 `ssr: false` 即可关闭服务端渲染，构建时只会生成一个空壳 HTML 和一份 JS bundle，所有渲染都在浏览器里完成。Nuxt 会插入一个可自定义的加载占位页面，在 JS 加载完成前显示，避免用户看到完全空白的页面。"},"en":{"title":"SPA Mode","summaryMarkdown":"SPA mode disables server-side rendering by setting `ssr: false` in `nuxt.config`; the build produces an empty HTML shell plus a JS bundle, and all rendering happens in the browser. Nuxt inserts a customizable spa loading template shown until the JS finishes loading, avoiding a blank screen. SPA mode suits apps like admin dashboards that don't need SEO and are mostly accessed behind a login; the trade-off is that initial content depends on JS execution, which is unfriendly to crawlers or users on slow connections.","basicInterviewQuestion":"How do you run a Nuxt app in SPA mode, and what changes about the build output and rendering flow?","basicInterviewAnswer":"Setting `ssr: false` in `nuxt.config` disables server-side rendering; the build produces only an empty HTML shell plus a JS bundle, and all rendering happens in the browser. Nuxt inserts a customizable loading placeholder shown until the JS finishes loading, avoiding a fully blank page."}},"parentId":"160893f2-c442-4089-8ebd-ef5761eda0c9","sortOrder":300,"category":"common","isRoot":false,"summaryMarkdown":"SPA 模式通过在 `nuxt.config` 中设置 `ssr: false` 关闭服务端渲染，应用在构建时只生成一个空壳 HTML 和一份 JS bundle，所有渲染都在浏览器里完成。Nuxt 会插入一个可自定义的加载占位页面（spa loading template），在 JS 加载完成前显示，避免白屏。SPA 模式适合后台管理系统这类不需要 SEO、且用户主要通过登录态访问的应用；代价是首屏内容依赖 JS 执行完成，对未登录的爬虫或慢网络用户不友好。","basicInterviewQuestion":"如何让 Nuxt 应用以 SPA 模式运行？这种模式下构建产物和渲染流程有什么变化？","basicInterviewAnswer":"在 `nuxt.config` 中设置 `ssr: false` 即可关闭服务端渲染，构建时只会生成一个空壳 HTML 和一份 JS bundle，所有渲染都在浏览器里完成。Nuxt 会插入一个可自定义的加载占位页面，在 JS 加载完成前显示，避免用户看到完全空白的页面。","isFavorite":false,"nodeStatus":"unknown"},{"id":"58f0b141-17d0-4aef-a234-d81f8c55fcba","slug":"prerendering","title":"prerendering","localizedContent":{"zh-CN":{"title":"prerendering","summaryMarkdown":"预渲染是在构建阶段（`nuxi generate`）就把指定路由的 HTML 生成好并存为静态文件，部署后这些路由不需要服务器实时渲染，可以直接由 CDN 或静态托管返回。Nuxt 默认会爬取 `/` 路由能链接到的页面进行预渲染，也可以通过 `nitro.prerender.routes` 显式指定额外路径，或在 `routeRules` 里给某个路径设置 `{ prerender: true }`。预渲染适合内容不依赖请求时数据的页面，比如博客文章或落地页；如果页面内容依赖登录态或实时数据，预渲染出的 HTML 会是过期或错误的快照。","basicInterviewQuestion":"预渲染是在哪个阶段生成 HTML 的？哪些方式可以让某个路径被纳入预渲染范围？","basicInterviewAnswer":"预渲染在构建阶段（`nuxi generate`）就为指定路由生成静态 HTML 文件，部署后这些路径不需要服务器实时渲染。Nuxt 默认会从 `/` 出发爬取页面里能链接到的路由进行预渲染，也可以通过 `nitro.prerender.routes` 显式指定额外路径，或在 `routeRules` 里给某个路径设置 `{ prerender: true }`。"},"en":{"title":"Prerendering","summaryMarkdown":"Prerendering generates the HTML for selected routes at build time (via `nuxi generate`) and saves them as static files, so after deployment those routes can be served directly by a CDN or static host without server-side rendering at request time. Nuxt by default crawls pages reachable from `/` and prerenders them; additional paths can be specified explicitly via `nitro.prerender.routes`, or by setting `{ prerender: true }` on a path in `routeRules`. Prerendering suits pages whose content doesn't depend on request-time data, like blog posts or landing pages; if a page's content depends on login state or live data, the prerendered HTML becomes a stale or incorrect snapshot.","basicInterviewQuestion":"At what stage is prerendered HTML generated, and how can a path be included in prerendering?","basicInterviewAnswer":"Prerendering generates static HTML files for specified routes during the build (`nuxi generate`), so those paths don't need server-side rendering after deployment. By default, Nuxt crawls pages reachable from `/` and prerenders them; additional paths can be added explicitly via `nitro.prerender.routes`, or by setting `{ prerender: true }` on a path in `routeRules`."}},"parentId":"160893f2-c442-4089-8ebd-ef5761eda0c9","sortOrder":310,"category":"core","isRoot":false,"summaryMarkdown":"预渲染是在构建阶段（`nuxi generate`）就把指定路由的 HTML 生成好并存为静态文件，部署后这些路由不需要服务器实时渲染，可以直接由 CDN 或静态托管返回。Nuxt 默认会爬取 `/` 路由能链接到的页面进行预渲染，也可以通过 `nitro.prerender.routes` 显式指定额外路径，或在 `routeRules` 里给某个路径设置 `{ prerender: true }`。预渲染适合内容不依赖请求时数据的页面，比如博客文章或落地页；如果页面内容依赖登录态或实时数据，预渲染出的 HTML 会是过期或错误的快照。","basicInterviewQuestion":"预渲染是在哪个阶段生成 HTML 的？哪些方式可以让某个路径被纳入预渲染范围？","basicInterviewAnswer":"预渲染在构建阶段（`nuxi generate`）就为指定路由生成静态 HTML 文件，部署后这些路径不需要服务器实时渲染。Nuxt 默认会从 `/` 出发爬取页面里能链接到的路由进行预渲染，也可以通过 `nitro.prerender.routes` 显式指定额外路径，或在 `routeRules` 里给某个路径设置 `{ prerender: true }`。","isFavorite":false,"nodeStatus":"unknown"},{"id":"2bb2d027-489e-45b9-bb48-15edde180d66","slug":"runtime-config","title":"runtimeConfig","localizedContent":{"zh-CN":{"title":"runtimeConfig","summaryMarkdown":"`runtimeConfig` 是在 `nuxt.config` 里定义运行时变量（比如 API 地址、密钥）的地方，分为顶层私有字段和 `public` 字段：私有字段只在服务端可用，`public` 字段会同时暴露给服务端和客户端。它的值可以在运行时通过同名的环境变量覆盖（命名规则是 `NUXT_` 加上字段路径的大写下划线形式），适合“构建一次、不同环境注入不同配置”的部署方式。容易出错的是把密钥误放进 `public` 字段，导致敏感信息被打包进客户端 bundle。","basicInterviewQuestion":"如何用环境变量覆盖 `nuxt.config` 里 `runtimeConfig.public.apiBase` 的值，命名规则是什么？","basicInterviewAnswer":"```ts\nexport default defineNuxtConfig({\n runtimeConfig: {\n public: {\n apiBase: '/api'\n }\n }\n})\n```\n\n对应的环境变量名是 `NUXT_PUBLIC_API_BASE`，命名规则是 `NUXT_` 前缀加上字段路径（嵌套字段用下划线分隔）的大写形式。设置该环境变量后，运行时 `useRuntimeConfig().public.apiBase` 会读取到环境变量的值，而不是配置文件里的默认值。"},"en":{"title":"runtimeConfig","summaryMarkdown":"`runtimeConfig` is where you define runtime variables — API base URLs, secrets — in `nuxt.config`, split into top-level private fields and a `public` section: private fields are server-only, while `public` fields are exposed to both server and client. Values can be overridden at runtime via environment variables following the `NUXT_` plus uppercase-underscore field path convention, fitting a \"build once, configure per environment\" deployment model.\n\n```ts\nexport default defineNuxtConfig({\n runtimeConfig: {\n apiSecret: '',\n public: {\n apiBase: '/api'\n }\n }\n})\n```\n\n`apiSecret` 只能在服务端通过 `useRuntimeConfig().apiSecret` 读取；`apiBase` 在客户端和服务端都能通过 `useRuntimeConfig().public.apiBase` 读取。把密钥误放进 `public` 会让它被打包进客户端代码。","basicInterviewQuestion":"How can an environment variable override `runtimeConfig.public.apiBase` in `nuxt.config`, and what's the naming convention?","basicInterviewAnswer":"```ts\nexport default defineNuxtConfig({\n runtimeConfig: {\n public: {\n apiBase: '/api'\n }\n }\n})\n```\n\nThe corresponding environment variable is `NUXT_PUBLIC_API_BASE` — the convention is the `NUXT_` prefix plus the uppercase field path, with nested fields separated by underscores. Once that environment variable is set, `useRuntimeConfig().public.apiBase` returns its value at runtime instead of the config file's default."}},"parentId":"160893f2-c442-4089-8ebd-ef5761eda0c9","sortOrder":320,"category":"core","isRoot":false,"summaryMarkdown":"`runtimeConfig` 是在 `nuxt.config` 里定义运行时变量（比如 API 地址、密钥）的地方，分为顶层私有字段和 `public` 字段：私有字段只在服务端可用，`public` 字段会同时暴露给服务端和客户端。它的值可以在运行时通过同名的环境变量覆盖（命名规则是 `NUXT_` 加上字段路径的大写下划线形式），适合“构建一次、不同环境注入不同配置”的部署方式。容易出错的是把密钥误放进 `public` 字段，导致敏感信息被打包进客户端 bundle。","basicInterviewQuestion":"如何用环境变量覆盖 `nuxt.config` 里 `runtimeConfig.public.apiBase` 的值，命名规则是什么？","basicInterviewAnswer":"```ts\nexport default defineNuxtConfig({\n runtimeConfig: {\n public: {\n apiBase: '/api'\n }\n }\n})\n```\n\n对应的环境变量名是 `NUXT_PUBLIC_API_BASE`，命名规则是 `NUXT_` 前缀加上字段路径（嵌套字段用下划线分隔）的大写形式。设置该环境变量后，运行时 `useRuntimeConfig().public.apiBase` 会读取到环境变量的值，而不是配置文件里的默认值。","isFavorite":false,"nodeStatus":"unknown"},{"id":"5b44796d-7f1b-41f7-8f13-2969b44679bd","slug":"app-config","title":"app.config","localizedContent":{"zh-CN":{"title":"app.config","summaryMarkdown":"`app.config.ts` 用于定义应用级的公共配置，比如主题色、功能开关，内容会被打包进客户端代码并且是响应式的（可以在运行时通过 `updateAppConfig()` 修改）。它和 `runtimeConfig` 的区别是：`app.config` 里的内容在构建时就确定，不能用环境变量覆盖，但所有内容默认对客户端可见，适合放不敏感、可能需要在 UI 中动态调整的配置；`runtimeConfig` 适合需要按部署环境注入、且包含私密信息的配置。两者用途相近但边界不同，容易被混用。","basicInterviewQuestion":"`app.config.ts` 适合存放什么样的配置？它和 `runtimeConfig` 的关键区别是什么？","basicInterviewAnswer":"`app.config.ts` 适合存放主题色、功能开关这类不敏感、可能需要在 UI 中动态调整的应用级公共配置；其内容会被打包进客户端代码并且是响应式的，可以通过 `updateAppConfig()` 在运行时修改。关键区别在于 `app.config` 的内容在构建时就确定，不能用环境变量覆盖，且默认对客户端完全可见；`runtimeConfig` 适合按部署环境注入、且可能包含私密信息的配置。"},"en":{"title":"app.config","summaryMarkdown":"`app.config.ts` defines app-level public configuration, such as theme colors or feature flags, which is bundled into client code and is reactive — it can be updated at runtime via `updateAppConfig()`. The difference from `runtimeConfig` is that `app.config` values are fixed at build time and can't be overridden by environment variables, but everything in it is visible to the client by default, making it suitable for non-sensitive config that the UI may adjust dynamically. `runtimeConfig` instead suits values injected per deployment environment, including secrets. The two serve similar purposes but have different boundaries, and are often confused.","basicInterviewQuestion":"What kind of config belongs in `app.config.ts`, and what's the key difference from `runtimeConfig`?","basicInterviewAnswer":"`app.config.ts` suits non-sensitive, app-level public config that the UI might adjust dynamically — theme colors, feature flags. Its content is bundled into client code, is reactive, and can be updated at runtime via `updateAppConfig()`. The key difference: `app.config` values are fixed at build time, can't be overridden by environment variables, and are fully visible to the client by default; `runtimeConfig` suits values injected per deployment environment, including secrets."}},"parentId":"160893f2-c442-4089-8ebd-ef5761eda0c9","sortOrder":330,"category":"common","isRoot":false,"summaryMarkdown":"`app.config.ts` 用于定义应用级的公共配置，比如主题色、功能开关，内容会被打包进客户端代码并且是响应式的（可以在运行时通过 `updateAppConfig()` 修改）。它和 `runtimeConfig` 的区别是：`app.config` 里的内容在构建时就确定，不能用环境变量覆盖，但所有内容默认对客户端可见，适合放不敏感、可能需要在 UI 中动态调整的配置；`runtimeConfig` 适合需要按部署环境注入、且包含私密信息的配置。两者用途相近但边界不同，容易被混用。","basicInterviewQuestion":"`app.config.ts` 适合存放什么样的配置？它和 `runtimeConfig` 的关键区别是什么？","basicInterviewAnswer":"`app.config.ts` 适合存放主题色、功能开关这类不敏感、可能需要在 UI 中动态调整的应用级公共配置；其内容会被打包进客户端代码并且是响应式的，可以通过 `updateAppConfig()` 在运行时修改。关键区别在于 `app.config` 的内容在构建时就确定，不能用环境变量覆盖，且默认对客户端完全可见；`runtimeConfig` 适合按部署环境注入、且可能包含私密信息的配置。","isFavorite":false,"nodeStatus":"unknown"},{"id":"e7f2aff0-0fa8-4d10-825d-c5fe0e0d5534","slug":"seo-head","title":"useHead / SEO","localizedContent":{"zh-CN":{"title":"useHead / SEO","summaryMarkdown":"`useHead()` 和 `useSeoMeta()` 是 Nuxt 提供的组合式函数，用于在组件或页面里设置 `` 内容，比如 ``、`meta`、`link` 标签。`useHead()` 接受通用的 head 描述对象，适合自定义标签；`useSeoMeta()` 提供了类型安全的常见 SEO 字段（如 `title`、`description`、`ogImage`），写法更简洁且不容易拼错属性名。在 SSR 模式下，这些标签会在服务端渲染阶段就写入 HTML，对 SEO 和社交分享预览生效；如果在 SPA 模式下使用，head 标签是在客户端通过 JS 修改的，爬虫可能看不到。","basicInterviewQuestion":"`useHead()` 和 `useSeoMeta()` 有什么区别？分别适合什么场景？","basicInterviewAnswer":"`useHead()` 接受通用的 head 描述对象，可以设置任意 `<head>` 标签，适合自定义标签或不在常见 SEO 字段范围内的内容；`useSeoMeta()` 提供了类型安全的常见 SEO 字段（如 `title`、`description`、`ogImage`），写法更简洁，且不容易拼错属性名，适合日常的页面标题和社交分享元信息设置。"},"en":{"title":"useHead and SEO","summaryMarkdown":"`useHead()` and `useSeoMeta()` are composables for setting `<head>` content from a component or page — `<title>`, `meta`, `link` tags. `useHead()` takes a generic head description object suited to custom tags; `useSeoMeta()` offers type-safe common SEO fields (`title`, `description`, `ogImage`) with a more concise syntax and less risk of misspelled keys. In SSR mode these tags are written into the HTML during server rendering, so they work for SEO and social preview cards; in SPA mode the head tags are modified via JS on the client, and crawlers may never see them.","basicInterviewQuestion":"What's the difference between `useHead()` and `useSeoMeta()`, and when should each be used?","basicInterviewAnswer":"`useHead()` takes a generic head description object and can set any `<head>` tag, suiting custom tags or content outside common SEO fields. `useSeoMeta()` provides type-safe common SEO fields — `title`, `description`, `ogImage` — with more concise syntax and less risk of misspelled keys, suiting everyday page titles and social-sharing metadata."}},"parentId":"160893f2-c442-4089-8ebd-ef5761eda0c9","sortOrder":340,"category":"core","isRoot":false,"summaryMarkdown":"`useHead()` 和 `useSeoMeta()` 是 Nuxt 提供的组合式函数，用于在组件或页面里设置 `<head>` 内容，比如 `<title>`、`meta`、`link` 标签。`useHead()` 接受通用的 head 描述对象，适合自定义标签；`useSeoMeta()` 提供了类型安全的常见 SEO 字段（如 `title`、`description`、`ogImage`），写法更简洁且不容易拼错属性名。在 SSR 模式下，这些标签会在服务端渲染阶段就写入 HTML，对 SEO 和社交分享预览生效；如果在 SPA 模式下使用，head 标签是在客户端通过 JS 修改的，爬虫可能看不到。","basicInterviewQuestion":"`useHead()` 和 `useSeoMeta()` 有什么区别？分别适合什么场景？","basicInterviewAnswer":"`useHead()` 接受通用的 head 描述对象，可以设置任意 `<head>` 标签，适合自定义标签或不在常见 SEO 字段范围内的内容；`useSeoMeta()` 提供了类型安全的常见 SEO 字段（如 `title`、`description`、`ogImage`），写法更简洁，且不容易拼错属性名，适合日常的页面标题和社交分享元信息设置。","isFavorite":false,"nodeStatus":"unknown"},{"id":"138f15f8-34c5-412a-b315-ea69938cf0a4","slug":"modules-build","title":"Modules 与构建","localizedContent":{"zh-CN":{"title":"Modules 与构建","summaryMarkdown":"Modules 与构建是 Nuxt 围绕“如何扩展框架能力”和“如何控制构建期行为”的能力域，覆盖模块系统、`nuxt.config`、layers、自动导入和 DevTools。模块是 Nuxt 生态扩展功能的标准方式（比如集成 UI 库、状态管理、SEO 工具），而 `nuxt.config` 是几乎所有框架行为的统一入口，理解这一层有助于判断“某个功能应该装模块还是改配置”。","basicInterviewQuestion":"Nuxt 模块、`nuxt.config`、layers 和自动导入这几个机制，分别解决什么问题？","basicInterviewAnswer":"模块（modules）通过 `defineNuxtModule` 封装可复用的功能扩展，通常会注册插件、组件、composables 或修改构建配置；`nuxt.config` 是项目级的中心配置文件，集中管理模块列表、运行时配置、渲染规则等；layers 通过 `extends` 让多个项目共享一套基础配置、组件和页面，实现跨项目复用；自动导入则是 Nuxt 的编译时机制，自动发现并按需导入 composables、工具函数和 Vue API，无需手写 import 语句。这几个机制共同构成了 Nuxt“约定优于配置”且可扩展的架构。"},"en":{"title":"Modules and Build","summaryMarkdown":"Modules and build is the capability area for extending the framework and controlling build-time behavior — covering the module system, `nuxt.config`, layers, auto-imports, and DevTools. Modules are the standard way the Nuxt ecosystem adds functionality (UI libraries, state management, SEO tooling), while `nuxt.config` is the central entry point for almost all framework behavior; understanding this area helps decide whether a feature should be a module or a config change.","basicInterviewQuestion":"What problems do Nuxt modules, `nuxt.config`, layers, and auto-imports each solve?","basicInterviewAnswer":"Modules wrap reusable functionality via `defineNuxtModule`, typically registering plugins, components, composables, or modifying build config. `nuxt.config` is the project's central configuration file managing the module list, runtime config, rendering rules, and more. Layers, via `extends`, let multiple projects share a base configuration, components, and pages for cross-project reuse. Auto-imports is a compile-time mechanism that discovers and imports composables, utilities, and Vue APIs on demand without manual `import` statements. Together these mechanisms form Nuxt's convention-over-configuration, extensible architecture."}},"parentId":"16da00ce-53b8-4c9a-b626-cf9a62046990","sortOrder":350,"category":"core","isRoot":false,"summaryMarkdown":"Modules 与构建是 Nuxt 围绕“如何扩展框架能力”和“如何控制构建期行为”的能力域，覆盖模块系统、`nuxt.config`、layers、自动导入和 DevTools。模块是 Nuxt 生态扩展功能的标准方式（比如集成 UI 库、状态管理、SEO 工具），而 `nuxt.config` 是几乎所有框架行为的统一入口，理解这一层有助于判断“某个功能应该装模块还是改配置”。","basicInterviewQuestion":"Nuxt 模块、`nuxt.config`、layers 和自动导入这几个机制，分别解决什么问题？","basicInterviewAnswer":"模块（modules）通过 `defineNuxtModule` 封装可复用的功能扩展，通常会注册插件、组件、composables 或修改构建配置；`nuxt.config` 是项目级的中心配置文件，集中管理模块列表、运行时配置、渲染规则等；layers 通过 `extends` 让多个项目共享一套基础配置、组件和页面，实现跨项目复用；自动导入则是 Nuxt 的编译时机制，自动发现并按需导入 composables、工具函数和 Vue API，无需手写 import 语句。这几个机制共同构成了 Nuxt“约定优于配置”且可扩展的架构。","isFavorite":false,"nodeStatus":"unknown"},{"id":"92f80df7-93ff-43c0-9630-cfc85cc26d57","slug":"modules","title":"modules","localizedContent":{"zh-CN":{"title":"modules","summaryMarkdown":"Modules 是 Nuxt 的官方扩展机制，在 `nuxt.config` 的 `modules` 数组中声明（比如 `@nuxt/image`、`@pinia/nuxt`），由 Nuxt 在构建时按声明顺序加载并执行。一个模块可以注册组件、composable、插件、构建钩子，相当于把一组相关功能打包成可插拔的单元。开发者自己也可以用 `defineNuxtModule()` 编写模块，但日常使用更多是安装并配置社区模块。容易出错的是模块加载顺序会影响某些钩子的执行结果，部分模块对顺序敏感（比如需要在某个模块之后注册）。","basicInterviewQuestion":"如何在 Nuxt 项目中安装并启用一个模块？","basicInterviewAnswer":"先用包管理器安装该模块的 npm 包（例如 `npm install @nuxtjs/tailwindcss`），然后在 `nuxt.config` 的 `modules` 数组中加入模块名字符串（`'@nuxtjs/tailwindcss'`）。Nuxt 在启动时会按数组顺序依次加载并执行每个模块的 `setup` 逻辑，模块可能会自动注册组件、composables、插件或修改构建配置，无需额外手动配置。"},"en":{"title":"Modules","summaryMarkdown":"Modules are Nuxt's official extension mechanism, declared in the `modules` array of `nuxt.config` (e.g. `@nuxt/image`, `@pinia/nuxt`), and loaded by Nuxt at build time in declaration order. A module can register components, composables, plugins, and build hooks — packaging related functionality into a pluggable unit. Developers can also author modules with `defineNuxtModule()`, though day-to-day usage is mostly installing and configuring community modules. A common pitfall is that module load order affects certain hooks, and some modules are order-sensitive, expecting to be registered after another module.","basicInterviewQuestion":"How do you install and enable a module in a Nuxt project?","basicInterviewAnswer":"First install the module's npm package with a package manager (e.g. `npm install @nuxtjs/tailwindcss`), then add the module name string (`'@nuxtjs/tailwindcss'`) to the `modules` array in `nuxt.config`. On startup, Nuxt loads and runs each module's `setup` logic in array order; a module may automatically register components, composables, plugins, or modify the build config without further manual setup."}},"parentId":"138f15f8-34c5-412a-b315-ea69938cf0a4","sortOrder":360,"category":"common","isRoot":false,"summaryMarkdown":"Modules 是 Nuxt 的官方扩展机制，在 `nuxt.config` 的 `modules` 数组中声明（比如 `@nuxt/image`、`@pinia/nuxt`），由 Nuxt 在构建时按声明顺序加载并执行。一个模块可以注册组件、composable、插件、构建钩子，相当于把一组相关功能打包成可插拔的单元。开发者自己也可以用 `defineNuxtModule()` 编写模块，但日常使用更多是安装并配置社区模块。容易出错的是模块加载顺序会影响某些钩子的执行结果，部分模块对顺序敏感（比如需要在某个模块之后注册）。","basicInterviewQuestion":"如何在 Nuxt 项目中安装并启用一个模块？","basicInterviewAnswer":"先用包管理器安装该模块的 npm 包（例如 `npm install @nuxtjs/tailwindcss`），然后在 `nuxt.config` 的 `modules` 数组中加入模块名字符串（`'@nuxtjs/tailwindcss'`）。Nuxt 在启动时会按数组顺序依次加载并执行每个模块的 `setup` 逻辑，模块可能会自动注册组件、composables、插件或修改构建配置，无需额外手动配置。","isFavorite":false,"nodeStatus":"unknown"},{"id":"6e450b73-1fc8-4ca0-984e-d38e4ae28f0b","slug":"nuxt-config","title":"nuxt.config","localizedContent":{"zh-CN":{"title":"nuxt.config","summaryMarkdown":"`nuxt.config.ts` 是 Nuxt 项目的中央配置文件，用 `defineNuxtConfig()` 包裹一个配置对象，几乎所有框架行为——模块、`runtimeConfig`、`routeRules`、构建选项、`css`、`app` 元信息——都通过它配置。它在构建时被读取，修改后通常需要重启开发服务器才能生效。","basicInterviewQuestion":"`nuxt.config.ts` 的基本结构是什么？常见的顶层配置项有哪些？","basicInterviewAnswer":"```ts\nexport default defineNuxtConfig({\n modules: ['@nuxtjs/tailwindcss'],\n css: ['~/assets/main.css'],\n app: {\n head: {\n title: 'My App'\n }\n }\n})\n```\n\n`nuxt.config.ts` 默认导出一个由 `defineNuxtConfig` 包裹的配置对象，常见顶层字段包括：`modules`（要启用的模块列表）、`css`（全局样式文件）、`app`（应用级配置，如 head 标签、页面过渡）、`runtimeConfig`（运行时变量）、`routeRules`（按路径的渲染规则）等。`defineNuxtConfig` 主要提供类型提示，本身不改变配置内容。"},"en":{"title":"nuxt.config","summaryMarkdown":"`nuxt.config.ts` is a Nuxt project's central configuration file, wrapping a config object with `defineNuxtConfig()`. Almost every framework behavior — modules, `runtimeConfig`, `routeRules`, build options, `css`, `app` metadata — is configured through it. It is read at build time, and changes usually require restarting the dev server to take effect.\n\n```ts\nexport default defineNuxtConfig({\n modules: ['@nuxt/image'],\n css: ['~/assets/main.css'],\n app: {\n head: {\n title: 'My App'\n }\n }\n})\n```\n\n这里同时声明了一个模块、一个全局样式文件和默认的页面标题。","basicInterviewQuestion":"What's the basic structure of `nuxt.config.ts`, and what are common top-level config fields?","basicInterviewAnswer":"```ts\nexport default defineNuxtConfig({\n modules: ['@nuxtjs/tailwindcss'],\n css: ['~/assets/main.css'],\n app: {\n head: {\n title: 'My App'\n }\n }\n})\n```\n\n`nuxt.config.ts` default-exports a config object wrapped in `defineNuxtConfig`. Common top-level fields include `modules` (modules to enable), `css` (global stylesheets), `app` (app-level config like head tags and page transitions), `runtimeConfig` (runtime variables), and `routeRules` (per-path rendering rules). `defineNuxtConfig` mainly provides type hints and doesn't change the config content itself."}},"parentId":"138f15f8-34c5-412a-b315-ea69938cf0a4","sortOrder":370,"category":"core","isRoot":false,"summaryMarkdown":"`nuxt.config.ts` 是 Nuxt 项目的中央配置文件，用 `defineNuxtConfig()` 包裹一个配置对象，几乎所有框架行为——模块、`runtimeConfig`、`routeRules`、构建选项、`css`、`app` 元信息——都通过它配置。它在构建时被读取，修改后通常需要重启开发服务器才能生效。","basicInterviewQuestion":"`nuxt.config.ts` 的基本结构是什么？常见的顶层配置项有哪些？","basicInterviewAnswer":"```ts\nexport default defineNuxtConfig({\n modules: ['@nuxtjs/tailwindcss'],\n css: ['~/assets/main.css'],\n app: {\n head: {\n title: 'My App'\n }\n }\n})\n```\n\n`nuxt.config.ts` 默认导出一个由 `defineNuxtConfig` 包裹的配置对象，常见顶层字段包括：`modules`（要启用的模块列表）、`css`（全局样式文件）、`app`（应用级配置，如 head 标签、页面过渡）、`runtimeConfig`（运行时变量）、`routeRules`（按路径的渲染规则）等。`defineNuxtConfig` 主要提供类型提示，本身不改变配置内容。","isFavorite":false,"nodeStatus":"unknown"},{"id":"75db370e-881a-4116-941d-ba3411f11144","slug":"layers","title":"layers","localizedContent":{"zh-CN":{"title":"layers","summaryMarkdown":"Layers 是 Nuxt 的配置和代码复用机制，通过在 `nuxt.config` 里设置 `extends`，一个 Nuxt 项目可以继承另一个项目（或一个共享的 layer 包）的 `pages/`、`components/`、`composables/`、配置等。多个项目可以共享同一套基础 layer，再各自覆盖部分文件，常用于多租户产品或团队内部的脚手架基座。需要注意的是子项目里同名文件会覆盖 layer 中的文件，理解这种覆盖优先级是排查“为什么改了基础 layer 不生效”的关键。","basicInterviewQuestion":"layers 机制的作用是什么？如何在一个项目中引用另一个项目作为基础 layer？","basicInterviewAnswer":"layers 允许一个 Nuxt 项目通过 `nuxt.config` 的 `extends` 字段继承另一个项目（或 npm 包）的配置、组件、页面、composables、插件等，从而实现跨项目的代码与配置复用。例如 `extends: ['../base']` 表示当前项目继承本地 `../base` 目录下的 Nuxt 项目结构；也可以指向一个发布到 npm 的 layer 包。"},"en":{"title":"Layers","summaryMarkdown":"Layers are Nuxt's mechanism for configuration and code reuse: by setting `extends` in `nuxt.config`, a project can inherit `pages/`, `components/`, `composables/`, and config from another project or a shared layer package. Multiple projects can share a base layer and override specific files, which is common for multi-tenant products or an internal team scaffold. A key thing to know is that a file in the extending project overrides the same-named file from the layer — understanding this override priority is essential when debugging \"why didn't my change to the base layer take effect\".","basicInterviewQuestion":"What does the layers mechanism do, and how does a project reference another project as a base layer?","basicInterviewAnswer":"Layers let a Nuxt project inherit another project's (or npm package's) config, components, pages, composables, and plugins via the `extends` field in `nuxt.config`, enabling cross-project code and config reuse. For example, `extends: ['../base']` makes the current project inherit the Nuxt project structure in the local `../base` directory; it can also point to a layer package published to npm."}},"parentId":"138f15f8-34c5-412a-b315-ea69938cf0a4","sortOrder":380,"category":"rare","isRoot":false,"summaryMarkdown":"Layers 是 Nuxt 的配置和代码复用机制，通过在 `nuxt.config` 里设置 `extends`，一个 Nuxt 项目可以继承另一个项目（或一个共享的 layer 包）的 `pages/`、`components/`、`composables/`、配置等。多个项目可以共享同一套基础 layer，再各自覆盖部分文件，常用于多租户产品或团队内部的脚手架基座。需要注意的是子项目里同名文件会覆盖 layer 中的文件，理解这种覆盖优先级是排查“为什么改了基础 layer 不生效”的关键。","basicInterviewQuestion":"layers 机制的作用是什么？如何在一个项目中引用另一个项目作为基础 layer？","basicInterviewAnswer":"layers 允许一个 Nuxt 项目通过 `nuxt.config` 的 `extends` 字段继承另一个项目（或 npm 包）的配置、组件、页面、composables、插件等，从而实现跨项目的代码与配置复用。例如 `extends: ['../base']` 表示当前项目继承本地 `../base` 目录下的 Nuxt 项目结构；也可以指向一个发布到 npm 的 layer 包。","isFavorite":false,"nodeStatus":"unknown"},{"id":"b5546155-cfd9-4d26-bd89-45f8db1e8f5f","slug":"auto-imports","title":"auto imports","localizedContent":{"zh-CN":{"title":"auto imports","summaryMarkdown":"自动导入是 Nuxt 在构建时分析项目代码，把 `composables/`、`components/`、`utils/` 等目录下导出的函数和组件自动加入全局可用作用域的机制，省去手写 `import` 语句。Vue 的核心 API（如 `ref`、`computed`）和 Nuxt 的内置组合式函数（如 `useFetch`、`useRoute`）也是通过同一套机制自动可用的。可以在 `nuxt.config` 的 `imports.dirs` 里添加额外目录纳入自动导入。容易出错的是自动导入依赖静态分析，如果通过非常规方式动态生成函数名或路径，Nuxt 可能无法识别，需要手动 `import`。","basicInterviewQuestion":"Nuxt 的自动导入机制覆盖哪些内容？开发者还需要手写 import 语句吗？","basicInterviewAnswer":"Nuxt 会自动导入 `components/` 目录下的组件、`composables/` 和 `utils/` 目录下导出的函数、Vue 的响应式 API（如 `ref`、`computed`）、Nuxt 内置的 composables（如 `useFetch`、`useRoute`），以及模块通过 `addImports` 注册的内容。在这些范围内，开发者通常不需要手写 import 语句，直接在模板或 `<script setup>` 中使用对应名称即可；对于不在自动导入范围内的第三方库或自定义路径，仍需要手动 import。"},"en":{"title":"Auto Imports","summaryMarkdown":"Auto-imports is Nuxt's build-time mechanism that statically analyzes the project and makes exports from `composables/`, `components/`, `utils/`, and similar directories globally available without manual `import` statements. Vue's core APIs (`ref`, `computed`) and Nuxt's built-in composables (`useFetch`, `useRoute`) are made available the same way. Extra directories can be added to auto-import via `imports.dirs` in `nuxt.config`. A common pitfall is that auto-import relies on static analysis — if a function name or path is generated dynamically in an unusual way, Nuxt may not detect it, requiring a manual `import`.","basicInterviewQuestion":"What does Nuxt's auto-import cover, and do developers still need to write import statements?","basicInterviewAnswer":"Nuxt auto-imports components from `components/`, exported functions from `composables/` and `utils/`, Vue's reactivity APIs (`ref`, `computed`), built-in Nuxt composables (`useFetch`, `useRoute`), and anything modules register via `addImports`. Within this scope, developers typically don't write import statements — they just use the names directly in templates or `<script setup>`. Third-party libraries or custom paths outside this scope still need manual imports."}},"parentId":"138f15f8-34c5-412a-b315-ea69938cf0a4","sortOrder":390,"category":"core","isRoot":false,"summaryMarkdown":"自动导入是 Nuxt 在构建时分析项目代码，把 `composables/`、`components/`、`utils/` 等目录下导出的函数和组件自动加入全局可用作用域的机制，省去手写 `import` 语句。Vue 的核心 API（如 `ref`、`computed`）和 Nuxt 的内置组合式函数（如 `useFetch`、`useRoute`）也是通过同一套机制自动可用的。可以在 `nuxt.config` 的 `imports.dirs` 里添加额外目录纳入自动导入。容易出错的是自动导入依赖静态分析，如果通过非常规方式动态生成函数名或路径，Nuxt 可能无法识别，需要手动 `import`。","basicInterviewQuestion":"Nuxt 的自动导入机制覆盖哪些内容？开发者还需要手写 import 语句吗？","basicInterviewAnswer":"Nuxt 会自动导入 `components/` 目录下的组件、`composables/` 和 `utils/` 目录下导出的函数、Vue 的响应式 API（如 `ref`、`computed`）、Nuxt 内置的 composables（如 `useFetch`、`useRoute`），以及模块通过 `addImports` 注册的内容。在这些范围内，开发者通常不需要手写 import 语句，直接在模板或 `<script setup>` 中使用对应名称即可；对于不在自动导入范围内的第三方库或自定义路径，仍需要手动 import。","isFavorite":false,"nodeStatus":"unknown"},{"id":"325c3743-e3f6-4d5e-b606-badbc54c0e0b","slug":"devtools","title":"Nuxt DevTools","localizedContent":{"zh-CN":{"title":"Nuxt DevTools","summaryMarkdown":"Nuxt DevTools 是内置于开发模式的可视化调试工具，可以在浏览器里查看当前项目的页面、组件树、composables、模块、运行时配置和性能信息，并支持实时编辑部分配置。它通过 `nuxt.config` 中的 `devtools: { enabled: true }` 开启，只在开发环境生效，不会被打包进生产构建。它常用于排查“某个组件为什么被自动导入”“某个模块注册了哪些 hook”这类只看代码不直观的问题。","basicInterviewQuestion":"Nuxt DevTools 提供了哪些主要功能？如何启用？","basicInterviewAnswer":"Nuxt DevTools 是一个内嵌在开发服务器中的可视化面板，可以查看页面的组件树、路由列表、自动导入的 composables 和组件、已安装的模块、运行时配置、payload 数据，以及性能分析等信息。在开发模式下，可以在 `nuxt.config` 中设置 `devtools: { enabled: true }`（较新版本默认开启），然后通过浏览器页面右下角的悬浮图标打开面板。"},"en":{"title":"Nuxt DevTools","summaryMarkdown":"Nuxt DevTools is a built-in visual debugging tool for development that lets you inspect the current project's pages, component tree, composables, modules, runtime config, and performance info in the browser, with live editing for some settings. It's enabled via `devtools: { enabled: true }` in `nuxt.config`, only active in development, and never included in production builds. It's commonly used to debug questions that aren't obvious from reading code alone, like \"why is this component auto-imported\" or \"which hooks did this module register\".","basicInterviewQuestion":"What does Nuxt DevTools provide, and how is it enabled?","basicInterviewAnswer":"Nuxt DevTools is a visual panel embedded in the dev server that shows the page's component tree, route list, auto-imported composables and components, installed modules, runtime config, payload data, and performance profiling. In dev mode, set `devtools: { enabled: true }` in `nuxt.config` (enabled by default in newer versions), then open the panel via the floating icon in the bottom-right of the browser page."}},"parentId":"138f15f8-34c5-412a-b315-ea69938cf0a4","sortOrder":400,"category":"common","isRoot":false,"summaryMarkdown":"Nuxt DevTools 是内置于开发模式的可视化调试工具，可以在浏览器里查看当前项目的页面、组件树、composables、模块、运行时配置和性能信息，并支持实时编辑部分配置。它通过 `nuxt.config` 中的 `devtools: { enabled: true }` 开启，只在开发环境生效，不会被打包进生产构建。它常用于排查“某个组件为什么被自动导入”“某个模块注册了哪些 hook”这类只看代码不直观的问题。","basicInterviewQuestion":"Nuxt DevTools 提供了哪些主要功能？如何启用？","basicInterviewAnswer":"Nuxt DevTools 是一个内嵌在开发服务器中的可视化面板，可以查看页面的组件树、路由列表、自动导入的 composables 和组件、已安装的模块、运行时配置、payload 数据，以及性能分析等信息。在开发模式下，可以在 `nuxt.config` 中设置 `devtools: { enabled: true }`（较新版本默认开启），然后通过浏览器页面右下角的悬浮图标打开面板。","isFavorite":false,"nodeStatus":"unknown"}],"lines":[{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990:68147ca1-6681-45c1-b4c0-5ac68efd975b","sourceId":"16da00ce-53b8-4c9a-b626-cf9a62046990","targetId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","type":"tree"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b:85e52dae-358f-48f3-ae29-acbfbb154c38","sourceId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","targetId":"85e52dae-358f-48f3-ae29-acbfbb154c38","type":"tree"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b:19511c91-605c-4cb6-87d6-05a8fe843698","sourceId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","targetId":"19511c91-605c-4cb6-87d6-05a8fe843698","type":"tree"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b:58800e92-26e6-494d-ba94-a2729118de5f","sourceId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","targetId":"58800e92-26e6-494d-ba94-a2729118de5f","type":"tree"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b:8d481665-05fb-48d1-b14f-a8a91b40f7c8","sourceId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","targetId":"8d481665-05fb-48d1-b14f-a8a91b40f7c8","type":"tree"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b:2dd4fafe-4550-47b5-8f21-f418cd508990","sourceId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","targetId":"2dd4fafe-4550-47b5-8f21-f418cd508990","type":"tree"},{"id":"68147ca1-6681-45c1-b4c0-5ac68efd975b:607998b3-3e68-4158-9a49-9e74649ccc76","sourceId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","targetId":"607998b3-3e68-4158-9a49-9e74649ccc76","type":"tree"},{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990:0366d5f5-25cf-408a-b2e5-ae7fd440be31","sourceId":"16da00ce-53b8-4c9a-b626-cf9a62046990","targetId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","type":"tree"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31:1bf6c217-528f-4910-ab4e-6d3739379ee8","sourceId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","targetId":"1bf6c217-528f-4910-ab4e-6d3739379ee8","type":"tree"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31:7477173b-faf3-4c69-a565-8aadca7a275b","sourceId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","targetId":"7477173b-faf3-4c69-a565-8aadca7a275b","type":"tree"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31:f4e98fb2-2a43-4f82-ac51-a421f1a0f8ed","sourceId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","targetId":"f4e98fb2-2a43-4f82-ac51-a421f1a0f8ed","type":"tree"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31:8e63826e-9729-4f17-a4fb-65ad5f2d0d5c","sourceId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","targetId":"8e63826e-9729-4f17-a4fb-65ad5f2d0d5c","type":"tree"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31:2181768b-27f4-4bc2-bb70-cdb50ca5ada6","sourceId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","targetId":"2181768b-27f4-4bc2-bb70-cdb50ca5ada6","type":"tree"},{"id":"0366d5f5-25cf-408a-b2e5-ae7fd440be31:cd3c9701-e4cc-4867-9794-13066b0f2e52","sourceId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","targetId":"cd3c9701-e4cc-4867-9794-13066b0f2e52","type":"tree"},{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990:fc244abc-0b64-437e-bdc2-9353ae208a7a","sourceId":"16da00ce-53b8-4c9a-b626-cf9a62046990","targetId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","type":"tree"},{"id":"fc244abc-0b64-437e-bdc2-9353ae208a7a:eaf62a10-b2a6-41b6-92fa-a9887b2e23fa","sourceId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","targetId":"eaf62a10-b2a6-41b6-92fa-a9887b2e23fa","type":"tree"},{"id":"fc244abc-0b64-437e-bdc2-9353ae208a7a:733a03dd-e966-4dfd-9caa-517c06ac996e","sourceId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","targetId":"733a03dd-e966-4dfd-9caa-517c06ac996e","type":"tree"},{"id":"fc244abc-0b64-437e-bdc2-9353ae208a7a:2ab2d684-2d4c-4e3f-b422-1789461fc22e","sourceId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","targetId":"2ab2d684-2d4c-4e3f-b422-1789461fc22e","type":"tree"},{"id":"fc244abc-0b64-437e-bdc2-9353ae208a7a:b74d7e85-1ccc-4f6f-87a4-e3bafa3612ad","sourceId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","targetId":"b74d7e85-1ccc-4f6f-87a4-e3bafa3612ad","type":"tree"},{"id":"fc244abc-0b64-437e-bdc2-9353ae208a7a:1b925857-99be-462e-93a6-a8201c8ec568","sourceId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","targetId":"1b925857-99be-462e-93a6-a8201c8ec568","type":"tree"},{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990:3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","sourceId":"16da00ce-53b8-4c9a-b626-cf9a62046990","targetId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","type":"tree"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e:e65aeefc-c4b2-4647-92f1-de1ad3b8a149","sourceId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","targetId":"e65aeefc-c4b2-4647-92f1-de1ad3b8a149","type":"tree"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e:232efdb1-31c7-4cf2-b631-97e30b6e891b","sourceId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","targetId":"232efdb1-31c7-4cf2-b631-97e30b6e891b","type":"tree"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e:0b1c4134-4885-4124-915f-cc19172f2bd8","sourceId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","targetId":"0b1c4134-4885-4124-915f-cc19172f2bd8","type":"tree"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e:b1d02b7d-3eab-4d01-942e-1380a907c5c1","sourceId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","targetId":"b1d02b7d-3eab-4d01-942e-1380a907c5c1","type":"tree"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e:d86245d2-2a7f-4193-b13b-652ead3a500c","sourceId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","targetId":"d86245d2-2a7f-4193-b13b-652ead3a500c","type":"tree"},{"id":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e:754dedcd-df19-4df9-8838-fdccfa4dc1c1","sourceId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","targetId":"754dedcd-df19-4df9-8838-fdccfa4dc1c1","type":"tree"},{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990:160893f2-c442-4089-8ebd-ef5761eda0c9","sourceId":"16da00ce-53b8-4c9a-b626-cf9a62046990","targetId":"160893f2-c442-4089-8ebd-ef5761eda0c9","type":"tree"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9:71470cab-a5be-4b78-8663-46364c92643b","sourceId":"160893f2-c442-4089-8ebd-ef5761eda0c9","targetId":"71470cab-a5be-4b78-8663-46364c92643b","type":"tree"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9:5c2104a7-c0e2-4e52-8ec9-dc49c7e24d2f","sourceId":"160893f2-c442-4089-8ebd-ef5761eda0c9","targetId":"5c2104a7-c0e2-4e52-8ec9-dc49c7e24d2f","type":"tree"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9:58f0b141-17d0-4aef-a234-d81f8c55fcba","sourceId":"160893f2-c442-4089-8ebd-ef5761eda0c9","targetId":"58f0b141-17d0-4aef-a234-d81f8c55fcba","type":"tree"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9:2bb2d027-489e-45b9-bb48-15edde180d66","sourceId":"160893f2-c442-4089-8ebd-ef5761eda0c9","targetId":"2bb2d027-489e-45b9-bb48-15edde180d66","type":"tree"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9:5b44796d-7f1b-41f7-8f13-2969b44679bd","sourceId":"160893f2-c442-4089-8ebd-ef5761eda0c9","targetId":"5b44796d-7f1b-41f7-8f13-2969b44679bd","type":"tree"},{"id":"160893f2-c442-4089-8ebd-ef5761eda0c9:e7f2aff0-0fa8-4d10-825d-c5fe0e0d5534","sourceId":"160893f2-c442-4089-8ebd-ef5761eda0c9","targetId":"e7f2aff0-0fa8-4d10-825d-c5fe0e0d5534","type":"tree"},{"id":"16da00ce-53b8-4c9a-b626-cf9a62046990:138f15f8-34c5-412a-b315-ea69938cf0a4","sourceId":"16da00ce-53b8-4c9a-b626-cf9a62046990","targetId":"138f15f8-34c5-412a-b315-ea69938cf0a4","type":"tree"},{"id":"138f15f8-34c5-412a-b315-ea69938cf0a4:92f80df7-93ff-43c0-9630-cfc85cc26d57","sourceId":"138f15f8-34c5-412a-b315-ea69938cf0a4","targetId":"92f80df7-93ff-43c0-9630-cfc85cc26d57","type":"tree"},{"id":"138f15f8-34c5-412a-b315-ea69938cf0a4:6e450b73-1fc8-4ca0-984e-d38e4ae28f0b","sourceId":"138f15f8-34c5-412a-b315-ea69938cf0a4","targetId":"6e450b73-1fc8-4ca0-984e-d38e4ae28f0b","type":"tree"},{"id":"138f15f8-34c5-412a-b315-ea69938cf0a4:75db370e-881a-4116-941d-ba3411f11144","sourceId":"138f15f8-34c5-412a-b315-ea69938cf0a4","targetId":"75db370e-881a-4116-941d-ba3411f11144","type":"tree"},{"id":"138f15f8-34c5-412a-b315-ea69938cf0a4:b5546155-cfd9-4d26-bd89-45f8db1e8f5f","sourceId":"138f15f8-34c5-412a-b315-ea69938cf0a4","targetId":"b5546155-cfd9-4d26-bd89-45f8db1e8f5f","type":"tree"},{"id":"138f15f8-34c5-412a-b315-ea69938cf0a4:325c3743-e3f6-4d5e-b606-badbc54c0e0b","sourceId":"138f15f8-34c5-412a-b315-ea69938cf0a4","targetId":"325c3743-e3f6-4d5e-b606-badbc54c0e0b","type":"tree"},{"id":"85e52dae-358f-48f3-ae29-acbfbb154c38:1bf6c217-528f-4910-ab4e-6d3739379ee8:related","sourceId":"85e52dae-358f-48f3-ae29-acbfbb154c38","targetId":"1bf6c217-528f-4910-ab4e-6d3739379ee8","type":"related"},{"id":"1bf6c217-528f-4910-ab4e-6d3739379ee8:eaf62a10-b2a6-41b6-92fa-a9887b2e23fa:related","sourceId":"1bf6c217-528f-4910-ab4e-6d3739379ee8","targetId":"eaf62a10-b2a6-41b6-92fa-a9887b2e23fa","type":"related"},{"id":"eaf62a10-b2a6-41b6-92fa-a9887b2e23fa:e65aeefc-c4b2-4647-92f1-de1ad3b8a149:related","sourceId":"eaf62a10-b2a6-41b6-92fa-a9887b2e23fa","targetId":"e65aeefc-c4b2-4647-92f1-de1ad3b8a149","type":"related"},{"id":"e65aeefc-c4b2-4647-92f1-de1ad3b8a149:71470cab-a5be-4b78-8663-46364c92643b:related","sourceId":"e65aeefc-c4b2-4647-92f1-de1ad3b8a149","targetId":"71470cab-a5be-4b78-8663-46364c92643b","type":"related"},{"id":"71470cab-a5be-4b78-8663-46364c92643b:92f80df7-93ff-43c0-9630-cfc85cc26d57:related","sourceId":"71470cab-a5be-4b78-8663-46364c92643b","targetId":"92f80df7-93ff-43c0-9630-cfc85cc26d57","type":"related"}]},"nodeIndex":{"key":"default","items":[{"id":"136567c8-2205-4617-906e-9add4a1eac52","nodeId":"68147ca1-6681-45c1-b4c0-5ac68efd975b","parentItemId":null,"orderIndex":10},{"id":"6039f020-d322-4818-8d2c-82a0a3c5af5d","nodeId":"85e52dae-358f-48f3-ae29-acbfbb154c38","parentItemId":"136567c8-2205-4617-906e-9add4a1eac52","orderIndex":20},{"id":"465b2e46-1fce-4228-aaaa-ce562c2787f1","nodeId":"19511c91-605c-4cb6-87d6-05a8fe843698","parentItemId":"136567c8-2205-4617-906e-9add4a1eac52","orderIndex":30},{"id":"a155a696-bebb-458b-9330-7cb9f99c009b","nodeId":"58800e92-26e6-494d-ba94-a2729118de5f","parentItemId":"136567c8-2205-4617-906e-9add4a1eac52","orderIndex":40},{"id":"c6c44aa7-40c7-42fb-ae56-ee6f35dec2c7","nodeId":"8d481665-05fb-48d1-b14f-a8a91b40f7c8","parentItemId":"136567c8-2205-4617-906e-9add4a1eac52","orderIndex":50},{"id":"3c47bdf8-aed6-4a9a-850c-54b22c5fd74a","nodeId":"2dd4fafe-4550-47b5-8f21-f418cd508990","parentItemId":"136567c8-2205-4617-906e-9add4a1eac52","orderIndex":60},{"id":"53b80886-164b-4c09-aeb2-2c1df87e54a7","nodeId":"607998b3-3e68-4158-9a49-9e74649ccc76","parentItemId":"136567c8-2205-4617-906e-9add4a1eac52","orderIndex":70},{"id":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","nodeId":"0366d5f5-25cf-408a-b2e5-ae7fd440be31","parentItemId":null,"orderIndex":80},{"id":"f00f1245-6855-40f5-8180-c31140037fed","nodeId":"1bf6c217-528f-4910-ab4e-6d3739379ee8","parentItemId":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","orderIndex":90},{"id":"c6c7dd41-08ea-497c-87ca-81195c38adae","nodeId":"7477173b-faf3-4c69-a565-8aadca7a275b","parentItemId":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","orderIndex":100},{"id":"be081c93-57d3-4f93-92ec-56b603e69b25","nodeId":"f4e98fb2-2a43-4f82-ac51-a421f1a0f8ed","parentItemId":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","orderIndex":110},{"id":"0ae4fba7-cab8-41cc-8fb4-4d2d6e8b21da","nodeId":"8e63826e-9729-4f17-a4fb-65ad5f2d0d5c","parentItemId":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","orderIndex":120},{"id":"8e813141-7b60-4e02-8b63-010f1a7748b4","nodeId":"2181768b-27f4-4bc2-bb70-cdb50ca5ada6","parentItemId":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","orderIndex":130},{"id":"ab6336ad-dfaf-42d2-b94e-66a999451009","nodeId":"cd3c9701-e4cc-4867-9794-13066b0f2e52","parentItemId":"c32da0ea-de18-4411-a2a0-9d6b0a259ace","orderIndex":140},{"id":"73bebb5b-67ea-4fba-878d-25fa56f95277","nodeId":"fc244abc-0b64-437e-bdc2-9353ae208a7a","parentItemId":null,"orderIndex":150},{"id":"f5d8ac54-bbd3-4767-9ff7-52d7616b2b59","nodeId":"eaf62a10-b2a6-41b6-92fa-a9887b2e23fa","parentItemId":"73bebb5b-67ea-4fba-878d-25fa56f95277","orderIndex":160},{"id":"52d4faad-1f78-43ce-a46e-e10a00e1a4be","nodeId":"733a03dd-e966-4dfd-9caa-517c06ac996e","parentItemId":"73bebb5b-67ea-4fba-878d-25fa56f95277","orderIndex":170},{"id":"50d0fd5b-e969-45e7-975d-00d5c06c5b28","nodeId":"2ab2d684-2d4c-4e3f-b422-1789461fc22e","parentItemId":"73bebb5b-67ea-4fba-878d-25fa56f95277","orderIndex":180},{"id":"17d85818-4075-4c96-b568-fc6e1540b430","nodeId":"b74d7e85-1ccc-4f6f-87a4-e3bafa3612ad","parentItemId":"73bebb5b-67ea-4fba-878d-25fa56f95277","orderIndex":190},{"id":"aef3797a-3fa4-4cb2-a71e-ea70b9955457","nodeId":"1b925857-99be-462e-93a6-a8201c8ec568","parentItemId":"73bebb5b-67ea-4fba-878d-25fa56f95277","orderIndex":200},{"id":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","nodeId":"3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e","parentItemId":null,"orderIndex":210},{"id":"a204a661-e3fa-41a2-af0c-ff77398dfe41","nodeId":"e65aeefc-c4b2-4647-92f1-de1ad3b8a149","parentItemId":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","orderIndex":220},{"id":"4994d58e-b2e5-46b5-9833-7b5662bce010","nodeId":"232efdb1-31c7-4cf2-b631-97e30b6e891b","parentItemId":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","orderIndex":230},{"id":"df1320c3-ba9b-4706-ae44-e07335d71d64","nodeId":"0b1c4134-4885-4124-915f-cc19172f2bd8","parentItemId":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","orderIndex":240},{"id":"c9c283f2-75ed-4277-a5dc-5a648ddbd837","nodeId":"b1d02b7d-3eab-4d01-942e-1380a907c5c1","parentItemId":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","orderIndex":250},{"id":"f91330a4-a15f-4595-88ae-a8e01eb4cdc5","nodeId":"d86245d2-2a7f-4193-b13b-652ead3a500c","parentItemId":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","orderIndex":260},{"id":"878a312f-236f-4763-8f54-e2af0b50d791","nodeId":"754dedcd-df19-4df9-8838-fdccfa4dc1c1","parentItemId":"97c2a6e3-15ce-42ac-a9b4-5541903fbf9d","orderIndex":270},{"id":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","nodeId":"160893f2-c442-4089-8ebd-ef5761eda0c9","parentItemId":null,"orderIndex":280},{"id":"813c245d-f72a-4a5f-a3fb-528625a04aa6","nodeId":"71470cab-a5be-4b78-8663-46364c92643b","parentItemId":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","orderIndex":290},{"id":"b8c17049-ca52-4377-885c-16457d2eeaee","nodeId":"5c2104a7-c0e2-4e52-8ec9-dc49c7e24d2f","parentItemId":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","orderIndex":300},{"id":"18e04c50-8502-45dd-9b2c-198689f4eba8","nodeId":"58f0b141-17d0-4aef-a234-d81f8c55fcba","parentItemId":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","orderIndex":310},{"id":"a33b2607-2c65-40b9-aeb2-0bfced1181c6","nodeId":"2bb2d027-489e-45b9-bb48-15edde180d66","parentItemId":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","orderIndex":320},{"id":"ec5ed9a6-58a3-433f-b39c-d352f4b6e1e5","nodeId":"5b44796d-7f1b-41f7-8f13-2969b44679bd","parentItemId":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","orderIndex":330},{"id":"6e01b52e-2f15-4eab-a9e7-401dfa360d08","nodeId":"e7f2aff0-0fa8-4d10-825d-c5fe0e0d5534","parentItemId":"edbf6490-c8b4-4f89-b7fb-2e2df89be6e3","orderIndex":340},{"id":"4dc7d2da-fdd8-440d-8e58-9c5377e9db8d","nodeId":"138f15f8-34c5-412a-b315-ea69938cf0a4","parentItemId":null,"orderIndex":350},{"id":"f4f3a24b-d13c-487a-8e86-cc7e278c4895","nodeId":"92f80df7-93ff-43c0-9630-cfc85cc26d57","parentItemId":"4dc7d2da-fdd8-440d-8e58-9c5377e9db8d","orderIndex":360},{"id":"309e4d1a-7bd4-4f78-8282-0d5f4eb11a96","nodeId":"6e450b73-1fc8-4ca0-984e-d38e4ae28f0b","parentItemId":"4dc7d2da-fdd8-440d-8e58-9c5377e9db8d","orderIndex":370},{"id":"ea722e2c-16d3-4e5c-9801-1f274f004d66","nodeId":"75db370e-881a-4116-941d-ba3411f11144","parentItemId":"4dc7d2da-fdd8-440d-8e58-9c5377e9db8d","orderIndex":380},{"id":"566efdbd-3353-4188-ad38-3812df2f9f25","nodeId":"b5546155-cfd9-4d26-bd89-45f8db1e8f5f","parentItemId":"4dc7d2da-fdd8-440d-8e58-9c5377e9db8d","orderIndex":390},{"id":"9b2bed9f-4ff9-4cca-8583-c29dc92cd4cf","nodeId":"325c3743-e3f6-4d5e-b606-badbc54c0e0b","parentItemId":"4dc7d2da-fdd8-440d-8e58-9c5377e9db8d","orderIndex":400}]},"favoriteNodeIds":[],"nodeStatusByNodeId":{"16da00ce-53b8-4c9a-b626-cf9a62046990":"unknown","68147ca1-6681-45c1-b4c0-5ac68efd975b":"unknown","85e52dae-358f-48f3-ae29-acbfbb154c38":"unknown","19511c91-605c-4cb6-87d6-05a8fe843698":"unknown","58800e92-26e6-494d-ba94-a2729118de5f":"unknown","8d481665-05fb-48d1-b14f-a8a91b40f7c8":"unknown","2dd4fafe-4550-47b5-8f21-f418cd508990":"unknown","607998b3-3e68-4158-9a49-9e74649ccc76":"unknown","0366d5f5-25cf-408a-b2e5-ae7fd440be31":"unknown","1bf6c217-528f-4910-ab4e-6d3739379ee8":"unknown","7477173b-faf3-4c69-a565-8aadca7a275b":"unknown","f4e98fb2-2a43-4f82-ac51-a421f1a0f8ed":"unknown","8e63826e-9729-4f17-a4fb-65ad5f2d0d5c":"unknown","2181768b-27f4-4bc2-bb70-cdb50ca5ada6":"unknown","cd3c9701-e4cc-4867-9794-13066b0f2e52":"unknown","fc244abc-0b64-437e-bdc2-9353ae208a7a":"unknown","eaf62a10-b2a6-41b6-92fa-a9887b2e23fa":"unknown","733a03dd-e966-4dfd-9caa-517c06ac996e":"unknown","2ab2d684-2d4c-4e3f-b422-1789461fc22e":"unknown","b74d7e85-1ccc-4f6f-87a4-e3bafa3612ad":"unknown","1b925857-99be-462e-93a6-a8201c8ec568":"unknown","3d9fb9ea-ec05-4be7-bd91-fdbad3114b3e":"unknown","e65aeefc-c4b2-4647-92f1-de1ad3b8a149":"unknown","232efdb1-31c7-4cf2-b631-97e30b6e891b":"unknown","0b1c4134-4885-4124-915f-cc19172f2bd8":"unknown","b1d02b7d-3eab-4d01-942e-1380a907c5c1":"unknown","d86245d2-2a7f-4193-b13b-652ead3a500c":"unknown","754dedcd-df19-4df9-8838-fdccfa4dc1c1":"unknown","160893f2-c442-4089-8ebd-ef5761eda0c9":"unknown","71470cab-a5be-4b78-8663-46364c92643b":"unknown","5c2104a7-c0e2-4e52-8ec9-dc49c7e24d2f":"unknown","58f0b141-17d0-4aef-a234-d81f8c55fcba":"unknown","2bb2d027-489e-45b9-bb48-15edde180d66":"unknown","5b44796d-7f1b-41f7-8f13-2969b44679bd":"unknown","e7f2aff0-0fa8-4d10-825d-c5fe0e0d5534":"unknown","138f15f8-34c5-412a-b315-ea69938cf0a4":"unknown","92f80df7-93ff-43c0-9630-cfc85cc26d57":"unknown","6e450b73-1fc8-4ca0-984e-d38e4ae28f0b":"unknown","75db370e-881a-4116-941d-ba3411f11144":"unknown","b5546155-cfd9-4d26-bd89-45f8db1e8f5f":"unknown","325c3743-e3f6-4d5e-b606-badbc54c0e0b":"unknown"},"isAuthenticated":false,"isPro":false}}] </article></body></html>

Nuxt

#1应用结构

#2路由

#3数据获取

#4Server 与 Nitro

#5渲染与配置

#6Modules 与构建