Fields

Describe fields of an object in your VuePress site.

Settings

.vuepress/theme.ts

import { 
hopeTheme
 } from "vuepress-theme-hope";

export default 
hopeTheme
({
  
markdown
: {
    
fields
: true,
  },
});

Syntax

Use a fields container to describe fields. Each line starting with @name@ is a field item, and its attributes follow the closing @.

::: fields
@theme@ type="ThemeConfig" required default="{ base: '/' }"

Theme config.

@enabled@ type="boolean" optional default="true"

Whether it is enabled.

:::

All attributes are allowed and displayed as-is. The common ones are:

• type is displayed as a code block in the field header.
• default is displayed as a labeled code block below the field header.
• required, optional and deprecated are displayed as badges, and a deprecated field name is colored red and struck through.
• Other attributes are displayed as Name: value badges.

Nesting

To describe fields of an object type, nest a field item inside another one by increasing the starting @ by one for each level of nesting.

::: fields
@options@ type="object"

Options.

@@options.name@ type="string"

Option name.

:::

Demo

themeRequiredThemeConfig

Default{ base: '/' }

Theme config.

enabledOptionalboolean

Defaulttrue

Whether it is enabled.

legacyDeprecatedstring

Deprecated field.

Demo

::: fields
@theme@ type="ThemeConfig" required default="{ base: '/' }"

Theme config.

@enabled@ type="boolean" optional default="true"

Whether it is enabled.

@legacy@ type="string" deprecated

Deprecated field.

:::