---
title: "useFetchComponentExample"
description: "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."
canonical_url: "https://docs.mhaibaraai.cn/en/docs/composables/fetch-component-example"
---
# 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.

## Overview

Fetches a component's example code. Returns a `useAsyncData` ref object that automatically reuses the SSR payload during client-side navigation, with no duplicate requests.

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

console.log(example.value?.code)       // The example code
console.log(example.value?.pascalName) // The PascalCase component name
</script>
```

### Using it in a template

```vue
<template>
  <div>
    <UCodeBlock
      v-if="example?.code"
      :code="example.code"
      language="vue"
    />
  </div>
</template>

<script setup lang="ts">
const { data: example } = useFetchComponentExample('MyButton')
</script>
```

## API

### `useFetchComponentExample(name)`

Fetches a component's example code.

### Parameters

**name** (`string`) *required*: The component example name (camelCase).

### Return value

Returns the `useAsyncData` result object.

**data** (`Ref<{ code: string, pascalName: string, filePath: string } | null>`): The reactive ref of the component example data.

## Related

- [ComponentExample](https://docs.mhaibaraai.cn/en/docs/components/component-example) — embed interactive component examples in Markdown

## Changelog

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

---

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


## Sitemap

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