UI-Doc vite plugin

Integrates UI-Doc into vite by using the @ui-doc/rollup plugin and add functionality to vite dev server to display / preview the UI-Doc. Per default it will add a ui-doc uri to your vite dev url. You can change the uri by changing the output.dir or output.baseUri option.

Install

1# npm
2npm install --save-dev @ui-doc/vite @ui-doc/html-renderer @highlightjs/cdn-assets
3
4# yarn
5yarn add --dev @ui-doc/vite @ui-doc/html-renderer @highlightjs/cdn-assets
6
7# pnpm
8pnpm install --save-dev @ui-doc/vite @ui-doc/html-renderer @highlightjs/cdn-assets

Setup

1import uidoc from '@ui-doc/vite'
2import { defineConfig } from 'vite'
3
4export default defineConfig({
5  build: {
6    outDir: 'dist/vite',
7    rollupOptions: {
8      input: {
9        app: 'css/index.css',
10      },
11    },
12  },
13
14  plugins: [
15    uidoc({
16      settings: {
17        generate: {
18          logo: () => 'Vite',
19        },
20        texts: {
21          title: 'Vite Example',
22        },
23      },
24      source: ['css/**/*.css'],
25      assets: {
26        example: {
27          name: 'app',
28          input: true,
29        },
30      },
31    }),
32  ],
33})

Options

Please see the Options from @ui-doc/rollup they are the same.

Good to Know

The output.baseUri setting can be changed depending on context

When using vite serve and build with same setting and you want to extract the UI-Doc into a other system you need to change the output.baseUri depending on build context. UI-Doc in vite will set the output.dir per default to ui-doc so it can run correctly while serving but you may don't want the ui-doc uri in your final output.

1import uidoc from '@ui-doc/vite'
2import { defineConfig } from 'vite'
3
4export default defineConfig(({ command }) => {
5  return {
6    build: {
7      outDir: 'dist/vite',
8      rollupOptions: {
9        input: {
10          app: 'css/index.css',
11          'ui-doc-custom': 'css/ui-doc.css',
12        },
13      },
14    },
15    plugins: [
16      uidoc({
17        source: ['css/**/*.css'],
18        assets: {
19          output: {
20            baseUri: command === 'serve' ? undefined : '.',
21          }
22          staticAssets: './assets',
23          page: {
24            name: 'ui-doc-custom'
25            input: true
26          }
27          example: {
28            name: 'app',
29            input: true,
30          },
31        },
32      }),
33    ],
34  }
35})

Known Issues