Documenting Vue components

In this article

Example
Translation

API documentation for Vue components can be enabled using the Vue File Reader:

await docs.build([
    {
        include: ["./docs/**/*.md"],
        fileReader: frontMatterFileReader,
    },
    {
        include: ["./src/**/*.vue"],
        fileReader: vueFileReader,
    },
]);

This will read each component and generate API documentation which can later be included in markdown with:

:::api
vue:AwesomeComponent
:::

For details about how to document Vue components see vue-docgen-api documentation.

Translations can be generated with:

:::api
translation:AwesomeComponent
:::

Calls to $t() will be read from the source component. If the call has a leading jsdoc-style comment it is used as the description of the translation, for example:

<template>
    <p>
        {{
            /** something something... */
            $t("translation.key.bar", "bar default text", {
                /** A thingamajig */
                foo: 1,
                /** A doodad */
                bar: "baz",
            })
        }}
    </p>
</template>

Example

Props

foo: string Optional

Lorem ipsum dolor sit amet.

Must be one of:

"a"
"b"
"c"

Default: "foobar"

bar: string

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu mollis leo. Fusce eget ullamcorper augue. Aenean sodales fringilla purus, ac euismod massa semper sed.

obsolete: number Optional Deprecated