Essentiels

Composants Markdown

Utilisez les composants Markdown pour structurer votre contenu, avec l'aide de Nuxt UI.

Les composants prose sont des remplacements pour les balises de typographie HTML. Ils offrent un moyen simple de personnaliser votre interface lors de l'utilisation de Markdown.

Docus et Nuxt UI fournissent un ensemble de composants prose stylés et élégants pour vous aider à rédiger votre documentation avec la syntaxe MDC.

Cette page met en avant uniquement les composants prose les plus adaptés à la rédaction de documentation. Cependant, vous pouvez utiliser n'importe quel composant Nuxt UI dans votre Markdown. Pour la liste complète des composants disponibles, consultez la documentation Nuxt UI.

`Accordion`

Utilisez les composants accordion et accordion-item pour afficher un Accordion dans votre contenu.

  ::accordion

  :::accordion-item{label="Qu'est-ce que Docus et quelles sont ses fonctionnalités clés ?" icon="i-lucide-circle-help"}
  Docus est une solution de documentation entièrement intégrée construite avec Nuxt UI. C'est un thème inspiré du template de documentation Nuxt UI qui fournit un visuel prêt à l'emploi. L'utilisateur peut se concentrer sur le contenu en utilisant Markdown et la syntaxe MDC.
  :::

  :::accordion-item{label="Comment démarrer avec Docus ?" icon="i-lucide-circle-help"}
  La seule chose dont vous avez besoin pour démarrer un projet Docus est un dossier `content/`. Consultez le starter pour un démarrage rapide.
  :::

  :::accordion-item{label="Qu'est-ce que Nuxt UI ?" icon="i-lucide-circle-help"}
  Nuxt UI est une collection de composants Vue premium, de composables et d'utilitaires construits sur [Nuxt UI](https://ui.nuxt.com/). Nuxt UI est gratuit en développement, mais nécessite une licence pour la production.
  :::
  ::

::: ::

`Badge`

Utilisez du markdown dans le slot par défaut du composant badge pour afficher un Badge dans votre contenu.

v3.0.0

::badge
**v3.0.0**
::

`Callout`

Utilisez du markdown dans le slot par défaut du composant callout pour ajouter un contexte visuel à votre contenu.

Utilisez les props icon et color pour le personnaliser. Vous pouvez aussi passer n'importe quelle propriété du composant <NuxtLink>.

Vous pouvez également utiliser les raccourcis note, tip, warning et caution avec des icônes et couleurs prédéfinies.

Voici des informations supplémentaires pour vous.

Voici une suggestion utile.

Faites attention à cette action car elle pourrait avoir des résultats inattendus.

Cette action est irréversible.

  ::note
  Voici des informations supplémentaires.
  ::

  ::tip
  Voici une suggestion utile.
  ::

  ::warning
  Faites attention à cette action car elle pourrait avoir des résultats inattendus.
  ::

  ::caution
  Cette action est irréversible.
  ::

::: ::

`Card` et `CardGroup`

Utilisez du markdown dans le slot par défaut du composant card pour mettre en avant votre contenu.

Utilisez les props title, icon et color pour le personnaliser. Vous pouvez aussi passer n'importe quelle propriété du composant <NuxtLink>.

Regroupez vos composants card avec le composant card-group pour les afficher en grille.

Tableau de bord

Un tableau de bord avec une mise en page multi-colonnes.

SaaS

Un template avec landing, pricing, docs et blog.

Docs

Une documentation avec @nuxt/content.

Landing

Une page d'accueil à utiliser comme point de départ.

  :::card-group

  ::card
  ---
  title: Tableau de bord
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/dashboard
  target: _blank
  ---
  Un tableau de bord avec une mise en page multi-colonnes.
  ::

  ::card
  ---
  title: SaaS
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/saas
  target: _blank
  ---
  Un template avec landing, pricing, docs et blog.
  ::

  ::card
  ---
  title: Docs
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/docs
  target: _blank
  ---
  Une documentation avec `@nuxt/content`.
  ::

  ::card
  ---
  title: Landing
  icon: i-simple-icons-github
  to: https://github.com/nuxt-ui-templates/landing
  target: _blank
  ---
  Une page d'accueil à utiliser comme point de départ.
  ::

  :::

::: ::

`Collapsible`

Enveloppez votre contenu avec le composant collapsible pour afficher un Collapsible dans votre contenu.

Prop	Défaut	Type
`name`		`string`
`size`	`md`	`string`
`color`	`neutral`	`string`

::collapsible

| Prop    | Défaut    | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

::

`Field` et `FieldGroup`

Un field est une prop ou un paramètre à afficher dans votre contenu. Vous pouvez les regrouper avec field-group dans une liste.

analytics

boolean

Par défaut à false - Active l'analytics pour votre projet (bientôt disponible).

blob

boolean

Par défaut à false - Active le stockage blob pour stocker des assets statiques, comme des images, vidéos et plus.

cache

boolean

Par défaut à false - Active le cache pour mettre en cache les réponses de vos routes serveur ou fonctions avec cachedEventHandler et cachedFunction de Nitro.

database

boolean

Par défaut à false - Active la base de données SQL pour stocker les données de votre application.

  ::field-group
    ::field{name="analytics" type="boolean"}
      Par défaut à `false` - Active l'analytics pour votre projet (bientôt disponible).
    ::

  ::field{name="blob" type="boolean"}
    Par défaut à `false` - Active le stockage blob pour stocker des assets statiques, comme des images, vidéos et plus.
  ::

  ::field{name="cache" type="boolean"}
    Par défaut à `false` - Active le cache pour mettre en cache les réponses de vos routes serveur ou fonctions avec `cachedEventHandler` et `cachedFunction` de Nitro.
  ::

  ::field{name="database" type="boolean"}
    Par défaut à `false` - Active la base de données SQL pour stocker les données de votre application.
  ::
  ::

::: ::

`Icon`

Utilisez le composant icon pour afficher une Icône dans votre contenu.

:icon{name="i-simple-icons-nuxtdotjs"}

`Kbd`

Utilisez le composant kbd pour afficher un Kbd dans votre contenu.

:kbd{value="meta"} :kbd{value="K"}

`Tabs`

Utilisez les composants tabs et tabs-item pour afficher des Onglets dans votre contenu.

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

::tabs{.w-full}
:::tabs-item{icon="i-lucide-code" label="Code"}
```mdc
::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::::
```
::::

:::tabs-item{icon="i-lucide-eye" label="Aperçu"}
:::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
:::::
:::
::

`Steps`

Enveloppez vos titres avec le composant Steps pour afficher une liste d'étapes.

Utilisez la prop level pour définir quel titre sera utilisé pour les étapes.

Démarrer un nouveau projet

Terminal

    npm create nuxt@latest -- -t github:nuxt-content/docus
    ```

    #### Lancer le CLI docus pour démarrer votre serveur de dev

    ```bash [Terminal]
    docus dev
    ```
    ::::
  :::

  :::tabs-item{icon="i-lucide-code" label="Code"}
  ````mdc
  ::steps{level="4"}
    #### Démarrer un nouveau projet
    
    ```bash [Terminal]
    npm create nuxt@latest -- -t github:nuxt-content/docus
    ```
    
    #### Lancer le CLI docus pour démarrer votre serveur de dev
    
    ```bash [Terminal]
    docus dev
    ```
  ::

::: ::

Éditer cette pageouSignaler un problème

Blocs de code

Affichez du code en ligne et des blocs de code dans votre documentation.

Images et intégrations

Ajoutez des images, vidéos et autres éléments HTML