Pular para o conteúdo principal



getSlots is an asynchronous function that defines slots and returns an array of ClubsSlots.

Clubs runtime passes 3 arguments to getSlots, plugin options, config, and slot utils. And the return value should be an array of objects with the following values:

slotRequiredstring | ClubsSlotName(*)Name of the target slot.
componentRequiredAstro componentContent of the slot.
propsObjectObject passed to Astro.props on the component
ordernumberThe order of the slot, with the higher number of order rendered backward if there are multiple slots with the same name on a page.

The returns value

The return value of getSlots should be an array of objects with these properties.


Clubs has some predefined slots, and you can inject your components into the predefined slots on the pages and on the admin pages. Predefined slots are defined as enum type ClubsSlotName(*).


Note that slots for pages may not be supported by a theme plugin.

If a custom theme implements its own slots, you can also specify an arbitrary string for slot.


The component property in getSlots() specifies the content that will be rendered in the target slot. The component can be built using Astro supported frameworks, which can be rendered by Astro.


Only imported components that are .astro files can be used

import {MySvelteComponent} from './MySvelteComponent.svelte'
const {ExampleComponent} = Astro.props as {
ExampleComponent: {
message: string

<MySvelteComponent client:load message={ExampleComponent.message}/>
export let message: string

<h1>Hello, {message}</h1>


props is an object passed from the parent component (slot container) to the child component (defined in component property) to help render it correctly. It can contain any data that the child component needs, such as text, colors, and functions.

For example, if the child component is a button, the props object might include the text to display on the button, the color of the button, and the function to call when the button is clicked.


import { ClubsFunctionGetSlots, ClubsFunctionPlugin } from '@devprotocol/clubs-core'
import { default as ExampleComponent } from './components/ExampleComponent.astro'

const getPagePaths = async () => [
{/* ... */}

export const getAdminPaths: ClubsFunctionGetAdminPaths = async (options) => [
{/* ... */}

export const getSlots: ClubsFunctionGetSlots = async (_, config, _) => {
return [
slot: 'admin:aside:example',
component: ExampleComponent,
props: {
ExampleComponent: {
message: 'World!',

export const meta: ClubsPluginMeta = {
{/* ... */}

export default {
} as ClubsFunctionPlugin