useFetchComponentMeta

GitHub View source

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.

<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

<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.

ComponentProps — generate a Props documentation table in a single line of Markdown
ComponentSlots — automatically generate Slots documentation
ComponentEmits — automatically generate Emits documentation

Changelog

No recent changes

useTheme

useTheme is the core composable of the theme customization system, managing the primary color, neutral color, border radius, font family, and icon set configuration, with support for dark, light, and system color modes. From the ThemePicker, you can export CSS variables or app.config.ts configuration to persist your theme.

useFetchComponentExample

useFetchComponentExample fetches the example code of Vue components registered via the component-example module, returning reactive data that includes the source code string, the PascalCase component name, and the file path, with SSR support and automatic payload reuse during client-side navigation, and zero duplicate requests.