Headers et texte

Titres, paragraphes, mise en forme du texte et liens magnifiquement stylisés pour une lisibilité optimale.

Téléchargements

Utilisez des en-têtes pour organiser votre contenu et le rendre plus facile à lire

Les en-têtes peuvent être enveloppés dans un lien d'ancrage quand ils ont un id, avec une icône de hachage affichée sur le survol pour H2 et H3 (sur de grands écrans) afin que les lecteurs puissent lier directement à une section.

Les liens d'ancrage sont activés par défaut pour H2 à H4 lors de l'utilisation de @nuxt/content, et désactivés autrement, Comark inclus. Utilisez le composant [Themeph014/docs/components/theme) avec le prop anchor pour les basculer pour une section de votre application:

<template>
  <UTheme :props="{ prose: { h2: { anchor: true }, h3: { anchor: true }, h4: { anchor: true } } }">
    <!-- your rendered markdown -->
  </UTheme>
</template>

Lorsque vous utilisez @nuxt/content, les liens d'ancrage sont activés pour H2, H3 et H4 par défaut. Vous pouvez contrôler leur generation (par exemple, pour les désactiver pour les interfaces de chat AI) ainsi que la générationxph0333xtoc ](https://content.nuxt.com/docs/getting-started/configuration#toc) dans votre nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  content: {
    renderer: {
      anchorLinks: false
    },
    build: {
      markdown: {
        toc: {
          depth: 3
        }
      }
    }
  }
})

Titre 1

Nuxt à l'intérieur

# Nuxt UI

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h1: {
        slots: {
          base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
          link: 'inline-flex items-center gap-2'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h1: {
            slots: {
              base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
              link: 'inline-flex items-center gap-2'
            }
          }
        }
      }
    })
  ]
})

Titre 2

Quoi de neuf dans v4?

## What's new in v4?

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h2: {
        slots: {
          base: [
            'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          leading: [
            'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
            'transition'
          ],
          leadingIcon: 'size-4 shrink-0',
          link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h2: {
            slots: {
              base: [
                'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
                '[&>a>code]:transition-colors'
              ],
              leading: [
                'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
                'transition'
              ],
              leadingIcon: 'size-4 shrink-0',
              link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
            }
          }
        }
      }
    })
  ]
})

Titre 3

Composants améliorés

### Enhanced components

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h3: {
        slots: {
          base: [
            'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          leading: [
            'absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
            'transition'
          ],
          leadingIcon: 'size-4 shrink-0',
          link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h3: {
            slots: {
              base: [
                'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3 [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
                '[&>a>code]:transition-colors'
              ],
              leading: [
                'absolute -ms-8 top-0.5 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated group-hover:text-primary group-focus:text-primary rounded-md hidden lg:flex text-muted',
                'transition'
              ],
              leadingIcon: 'size-4 shrink-0',
              link: 'group lg:after:absolute lg:after:inset-y-0 lg:after:-inset-s-2 lg:after:w-2'
            }
          }
        }
      }
    })
  ]
})

Titre 4

Démarrer

#### Getting started

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      h4: {
        slots: {
          base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3',
          link: ''
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          h4: {
            slots: {
              base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:rounded-sm [&>a]:outline-primary/25 [&>a]:focus-visible:outline-3',
              link: ''
            }
          }
        }
      }
    })
  ]
})

Formatage du texte

Structurez votre contenu avec des paragraphes clairs et une mise en forme cohérente du texte pour une meilleure lisibilité.

Paragraphe

Nuxt UI fournit une collection complète de composants, de composables et d'utilitaires Vue pour créer des applications modernes et accessibles avec une conception cohérente et une expérience utilisateur améliorée.

Nuxt UI provides a comprehensive collection of Vue components, composables and utilities for building modern, accessible applications with consistent design and enhanced user experience.

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      p: {
        base: 'my-5 leading-7 text-pretty'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          p: {
            base: 'my-5 leading-7 text-pretty'
          }
        }
      }
    })
  ]
})

forte

**texte fort **

**Strong text**

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      strong: {
        base: ''
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          strong: {
            base: ''
          }
        }
      }
    })
  ]
})

Éléments

Texte souligné *

*Emphasized text*

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      em: {
        base: ''
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          em: {
            base: ''
          }
        }
      }
    })
  ]
})

Liens

Pour créer un lien, placez le texte du lien entre crochets suivi de l'URL entre parenthèses. Fonctionne pour les liens externes et internes.

Nuxt documentation

[Nuxt documentation](https://nuxt.com)

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      a: {
        base: [
          'text-primary border-b border-transparent hover:border-primary font-medium rounded-xs outline-primary/25 focus-visible:outline-3 focus-visible:has-[>code]:outline-0 [&>code]:border-dashed [&>code]:outline-primary/25 focus-visible:[&>code]:outline-3 hover:[&>code]:border-primary hover:[&>code]:text-primary focus-visible:[&>code]:border-primary focus-visible:[&>code]:text-primary',
          'transition-colors [&>code]:transition-colors'
        ]
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          a: {
            base: [
              'text-primary border-b border-transparent hover:border-primary font-medium rounded-xs outline-primary/25 focus-visible:outline-3 focus-visible:has-[>code]:outline-0 [&>code]:border-dashed [&>code]:outline-primary/25 focus-visible:[&>code]:outline-3 hover:[&>code]:border-primary hover:[&>code]:text-primary focus-visible:[&>code]:border-primary focus-visible:[&>code]:text-primary',
              'transition-colors [&>code]:transition-colors'
            ]
          }
        }
      }
    })
  ]
})

Blockquotes

Utilisez des blockquotes pour mettre en évidence des informations ou des citations importantes.

L'interface utilisateur > Nuxt s'adapte automatiquement aux paramètres de votre thème, assurant une typographie cohérente sur l'ensemble de votre application.

> Nuxt UI automatically adapts to your theme settings, ensuring consistent typography across your entire application.

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      blockquote: {
        base: 'border-s-4 border-accented ps-4 italic'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          blockquote: {
            base: 'border-s-4 border-accented ps-4 italic'
          }
        }
      }
    })
  ]
})

XPH119xRègles horizontales

Utilisez des règles horizontales pour séparer visuellement les sections de contenu.

---

app.config.ts

export default defineAppConfig({
  ui: {
    prose: {
      hr: {
        base: 'border-t border-default my-12'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        prose: {
          hr: {
            base: 'border-t border-default my-12'
          }
        }
      }
    })
  ]
})

Introduction

Beautiful typography components and utilities to style your content with Nuxt UI.

Lists and tables

Organize information with styled lists and responsive tables for clear, consistent readability.