Overview

Customizing shadcn-docs-nuxt.

shadcn-docs-nuxt is configured through app.config.ts.

app.config.ts

export default defineAppConfig({
  shadcnDocs: {
    header: {
      // ...
    },
    aside: {
      // ...
    },
    main: {
      // ...
    },
    // ...
  },
});

Fields Reference

Illustrative type declarations:

type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;

interface ILink {
  title?: string;
  icon?: string;
  to: string;
  target?: Target;
  showLinkIcon?: boolean; // For nav and toc link section
}

interface INav {
  title: string;
  links?: (ILink & { description: string })[];
  to?: string;
  target?: Target;
}

Icons

All configurable icons can be set to iconify icons, emojis and urls, using smart icon under the hood.

`site`

namestring

The site name shown on the tap title: <page> - <site_name>.

descriptionstring

The site description for SEO.

ogImagestring

The path to the Open Graph image.

ogImageComponentstring

ShadcnDocs

The component to use for the dynamic ogImage. Possible values: ShadcnDocs, Nuxt, NuxtSeo or your custom component name.

ogImageColor'light' | 'dark'

light

Color mode to use for the dynamic ogImage.

umamiobject

`theme`

customizableboolean

true

Whether the theme can be customized by the user (show the customize button in the header).

colorColor

zinc

The default color theme. https://www.shadcn-vue.com/themes.html

radiusstring

0.5

The default radius.

`banner`

Read more at API > Configuration > Banner

enableboolean

false

Whether to enable the banner.

showCloseboolean

true

Whether to show to close button.

tostring

Link to navigate to. Don't set any value if you don't want to navigate.

contentstring

The content to show (parsed by the MDC parser).

targetTarget

_blank

Navigation target.

borderboolean

true

Whether to show the border at the bottom of the banner.

`header`

showLoadingIndicatorboolean

true

Whether to show the nuxt loading indicator.

titlestring

The title shown on the header next to the icon.

showTitleboolean

true

Whether to show the title text on the header.

borderboolean

false

Whether to show the bottom border of the header.

darkModeToggleboolean

true

Whether to show the dark mode toggle.

logo{ light: string; dark: string; }

{ light: '/logo.svg', dark: '/logo-dark.svg' }

The path to the logo image files in /public. light is for the icon shown in light mode, dark is for the icon shown in dark mode.

showTitleInMobileboolean

false

Whether to show the logo and title in mobile. (Recommended to use with button styled search bar)

navINav[]

[]

The content of the navbar in the header.

linksILink[]

[]

The links on the right of the header.

`aside`

useLevelboolean

true

Whether to use level-styled sidebar.

collapseboolean

false

Whether to collapse all collapsible by default.

collapseLevelnumber

1

Collapse folders that are deeper than the defined level. (Set it to Infinity if you want to expand all)

folderStyle'default' | 'tree' | 'group'

default

The default style used for folders.

`main`

paddedboolean

true

Whether the page is padded.

breadCrumbboolean

true

Whether to show the bread crumb.

showTitleboolean

true

Whether to show the title section.

codeCopyToastboolean

true

Whether to show a toast on code copy.

codeCopyToastTextstring

'Copied to clipboard!'

The text shown in the toaster.

fieldRequiredTextstring

'required'

The text shown in the field component when a field is required.

pm('npm' | 'pnpm' | 'bun' | 'yarn')[]

['npm', 'pnpm', 'bun', 'yarn']

Package managers shown in the pm components.

codeIconRecord<string, string>

The icon mapping for language / filename in the code group header.

editLinkobject

`footer`

creditsstring

''

The credit text on the left side of the footer (parsed by the MDC parser).

linksILink[]

[]

The links on the right side of the footer.

`toc`

enableboolean

true

Whether to turn on the toc section.

enableInMobileboolean

false

Whether to turn on the toc section in mobile.

titlestring

'On This Page'

The title for the toc section.

linksILink[]

[]

The links under the toc section.

carbonAdsobject

`search`

enableboolean

true

Whether to turn on the search feature.

inAsideboolean

false

Whether to show the search bar in the sidebar.

style'input' | 'button'

input

Whether the search bar is displayed as a input or a button.

placeholderstring

'Search...'

The placeholder text shown in the search bar.

placeholderDetailedstring

'Search documentation...'

The placeholder text shown in the search dialog input.