Référence docs
Composants
Découvrez les composants que vous pouvez utiliser dans le contenu.
Composants
Découvrez les composants que vous pouvez utiliser dans le contenu.
<Alert />
Voici une alerte info avec du
code et un lien.Voici une alerte success avec du
code et un lien.Voici une alerte warning avec du
code et un lien.Voici une alerte danger avec du
code et un lien.::alert{type="info"}
Voici une alerte **info** avec du `code` et un [lien](/fr/).
::
::alert{type="success"}
Voici une alerte **success** avec du `code` et un [lien](/fr/).
::
::alert{type="warning"}
Voici une alerte **warning** avec du `code` et un [lien](/fr/).
::
::alert{type="danger"}
Voici une alerte **danger** avec du `code` et un [lien](/fr/).
::
<Badge />
<Badge /> prend en charge les mêmes types que <Alert />.
v1.2DépréciéIntrouvable!
::
:badge[v1.2]
:badge[Déprécié]{type="warning"}
::badge{type="danger"}
Introuvable!
::
<BlockHero />
Framework piloté par le contenu
Docus réconcilie les créateurs de contenu et les développeurs en offrant à chacun les bons outils pour créer et faire évoluer des sites basés sur du contenu.
::block-hero
---
cta:
- Commencer
- /fr/get-started
secondary:
- Ouvrir sur GitHub →
- https://github.com/nuxtlabs/docus
snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter
---
#title
Framework piloté par le contenu
#description
Docus réconcilie les créateurs de contenu et les développeurs en offrant à chacun les bons outils pour créer et faire évoluer des sites basés sur du contenu.
::
<ButtonLink />
:button-link[Jouer sur StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank}
<Callout />
<Callout /> prend en charge les mêmes types que <Alert />.
::callout
#summary
Ceci est un *callout*! Cliquez pour l'ouvrir.
#content
Ceci est le contenu du *callout*.
::
::callout{type="warning"}
#summary
Ceci est un *callout*! Cliquez pour l'ouvrir.
#content
Ceci est le contenu du *callout*.
::
<Card />
Architecture Nuxt.
::card{icon="lucide:box"}
#title
Architecture Nuxt.
#description
Basée sur **Nuxt 3** et **Nuxt Content**. :br
Utilisez Nuxt pour construire un site statique ou une application *serverless*.
::
::
<CardGrid />
Ce qui est inclus
Architecture Nuxt.
Composants Vue.
Écrire en Markdown.
::card-grid
#title
Ce qui est inclus
#root
:ellipsis
#default
::card
#title
Architecture Nuxt.
#description
Exploitez toute la puissance de Nuxt et de son écosystème.
::
::card
#title
Composants Vue.
#description
Utilisez des composants intégrés, ou les vôtres, dans votre contenu.
::
::card
#title
Écrire en Markdown.
#description
Profitez de la simplicité de Markdown et découvrez la syntaxe MDC.
::
::
<CodeGroup />
Ce composant utilise des slots pour créer un panneau à onglets contenant vos exemples de code ou un aperçu.
yarn add docus
npm install docus
::code-group
```bash [Yarn]
yarn add docus
npm install docus
::
<CodeBlock />
À utiliser dans un composant <CodeGroup /> pour afficher un aperçu de code rendu.
::
/* Ajoute comme enfant de `<CodeGroup />` */
::code-block{label="Aperçu" preview}
::badge
Bonjour le monde!
::
::
<!--
::props{of="CodeBlock"}
::
-->
::source-link
---
source: "components/content/CodeBlock.vue"
---
::
---
## `<CopyButton />`
::code-group
::code-block{label="Aperçu" preview}
:copy-button{content="salut!"}
::
```md [Code]
:copy-button{content="salut!"}
::
<Icon />
Le composant <Icon /> donne accès à plus de 100 000 icônes provenant de icones.js.org.
:icon{name="lucide:box"}
:icon{name="lucide:triangle"}
:icon{name="lucide:box"}
<List />
- Important
- Toujours
- Impressionnant
- Félicitations
- Le saviez-vous?
- Vous pouvez aussi faire ceci
- Attention
- À utiliser avec prudence
- Trop boire
- Conduire avec les facultés affaiblies
::list{type="primary"}
- **Important**
- Toujours
::
::list{type="success"}
- Impressionnant
- Félicitations
::
::list{type="info"}
- Le saviez-vous?
- Vous pouvez aussi faire ceci
::
::list{type="warning"}
- Attention
- À utiliser avec prudence
::
::list{type="danger"}
- Trop boire
- Conduire avec les facultés affaiblies
::
<Sandbox />
Intégrez facilement CodeSandbox ou StackBlitz dans votre documentation avec de bonnes performances.
Utilise IntersectionObserver pour charger le contenu lorsqu'il devient visible dans la fenêtre.
:sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
<Terminal />
Bash
$nuxi build:terminal{content="nuxi build"}
<VideoPlayer />
::div
:video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
::