contribution

Nuxt UI prospère grâce à son incroyable communauté ❤️ Nous accueillons toutes les contributions par le biais de rapports de bogues, de requêtes d'extraction et de commentaires pour aider à améliorer cette bibliothèque.

AI assistance

Nous fournissons des directives de contribution via AGENTS.md](https://github.com/nuxt/ui/blob/v4/AGENTS.md) pour les assistants IA afin de vous aider à contribuer à Nuxt UI. Il est automatiquement repris par tous les agents et guides de codage AI à travers la structure des composants, les modèles de thématisation, les conventions de test et les directives de documentation.

Structure du projet

Voici un aperçu des répertoires et fichiers clés de la structure du projet Nuxt UI:

Documentation

La documentation se trouve dans le dossier docs en tant qu 'application Nuxt utilisant @nuxt/content pour générer des pages à partir de fichiers Markdown. Voir la documentation [Nuxt Content documentationhttps://content.nuxt.com/docs/getting-started) pour plus de détails sur son fonctionnement.

├── app/
│   ├── assets/
│   ├── components/
│   │   └── content/
│   │       └── examples   # Components used in documentation as examples
│   ├── composables/
│   └── ...
├── content/
│   ├── blog/
│   ├── docs/
│   │   ├── 1.getting-started
│   │   ├── 2.components   # Components documentation
│   │   ├── 3.composables
│   │   └── 4.typography
│   └── ...            # Landing pages (index.yml, showcase.yml...)

Module

Le code du module se trouve dans le dossier src. Voici une ventilation de sa structure:

├── plugins/
├── runtime/
│   ├── components/        # Where all the components are located
│   │   ├── Accordion.vue
│   │   ├── Alert.vue
│   │   └── ...
│   ├── composables/
│   ├── locale/
│   ├── plugins/
│   ├── types/
│   ├── utils/
│   └── vue/
│       ├── components/
│       └── plugins/
├── theme/                 # This where the theme for each component is located
│   ├── accordion.ts       # Theme for Accordion component
│   ├── alert.ts
│   └── ...
├── utils/
└── module.ts

@@ph067@cli

Pour faciliter le développement, nous avons créé une CLI que vous pouvez utiliser pour générer des composants et des locales. Vous pouvez y accéder en utilisant la commande pnpm cli make.

Composants

Vous pouvez créer de nouveaux composants en utilisant la commande suivante:

pnpm cli make component <name> [options]

options disponibles:

• --primitive Créer un composant primitif
• --prose Créer un composant en prose
• --content Créer un composant de contenu
• --template Générer uniquement un modèle spécifique (modèles disponibles: playground,docs,test,theme,component)

Exemple:

# Create a basic component
pnpm cli make component my-component

# Create a prose component
pnpm cli make component heading --prose

# Create a content component
pnpm cli make component block --content

# Generate only documentation template
pnpm cli make component my-component --template=docs

@@P099@@Régions

Vous pouvez créer de nouvelles locales en utilisant la commande suivante:

pnpm cli make locale --code <code>

Le nom et la direction locaux sont remplis à partir de CLDR et le code est validé par rapport à celui-ci.

Une fois que vous avez traduit les messages, vous pouvez vérifier que vos paramètres régionaux restent cohérents avec les autres (touches de message, espaces réservés, nom et direction) en exécutant:

pnpm test locale --run

Soumettre une demande de tirage (PR)

Avant de commencer, vérifiez s'il existe un problème existant décrivant le problème ou la demande de fonctionnalité sur laquelle vous travaillez. S'il y en a un, veuillez laisser un commentaire sur le problème pour nous faire savoir que vous y travaillez.

S'il n'y en a pas, ouvrez un nouveau numéro pour discuter du problème ou de la fonctionnalité.

Développement local

Pour commencer le développement local, suivez ces étapes:

git clone -b v4 https://github.com/nuxt/ui.git

corepack enable

pnpm install

pnpm run dev:prepare

pnpm run docs

pnpm run dev

pnpm run dev:vue

Configuration de l'IDE

Nous vous recommandons d'utiliser VSCode à côté de l'extension ESLint . Vous pouvez activer la correction automatique et le formatage lors de l'enregistrement de votre code.

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "explicit"
  },
  "prettier.enable": false
}

@175@Linting

Vous pouvez utiliser la commande lint pour vérifier les erreurs de linting:

pnpm run lint # check for linting errors
pnpm run lint:fix # fix linting errors

Vérification de type

Nous utilisons TypeScript pour la vérification de type. Vous pouvez utiliser la commande typecheck pour rechercher les erreurs de type:

pnpm run typecheck

@@ph186@télécharger

Avant de soumettre un PR, assurez-vous d'exécuter les tests suivants:

pnpm run test

Commettre les conventions

Nous utilisons Conventional Commits pour les messages de validation, ce qui permet de générer automatiquement un journal des changements en fonction des validations. Veuillez lire le guide jusqu'à la fin si vous ne le connaissez pas déjà.

• Utilisez fix et feat pour les modifications de code qui affectent la fonctionnalité ou la logique
• Utilisez docs pour les modifications de documentation et chore pour les tâches de maintenance

Faire une requête de tirage

• Suivez les instructions fournies lors de la création d'un RP
• Assurez-vous que le titre de votre RP adhère au Conventional Commits puisqu 'il sera utilisé une fois le code fusionné.
• Les commits multiples sont corrects; pas besoin de rebaser ou de forcer le push. Nous utiliserons Squash and Merge lors de la fusion.
• Assurez-vous que lint,typecheck et tests travaillent avant de soumettre le RP. Évitez d'apporter des modifications sans rapport.

Nous allons l'examiner rapidement. S'il est assigné à un responsable, il l'examinera attentivement. Ignorez le texte rouge; c'est à des fins de suivi.

@223@Merci à toi

Merci encore pour ton intérêt pour ce projet, tu es géniale!️