Documenting Vue components

In this article

Example
Translation

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

import {
    Generator,
    frontMatterFileReader,
    vueFileReader,
} from "@forsakringskassan/docs-generator";

const docs = new Generator(import.meta.url, {
    site: { name: "My Awesome Site" },
    sourceFiles: [
        {
            include: ["./docs/**/*.md"],
            fileReader: frontMatterFileReader,
        },
        {
            include: ["./src/**/*.vue"],
            fileReader: vueFileReader,
        },
    ],
});

await docs.build();

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

Models

v-model: string Optional

Lorem ipsum dolor sit amet.

Default: ""

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