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; icon: 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.

languageSwitcherobject

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.

levelStyle'header' | 'aside'

'aside'

The style of the level-styled sidebar. header means the top level links are shown in the header, aside means the top-level links are shown in the aside.

aside

header

Recommended to set header.border to true when using header style for better visual separation.

headerLevelNavAlign'start' | 'center' | 'end'

'start'

The alignment of the header top-level navigation links. Only applies when levelStyle is set to header.

collapseboolean

false

Whether to collapse all the folders 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

false

Whether to show a toast on code copy.

codeCopyIconstring

lucide:copy

Icon used for code copy buttons.

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.

imageZoomboolean

true

Whether to enable the image zoom feature. (Click on images to zoom in)

Read more at Components > Prose Components > Images and embeds > image-zooming

editLinkobject

backToTopboolean

true

Whether to turn on the back to top button next to the edit link.

`footer`

creditsstring

''

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

borderboolean

true

Whether to show the border at the top of the footer.

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.

enableInHomepageboolean

false

Whether to turn on the toc section in homepage.

progressBarboolean

true

Whether to show a progress bar on the left of the toc section.

titlestring

'On This Page'

The title for the toc section.

linksILink[]

[]

The links under the toc section.

iconLinksILink[]

[]

The icon 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.

`data`

Read more at API > Advanced > Binding Data