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.
<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
<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 — embed interactive component examples in Markdown
Changelog
No recent changes