Vue d'ensemble

Personnalisation de shadcn-docs-nuxt.

shadcn-docs-nuxt est configuré via app.config.ts.

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

Référence des Champs

Déclarations de types illustratives :

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

interface ILink {
  title?: string;
  icon?: string;
  to: string;
  target?: Target;
  showLinkIcon?: boolean; // Pour la section des liens de navigation et de la table des matières
}

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

Icônes

Toutes les icônes configurables peuvent être définies comme des icônes iconify, des émojis et des URLs, en utilisant l'icône intelligente en arrière-plan.

site

namestring
Le nom du site affiché dans l'onglet : <page> - <nom_du_site>.
descriptionstring
La description du site pour le SEO.
ogImagestring
Le chemin vers l'image Open Graph.
ogImageComponentstring
ShadcnDocs
Le composant à utiliser pour l'ogImage dynamique. Valeurs possibles : ShadcnDocs, Nuxt, NuxtSeo ou le nom de votre composant personnalisé.
ogImageColor'light' | 'dark'
light
Mode de couleur à utiliser pour l'ogImage dynamique.
umamiobject

theme

customizableboolean
true
Si le thème peut être personnalisé par l'utilisateur (affiche le bouton de personnalisation dans l'en-tête).
colorColor
zinc
Le thème de couleur par défaut. https://www.shadcn-vue.com/themes.html
radiusstring
0.5
Le rayon par défaut.
enableboolean
false
Si la bannière doit être activée.
showCloseboolean
true
Si le bouton de fermeture doit être affiché.
tostring
Lien vers lequel naviguer. Ne définissez aucune valeur si vous ne souhaitez pas naviguer.
contentstring
Le contenu à afficher (analysé par le parseur MDC).
targetTarget
_blank
Cible de navigation.
borderboolean
true
Si la bordure en bas de la bannière doit être affichée.

header

showLoadingIndicatorboolean
true
Si l'indicateur de chargement nuxt doit être affiché.
titlestring
Le titre affiché dans l'en-tête à côté de l'icône.
showTitleboolean
true
Si le texte du titre doit être affiché dans l'en-tête.
borderboolean
false
Si la bordure inférieure de l'en-tête doit être affichée.
darkModeToggleboolean
true
Si le bouton de basculement du mode sombre doit être affiché.
languageSwitcherobject
logo{ light: string; dark: string; }
{ light: '/logo.svg', dark: '/logo-dark.svg' }
Le chemin vers les fichiers d'image du logo dans /public. light est pour l'icône affichée en mode clair, dark est pour l'icône affichée en mode sombre.
showTitleInMobileboolean
false
Si le logo et le titre doivent être affichés sur mobile. (Recommandé d'utiliser avec la barre de recherche stylisée en bouton)
navINav[]
[]
Le contenu de la barre de navigation dans l'en-tête.
linksILink[]
[]
Les liens à droite de l'en-tête.
githubButtonobject
enableboolean
false
Si le bouton GitHub doit être activé.
ownerstring
Nom du propriétaire du dépôt GitHub.
repoboolean
Nom du dépôt GitHub.
targetTarget
_blank_
iconstring
lucide:github
Icône GitHub.

aside

useLevelboolean
true
Si la barre latérale de style niveau doit être utilisée.
collapseboolean
false
Si tous les éléments réductibles doivent être réduits par défaut.
collapseLevelnumber
1
Réduire les dossiers qui sont plus profonds que le niveau défini. (Définissez-le à Infinity si vous voulez tout développer)
folderStyle'default' | 'tree' | 'group'
default
Le style par défaut utilisé pour les dossiers.

main

paddedboolean
true
Si la page doit être rembourrée.
breadCrumbboolean
true
Si le fil d'Ariane doit être affiché.
showTitleboolean
true
Si la section du titre doit être affichée.
codeCopyToastboolean
false
Si une notification doit être affichée lors de la copie du code.
codeCopyIconstring
lucide:copy
Icône utilisée pour les boutons de copie de code.
codeCopyToastTextstring
'Copié dans le presse-papiers !'
Le texte affiché dans la notification.
fieldRequiredTextstring
'required'
Le texte affiché dans le composant field lorsqu'un champ est requis.
pm('npm' | 'pnpm' | 'bun' | 'yarn')[]
['npm', 'pnpm', 'bun', 'yarn']
Gestionnaires de paquets affichés dans les composants pm.
codeIconRecord<string, string>
La correspondance des icônes pour le langage / nom de fichier dans l'en-tête du groupe de code.
editLinkobject
backToTopboolean
true
Si le bouton retour en haut doit être activé à côté du lien d'édition.

footer

creditsstring
''
Le texte de crédit à gauche du pied de page (analysé par le parseur MDC).
linksILink[]
[]
Les liens à droite du pied de page.

toc

enableboolean
true
Si la section toc doit être activée.
enableInMobileboolean
false
Si la section toc doit être activée sur mobile.
enableInHomepageboolean
false
Si la section toc doit être activée sur la page d'accueil.
titlestring
'On This Page'
Le titre pour la section toc.
linksILink[]
[]
Les liens sous la section toc.
iconLinksILink[]
[]
Les liens d'icônes sous la section toc.
carbonAdsobject

search

enableboolean
true
Si la fonction de recherche doit être activée.
inAsideboolean
false
Si la barre de recherche doit être affichée dans la barre latérale.
style'input' | 'button'
input
Si la barre de recherche est affichée comme une entrée ou un bouton.
placeholderstring
'Search...'
Le texte placeholdeur affiché dans la barre de recherche.
placeholderDetailedstring
'Search documentation...'
Le texte placeholdeur affiché dans la barre de recherche.

data

Default Config

Modifier cette page
Carte d'Équipe
Nuxt Content
Configuration du module Nuxt Content.