Nuxt

Application Nuxt

Docus est construit sur Nuxt 4, ce qui signifie que votre projet de documentation est une application Nuxt complète. Lorsque vous générez un projet avec le CLI Docus, il ajoute une couche par défaut vous offrant toute la flexibilité d'une application Nuxt standard.

Par défaut, le starter Docus ne contient qu'un dossier content/, un dossier public/ et un package.json. C'est tout ce dont vous avez besoin pour commencer à rédiger votre documentation. Vous pouvez aller plus loin et utiliser n'importe quelle fonctionnalité d'un projet Nuxt, du nuxt.config.ts aux components ou plugins.

Modules Nuxt

Vous souhaitez enrichir votre documentation avec des fonctionnalités personnalisées ? Vous pouvez installer et configurer des modules Nuxt comme dans toute application Nuxt.

Pour ajouter Plausible analytics à votre documentation :

npm install @nuxtjs/plausible

export default defineNuxtConfig({
  modules: ['@nuxtjs/plausible'],
})

Composants personnalisés

Grâce à la puissance de Nuxt Content et Nuxt UI, et avec l'aide de la syntaxe MDC, vous pouvez utiliser les composants Nuxt UI directement dans votre Markdown sans configuration supplémentaire.

Cependant, vous n'êtes pas limité aux composants préconçus. Docus facilite la création de vos propres composants Vue dans votre application Nuxt et leur utilisation dans votre contenu.

Voici un exemple simple d'un composant personnalisé BrowserFrame créé dans le dossier components de votre application Nuxt et intégré dans du Markdown :

CodeMarkdownAperçu

components/content/BrowserFrame.vue

<script setup lang="ts">
defineProps<{
  title?: string
}>()
</script>

<template>
  <div class="w-fit rounded-xl border border-muted bg-accented shadow-md overflow-hidden px-2 pb-2">
    <div class="flex justify-between items-center px-2 py-2 bg-accented border-accented border-b">
      <div class="flex items-center gap-2">
        <span class="w-3 h-3 bg-red-500 rounded-full" />
        <span class="w-3 h-3 bg-yellow-500 rounded-full" />
        <span class="w-3 h-3 bg-green-500 rounded-full" />
      </div>
      <div class="text-muted">
        {{ title }}
      </div>
    </div>
    <slot mdc-unwrap="p" />
  </div>
</template>

Cette approche vous permet de créer une documentation dynamique propulsée par les composants Nuxt en Markdown.

Vue Pages

En plus des pages Markdown, vous pouvez également créer des pages Vue dans le répertoire pages/.

<template>
  <div>
    <h1>Bonjour</h1>
  </div>
</template>

Vous pouvez également utiliser la fonction definePageMeta pour définir les métadonnées de la page, comme l'utilisation du layout default ou docs, mais aussi pour définir si la page doit afficher l'en-tête et le pied de page :

<script setup lang="ts">
definePageMeta({
  layout: 'default',
  // Supprimer l'en-tête
  header: false,
  // Supprimer le pied de page
  footer: false,
})
</script>

Layouts personnalisées

Docus utilise deux layouts :

• Le layout default pour la page d'accueil et les pages Vue personnalisées
• Le layout docs pour les pages de documentation

Si vous souhaitez utiliser une mise en page différente, vous pouvez en créer une dans le répertoire app/layouts/.

<template>
  <main class="custom-layout">
    <slot />
  </main>
</template>