---
title: "useFetchComponentExample"
description: "useFetchComponentExample 获取通过 component-example 模块注册的 Vue 组件示例代码，返回包含源码字符串、PascalCase 组件名和文件路径的响应式数据，支持 SSR 服务端渲染和客户端导航自动复用 payload，零重复请求。"
seo_title: "useFetchComponentExample"
seo_description: "Fetch registered Vue component example source in Movk Nuxt Docs with useFetchComponentExample, including PascalCase names, file paths, and SSR payload reuse."
canonical_url: "https://docs.mhaibaraai.cn/docs/composables/fetch-component-example"
---
# useFetchComponentExample

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

## 概述

获取组件的示例代码。返回 `useAsyncData` 的 ref 对象，客户端导航时自动复用 SSR payload，无重复请求。

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

console.log(example.value?.code)       // 示例代码
console.log(example.value?.pascalName) // 组件 PascalCase 名称
</script>
```

### 在模板中使用

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

获取组件示例代码。

### 参数

**name** (`string`) *required*: 组件示例名称（camelCase）。

### 返回值

返回 `useAsyncData` 的结果对象。

**data** (`Ref<{ code: string, pascalName: string, filePath: string } | null>`): 组件示例数据的响应式 ref。

## 相关

- [ComponentExample](/docs/components/component-example) — 在 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).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.