useFetchComponentExample

GitHub 查看源码

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

概述

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

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

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

在模板中使用

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

Changelog

No recent changes

useFetchComponentMeta

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