Custom Slots

The OAOperation component provides several slots for customizing the operation layout. These slots allow you to override the default components with your own custom content.

Available Slots

The following slots are available for customization:

• header
• tags
• path
• description
• security
• parameters
• request-body
• responses
• playground
• code-samples
• branding
• footer

In the following example, we demonstrate how to use all available slots in the OAOperation component. Each slot is populated with a SlotDebugger component that displays the slot properties for debugging purposes.

---
aside: false
outline: false
title: vitepress-openapi
---

<OAOperation operationId="createArtist">

<template #header="header">
<SlotDebugger :slotProps="header" title="header" />
</template>

<template #tags="tags">
<SlotDebugger :slotProps="tags" title="tags" />
</template>

<template #path="path">
<SlotDebugger :slotProps="path" title="path" />
</template>

<template #description="description">
<SlotDebugger :slotProps="description" title="description" />
</template>

<template #security="security">
<SlotDebugger :slotProps="security" title="security" />
</template>

<template #parameters="parameters">
<SlotDebugger :slotProps="parameters" title="parameters" />
</template>

<template #request-body="requestBody">
<SlotDebugger :slotProps="requestBody" title="request-body" />
</template>

<template #responses="responses">
<SlotDebugger :slotProps="responses" title="responses" />
</template>

<template #playground="playground">
<SlotDebugger :slotProps="playground" title="playground" />
</template>

<template #code-samples="codeSamples">
<SlotDebugger :slotProps="codeSamples" title="code-samples" />
</template>

<template #branding="branding">
<SlotDebugger :slotProps="branding" title="branding" />
</template>

<template #footer="footer">
<SlotDebugger :slotProps="footer" title="footer" />
</template>

</OAOperation>

header slot

Slot Props

Property	Type	Value
key	number	0
operation	object	{...}
method	string	post
path	string	/api/v1/artists
deprecated	undefined	undefined

path slot

Slot Props

Property	Type	Value
operationId	string	createArtist
operation	object	{...}
method	string	post
path	string	/api/v1/artists
hideBaseUrl	boolean	true
deprecated	undefined	undefined
servers	object	[...]
baseUrl	string	https://stoplight.io/mocks/enzonotario/argentine-rock/122547792

description slot

Slot Props

Property	Type	Value
key	number	1
operation	object	{...}
method	string	post
path	string	/api/v1/artists

security slot

Slot Props

Property	Type	Value
key	number	0
operation	object	{...}
method	string	post
path	string	/api/v1/artists
securityUi	object	[...]
selectedSchemeId	string	bearerAuth

request-body slot

Slot Props

Property	Type	Value
key	number	0
operationId	string	createArtist
requestBody	object	{...}

responses slot

Slot Props

Property	Type	Value
key	number	0
operationId	string	createArtist
responses	object	{...}

path slot

Slot Props

Property	Type	Value
operationId	string	createArtist
operation	object	{...}
method	string	post
path	string	/api/v1/artists
hideBaseUrl	boolean	true
deprecated	undefined	undefined
servers	object	[...]
baseUrl	string	https://stoplight.io/mocks/enzonotario/argentine-rock/122547792

playground slot

Slot Props

Property	Type	Value
operationId	string	createArtist
path	string	/api/v1/artists
method	string	post
parameters	object	[...]
requestBody	object	{...}
securityUi	object	[...]
servers	object	[...]

code-samples slot

Slot Props

Property	Type	Value
operationId	string	createArtist
operation	object	{...}
method	string	post
path	string	/api/v1/artists
codeSamples	undefined	undefined

branding slot

Slot Props

Property	Type	Value
key	number	2
operationId	string	createArtist
operation	object	{...}
method	string	post
path	string	/api/v1/artists

footer slot

Slot Props

Property	Type	Value
key	number	3
operationId	string	createArtist
operation	object	{...}
method	string	post
path	string	/api/v1/artists