useFetchComponentMeta

GitHub查看源码
useFetchComponentMeta 获取通过 nuxt-component-meta 注册的 Vue 组件元数据，包括 Props、Events 和 Slots 的完整类型定义，返回 useAsyncData 的响应式 ref，支持 SSR 服务端渲染和客户端导航时自动复用缓存，零重复请求。

概述

获取 Vue 组件的元数据，包括 Props、Emits、Slots 等信息。返回 useAsyncData 的 ref 对象，支持客户端缓存复用。

<script setup lang="ts">
const { data: meta } = useFetchComponentMeta('MyButton')

console.log(meta.value?.meta?.props)  // Props 定义
console.log(meta.value?.meta?.events) // Events 定义
console.log(meta.value?.meta?.slots)  // Slots 定义
</script>

显示 Props 文档

<template>
  <ul>
    <li v-for="prop in (meta?.meta?.props || [])" :key="prop.name">
      <code>{{ prop.name }}</code>: {{ prop.type }}
    </li>
  </ul>
</template>

<script setup lang="ts">
const { data: meta } = useFetchComponentMeta('MyButton')
</script>

API

useFetchComponentMeta(name)

获取组件元数据。

参数

name
string required
组件名称（PascalCase）。

返回值

返回 useAsyncData 的结果对象。

data
Ref<{ meta: ComponentMeta } | null>
组件元数据的响应式 ref，包含 props、events、slots 等信息。

相关

Changelog

No recent changes

useTheme

useTheme 是主题定制系统的核心 Composable，管理 Primary 主色调、Neutral 中性色、圆角大小、字体系列和图标集配置，支持深色/浅色/系统三种颜色模式。可从 ThemePicker 导出 CSS 变量或 app.config.ts 配置持久化主题。

useFetchComponentExample

useFetchComponentExample 获取通过 component-example 模块注册的 Vue 组件示例代码，返回包含源码字符串、PascalCase 组件名和文件路径的响应式数据，支持 SSR 服务端渲染和客户端导航自动复用 payload，零重复请求。

Copyright © 2024 - 2026