Nuxt Components Kit

Kit de composants réutilisables pour Nuxt 3, basé sur les composants natifs de Nuxt.

🚀 Installation

# Copier le dossier dans votre projet
cp -r nuxt-components-kit components/

# Ou l'ajouter comme dépendance locale
npm install ./nuxt-components-kit

📦 Composants Disponibles

Layout Components

AppHeader

Header réutilisable avec navigation et CTA configurables.

<AppHeader
  title="Mon Site"
  subtitle="Description du site"
  :navigation="[
    { path: '/', label: 'Accueil' },
    { path: '/services', label: 'Services' },
    { path: '/contact', label: 'Contact' }
  ]"
  :cta="{
    primary: { path: '/booking', label: 'Prendre RDV' },
    secondary: { path: '/contact', label: 'Nous contacter' }
  }"
/>

AppFooter

Footer réutilisable avec informations de contact et navigation.

<AppFooter
  title="Mon Site"
  subtitle="Description du site"
  description="Description détaillée du site et de ses services."
  :footer-navigation="{
    title: 'Navigation',
    links: [
      { path: '/', label: 'Accueil' },
      { path: '/services', label: 'Services' }
    ]
  }"
  :contact="{
    title: 'Contact',
    email: '[email protected]',
    phone: '06 XX XX XX XX',
    address: 'Adresse du cabinet'
  }"
  copyright-text="Tous droits réservés"
  additional-info="Numéro ADELI : XXXXXXX"
/>

AppNavigation

Composant de navigation utilisant UNavigation de Nuxt 3.

<AppNavigation
  :links="[
    { path: '/', label: 'Accueil' },
    { path: '/services', label: 'Services' }
  ]"
  navigation-classes="hidden md:flex items-center space-x-8"
/>

UI Components

AppButton

Bouton réutilisable avec variantes et tailles.

AppCard

Carte réutilisable pour afficher du contenu.

AppIcon

Composant d'icône réutilisable.

Section Components

HeroSection

Section héro réutilisable.

ServicesGrid

Grille de services réutilisable.

BookingSection

Section de réservation réutilisable.

🎨 Personnalisation

Tous les composants utilisent Tailwind CSS et sont entièrement personnalisables via les props.

🔧 Utilisation avec UNavigation

Le kit utilise les composants natifs de Nuxt 3 comme UNavigation pour une meilleure intégration et performance.

📚 Exemples

Voir le dossier examples/ pour des exemples d'utilisation complets.