Components

There a few types of components installed globally:

general: useful components that don't fit any other category
markdown: component wrappers that you can use in markdown
RL: components that display something with Rocket League

Markdown in templates

When a component has a slot / template, an empty line is needed between the template tag and the markdown

This will render as normal text:

<template #name>
## Markdown
</template>

This will render as markdown text:

<template #name>

## Markdown
</template>

In a markdown editor, you will also see the second example highlighted indicating that it will be rendered as markdown.

See the component reference.

Legacy reference

ActionBlock general component

Renders a highlighted section. To place it at the top or bottom of the page use the blocks frontmatter option on a page.

Exposed slots:

default slot. Can't be used in combination with the other slots
left
right

Examples

This is some content

Donate via Patreon

Or use the default slot:

This is some content

Is not the same as with two slots:

This is some content

Icon general component

Renders an icon

Options: see @iconify/vue

Example

ItemGrid general component

Alias

This component is also registered as EventShowcase which is deprecated and will be removed soon

Places items in a grid like layout

Options:

Option name	Type	Default	Description
amount	`number`	`3`	The max amount of items to show
title	`string`	-	The title at the top
description	`string`	`undefined`	The description beneath the title
rowSize	`number`	`3`	The max amount of items on each row
createUrl	`(event: GridItem) => string`	`undefined`	Create custom urls for each item
createSlug	`(item: GridItem) => string`	`undefined`	For action links, overwrite the slug
useActionLink	`boolean`	`false`	Overwrite the item link to use `action.link`
maxItemActions	`number`	`2`	The max. actions for an item. Max is 2
descriptionLength	`number`	`100`	The max length of the description
descriptionEllipsis	`string`	`'...'`	The ellipsis for long descriptions
disableExternalLinkIcons	`boolean`	`false`	For actions, disable the link icon
itemHeight	`string`	`'400px'`	Set the height of the items
data	`GridItem[]`	`[]`	The item data
dataUrl	`string`	`null`	The url to fetch items from
action	`ItemGridAction`	-	The action beneath the items

If the action has a link, it will open the link on clicking. If the action has totalItems, it will show now the total amount of items and hide the action button.

type ItemGridAction = | {
        link: string
        text?: string
        theme?: 'brand' | 'alt'
    } | {
        text?: string
        totalItems: number
        theme?: 'brand' | 'alt'
    }

Examples

See the home page events

PreferenceSetting general component

Component to show or allow to set a value that gets stored in the local storage of the current browser.

The default slot is the text associated with the action. Use the storeKey property to decide which local storage key the value will get and defaultValue to set the current value if nothing has been set yet.

Option name	Type	Default	Description
storeKey	`string`	-	The key to store in the local storage
type	setting type	`'switch'`	The type of option
renderValue	`boolean`	`false`	Set to only show the setting value
defaultValue	`any`	`false`	The value when unset. Must be the same type as the option
isAppearance	`boolean`	`false`	For switch option, use the theme switcher
options	`string[]`	`[]`	For select option, the available choices
documentClassToToggle	`string`	`undefined`	Add a custom class to the page for applying styles
cssVariable	`string`	`undefined`	For color option, sync the component with a css variable
onChanged	`(option: { key: string, value: any }) => void`	`undefined`	Hook that is called when the option is changed

Setting types

The allowed types are:

'switch': toggle for boolean values
'input': input field for string values
'select': select field for string array values
'color': color pick

<PreferenceSetting storeKey="rlmm-path-udk" defaultValue="C:\UDK\RLMM\" type="input">
    UDK Installation folder
</PreferenceSetting>

Get settings value

To get a setting value in a component, use the useSettings function

Show value

Showing a value is handled with renderValue property set to true. You don't need to set the default slot when showing the value.

Example

<PreferenceSetting :renderValue="true" storeKey="rlmm-path-udk" defaultValue="C:\UDK\RLMM\" type="input" />

false

Your UDK folder

ActionWindow markdown component

Alias: Actions

A component that allows you to easily make advanced windows with actions at the bottom of the window to switch between different states or templates within states. Can be combined with markdown file inclusion to separate the actions and views. If you only have templates in the question files, exclude them from the build files using srcExclude.

Example

See the flowchart

StepsWindow markdown component

Alias: Steps

Make a step by step tutorial in markdown with this component. Note that only length items are shown, if you need more steps change this property to the amount you need!

Option name	Type	Default	Description
length	`number`	`20`	The maximum amount of steps that are rendered
color	theme color	`'brand'`	The color of the step numbers

Example

<StepsWindow color="indigo">
<template #step-1>

### Install the installer

do some trick

do another trick

- list item
- another one

</template>
<template #step-2>

### Run the installer

press start

</template>
</StepsWindow>

Install the installer

do some trick

do another trick

list item
another one

Run the installer

press start

TabsWindow markdown component

Alias: Tabs

Splits a window with tabs

Option name	Type	Required	Description
tabs	`string[]`	`true`	The array of tab names in the order to display the tabs
activeTab	`string`	`false`	The name of the tab to open when mounted. Defaults to the first tab
activeTabKey	`string`	`false`	The local storage key that will be the default tab on opening. Not used when `activeTab` is set
tabStyle	`object`	`false`	Optional style for every tab name
activeTabStyle	`object`	`false`	Optional style for the active tab name
alignLeft	`boolean`	`false`	Set the tabs to align on the side

Each tab is a separate <template> with the name tab-${name_in_snake_case}

<TabsWindow :tabs="['Snake case']">

<template #tab-snake_case>
This is a tab
</template>
</TabsWindow>

Snake case

This is a tab

To add more tabs, add the name in the array with the title and add the tab with the corresponding snake case name by adding a new template. Then you can write in markdown what to display when the tab is active.

Example

<TabsWindow :tabs="['a', 'c', 'b']">

<template #tab-a>
This is Tab A
</template>
<template #tab-b>
This is Tab B
</template>
<template #tab-c>
This is Tab C
</template>

</TabsWindow>

This is Tab A

SteamMaps RL component

Shows the most recent published / updated maps on the Rocket League Steam workshop.

Option name	Type	Default	Description
amount	`number`	`3`	The amount of maps to display
sortBy	`'created' \| 'updated'`	`'created'`	Whether to show recent published or updated maps
title	`string`	`'New workshop maps'`	The title above the map(s)
enabled	`boolean`	`true`	Option to disable the component
displayTime	`number`	`10_000`	The amount of ms before the next map is shown. Set to a negative number to disable this
handleException	`Function`	`console.error`	Method to handle errors / empty responses
addActions	`AddSteamMapsAction`	`() => []`	Add more actions beside the default ones
disableClick	`boolean`	`false`	Change the clicking behaviour
urlProtocol	url protocol	`setting-windows`	Where to open Steam urls
downloadUrlTemplate	`SteamDownloadUrlTemplate`	`null`	The template to use for downloading maps
maxLengthTitle	`number`	`30`	The maximum length of the map title
maxLengthUsername	`number`	`24`	The maximum length of the creator name

Colored title

The title option renders as HTML making it customisable to style. By default any span element in the title will be the brand color.

type AddSteamMapsAction = (map: SteamMap) => { text: string, link: string }[]
type SteamDownloadUrlTemplate = string | (id: string) => string

Hide on home page

The hideHomeSteamMaps local storage option for the key will allow to hide the Steam maps component to be hidden on the home page if the steam maps are enabled by default. Otherwise the storage option will allow to show the Steam maps component.

Url protocol

The local storage key rlmm-urls-steam is used to read the user settings

Available options:

'setting-windows': if on Windows and the setting is enabled, open urls in the Steam app
'setting': if the setting is enabled, always open urls in the Steam app
'app-windows': if on Windows, open urls in the Steam app
'app': always open urls in the Steam app
'browser': always open urls in the internet browser

Click action

Use the disableClick option to disable going to the next map by clicking on the current map. This will open the map on clicking using the url protocol.

Example

<SteamMaps :amount="1" :displayTime="-1" :disableClick="true"/>

New workshop maps

Misc

Theme colors

'brand'
'default'
'gray'
'green'
'indigo'
'red'
'yellow'
'purple'

Components ​

ActionBlock general component ​

Icon general component ​

ItemGrid general component ​

PreferenceSetting general component ​

Setting types ​

Show value ​

ActionWindow markdown component ​

StepsWindow markdown component ​

Install the installer ​

Run the installer ​

TabsWindow markdown component ​

SteamMaps RL component ​

Url protocol ​

Click action ​

Misc ​

Theme colors ​

Components

ActionBlock general component

Icon general component

ItemGrid general component

PreferenceSetting general component

Setting types

Show value

ActionWindow markdown component

StepsWindow markdown component

Install the installer

Run the installer

TabsWindow markdown component

SteamMaps RL component

Url protocol

Click action

Misc

Theme colors