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
baseUrl	string	https://stoplight.io/mocks/enzonotario/argentine-rock/122547792
path	string	/api/v1/artists
deprecated	undefined	undefined

path slot

Slot Props

Property	Type	Value
operationId	string	createArtist
operation	object	{...}
method	string	POST
baseUrl	string	https://stoplight.io/mocks/enzonotario/argentine-rock/122547792
path	string	/api/v1/artists
hideBaseUrl	boolean	true
deprecated	undefined	undefined
servers	object	[...]
updateSelectedServer	function	function k(G) { y.value = G; }

description slot

Slot Props

Property	Type	Value
key	number	1
operation	object	{...}
method	string	POST
baseUrl	string	https://stoplight.io/mocks/enzonotario/argentine-rock/122547792
path	string	/api/v1/artists

security slot

Slot Props

Property	Type	Value
key	number	0
operation	object	{...}
method	string	POST
baseUrl	string	https://stoplight.io/mocks/enzonotario/argentine-rock/122547792
path	string	/api/v1/artists
securityUi	object	[...]

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
baseUrl	string	https://stoplight.io/mocks/enzonotario/argentine-rock/122547792
path	string	/api/v1/artists
hideBaseUrl	boolean	true
deprecated	undefined	undefined
servers	object	[...]
updateSelectedServer	function	function k(G) { y.value = G; }

playground slot

Slot Props

Property	Type	Value
operationId	string	createArtist
path	string	/api/v1/artists
method	string	POST
baseUrl	string	https://stoplight.io/mocks/enzonotario/argentine-rock/122547792
parameters	undefined	undefined
requestBody	object	{...}
securityUi	object	[...]
request	object	{...}
updateRequest	function	function w(G) { x.value = G; }
servers	object	[...]
updateSelectedServer	function	function k(G) { y.value = G; }

code-samples slot

Slot Props

Property	Type	Value
operationId	string	createArtist
operation	object	{...}
method	string	POST
baseUrl	string	https://stoplight.io/mocks/enzonotario/argentine-rock/122547792
path	string	/api/v1/artists
request	object	{...}
updateRequest	function	function w(G) { x.value = G; }
codeSamples	undefined	undefined

branding slot

Slot Props

Property	Type	Value
key	number	2
operationId	string	createArtist
operation	object	{...}
method	string	POST
baseUrl	string	https://stoplight.io/mocks/enzonotario/argentine-rock/122547792
path	string	/api/v1/artists

footer slot

Slot Props

Property	Type	Value
key	number	3
operationId	string	createArtist
operation	object	{...}
method	string	POST
baseUrl	string	https://stoplight.io/mocks/enzonotario/argentine-rock/122547792
path	string	/api/v1/artists