当然可以！给你来一份超实用的 🚀 Nuxt 3 常用内置函数 + 组件速查表，适合贴墙上做速查 👇
🧩 Nuxt 3 内置组件速查表
| 组件名 | 用途 | 说明 |
|---|---|---|
<NuxtPage /> | 渲染当前路由页面 | 通常放在 layouts/default.vue 中 |
<NuxtLayout /> | 切换布局 | <NuxtLayout name="custom" /> 使用 layouts/custom.vue |
<NuxtLink /> | 路由跳转 | 支持 prefetch、SSR 优化 关于我们 |
<ClientOnly> | 仅客户端渲染组件 | 用于仅浏览器可用的库（如 swiper、chart） |
<NuxtErrorBoundary> | 捕获错误 | 包裹组件以局部处理错误 |
<NuxtLoadingIndicator> | 显示页面加载进度条 | nuxt.config.ts 启用或自定义## 🌈 <NuxtLoadingIndicator> |
作用：内置页面加载进度条（仅 SPA 模式下生效）
开启方式：
// nuxt.config.ts
export default defineNuxtConfig({
loadingIndicator: {
name: 'default', // or 'circle', 'chasing-dots', etc.
color: '#00c58e',
background: '#000',
}
})
然后无需手动引入，它会自动显示。
| <NuxtImg> / <NuxtPicture> | 图像优化（需 Image 模块） | 自动 lazyload、尺寸优化 |
🧠 Nuxt 3 内置 Composables（在 <script setup> 中直接用）
| 名称 | 功能 | 举例 |
|---|---|---|
useRoute() | 当前路由信息 | const route = useRoute() |
useRouter() | 控制导航 | router.push('/about') |
useState() | 共享响应式状态 | const count = useState('count', () => 0) |
useAsyncData() | 异步数据 + 缓存 | const { data } = await useAsyncData('users', fetchUsers) |
useFetch() | Fetch 数据请求 | const { data } = await useFetch('/api/posts') |
useHead() | 设置页面 <head> 信息 | useHead({ title: 'My Page' }) |
useSeoMeta() | 设置 SEO 标签 | 自动处理 charset, og 等 |
useRuntimeConfig() | 读取 nuxt.config.ts 中 runtime config | config.public.apiBase |
useRouteParams() | 获取路由参数（Nuxt 3.2 新） | const { slug } = useRouteParams() |
⚙️ Nuxt 特有文件/目录功能速查
| 文件 / 目录 | 功能 |
|---|---|
pages/ | 自动路由 |
layouts/ | 页面布局（default.vue, custom.vue） |
components/ | 自动注册组件 |
composables/ | 自动导入 hooks |
plugins/ | 插件注册，如 pinia, axios, dayjs 等 |
middleware/ | 中间件（路由拦截） |
app.vue | Nuxt 应用入口（包含布局、全局样式） |
nuxt.config.ts | 所有 Nuxt 配置 |
assets/ | 静态样式、图标、字体等资源 |
public/ | 静态资源，映射到 / 路径（不会被构建） |
🛠️ 通用工具函数（nuxt-kit）
| 工具 | 用途 |
|---|---|
defineNuxtConfig() | 定义 Nuxt 配置（TS 支持） |
defineNuxtPlugin() | 注册插件 |
definePageMeta() | 设置页面级 meta，如中间件、标题 |
defineNuxtRouteMiddleware() | 定义路由守卫 |
🎁 Bonus：推荐组合
- 状态管理：
pinia - 动画：
@vueuse/motion+framer-motion - 请求：
useFetch()/axios插件 - SSR安全设置：
useRequestHeaders()/useCookie() - 多主题切换：
useState('theme')+:class="theme"
