---
title: "useFetchComponentMeta"
description: "useFetchComponentMeta fetches the metadata of Vue components registered via nuxt-component-meta, including the complete type definitions for Props, Events, and Slots. It returns a reactive useAsyncData ref, with automatic cache reuse during SSR and client-side navigation, and zero duplicate requests."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/composables/fetch-component-meta"
---
# useFetchComponentMeta

> useFetchComponentMeta fetches the metadata of Vue components registered via nuxt-component-meta, including the complete type definitions for Props, Events, and Slots. It returns a reactive useAsyncData ref, with automatic cache reuse during SSR and client-side navigation, and zero duplicate requests.

## Overview

Fetches the metadata of a Vue component, including its Props, Emits, and Slots. Returns a `useAsyncData` ref object with client-side cache reuse.

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

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

### Displaying Props documentation

```vue
<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)`

Fetches component metadata.

### Parameters

**name** (`string`) *required*: The component name (PascalCase).

### Return value

Returns the `useAsyncData` result object.

**data** (`Ref<{ meta: ComponentMeta } | null>`): The reactive ref of the component metadata, including props, events, slots, and more.

## Related

- [ComponentProps](https://docs.mhaibaraai.cn/en/docs/components/component-props) — generate a Props documentation table in a single line of Markdown
- [ComponentSlots](https://docs.mhaibaraai.cn/en/docs/components/component-slots) — automatically generate Slots documentation
- [ComponentEmits](https://docs.mhaibaraai.cn/en/docs/components/component-emits) — automatically generate Emits documentation

## Changelog

See commit history for [layer/app/composables/useFetchComponentMeta.ts](https://github.com/mhaibaraai/movk-nuxt-docs/commits/main/layer/app/composables/useFetchComponentMeta.ts).

---

- [GitHub](https://github.com/mhaibaraai/movk-nuxt-docs/blob/main/layer/app/composables/fetchComponentMeta.ts)


## Sitemap

See the full [sitemap](https://docs.mhaibaraai.cn/sitemap.md) for all pages.