Bijdrage

Nuxt UI gedijt dankzij de ongelooflijke community ❤️. We verwelkomen alle bijdragen via bugrapporten, pull-aanvragen en feedback om deze bibliotheek nog beter te maken.

AI hulpverlening

We bieden bijdragende richtlijnen via AGENTS.md voor AI-assistenten om u te helpen bij te dragen aan Nuxt UI. Het wordt automatisch opgepikt door alle AI-coderingsagenten en begeleidt door de componentstructuur, themapatronen, testconventies en documentatierichtlijnen.

Projectstructuur

Hier is een overzicht van de belangrijkste mappen en bestanden in de Nuxt UI-projectstructuur:

Documentation

De documentatie leeft in de docs-map als een Nuxt-app die @nuxt/content gebruikt om pagina 's uit Markdown bestanden te genereren. Zie de Nuxt Content documentation voor details over hoe het werkt. Hier is een overzicht van de structuur:

├── 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

De modulecode bevindt zich in de src-map. Hier is een overzicht van de structuur:

├── 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

CLI

Om ontwikkeling gemakkelijker te maken, hebben we een CLI gemaakt die u kunt gebruiken om componenten en landinstellingen te genereren. U kunt deze openen met het pnpm cli make-commando.

Componenten

U kunt nieuwe componenten maken met de volgende opdracht:

pnpm cli make component <name> [options]

Beschikbare opties:

• --primitive Een primitieve component maken
• --prose Een prozacomponent maken
• --content Een inhoudscomponent maken
• --template Genereer alleen een specifieke sjabloon (beschikbare sjablonen: playground, docs, test, theme, component)

Voorbeeld:

# 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

Lokalen

U kunt nieuwe landinstellingen maken met de volgende opdracht:

pnpm cli make locale --code <code>

De locale naam en richting worden ingevuld vanuit CLDR en de code wordt ertegen gevalideerd. Je kunt ze overschrijven met de --name en --dir vlaggen.

Nadat u de berichten hebt vertaald, kunt u controleren of uw landinstelling consistent blijft met de andere (berichtsleutels, tijdelijke aanduidingen, naam en richting) door het volgende uit te voeren:

pnpm test locale --run

Een Pull Request indienen (PR)

Controleer voordat u begint of er een bestaand probleem is dat het probleem of het functieverzoek beschrijft waaraan u werkt. Als dat zo is, laat dan een reactie achter op het probleem om ons te laten weten dat u eraan werkt.

Als dat niet het geval is, opent u een nieuw probleem om het probleem of de functie te bespreken.

Lokale ontwikkeling

Volg deze stappen om de lokale ontwikkeling te starten:

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

IDE instellen

We raden het gebruik van VSCode naast de ESLint extension. U kunt auto-fix en opmaak inschakelen bij het opslaan van uw code. Hier is hoe:

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

Linten

U kunt het lint commando gebruiken om te controleren op linting fouten:

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

Type het controleren

We gebruiken TypeScript voor typecontrole. U kunt het typecheck commando gebruiken om te controleren op typefouten:

pnpm run typecheck

Testen

Voordat u een PR indient, moet u ervoor zorgen dat u de tests uitvoert:

pnpm run test

Commit conventies

We gebruiken Conventional Commits voor commit-berichten, waarmee een changelog automatisch kan worden gegenereerd op basis van de commits. Lees de guide door als je er nog niet bekend mee bent.

• xfix en feat gebruiken voor codewijzigingen die van invloed zijn op functionaliteit of logica
• Gebruik docs voor documentatiewijzigingen en chore voor onderhoudstaken

Een Pull Request maken

• Volg langs de instructions bij het maken van een PR
• Zorg ervoor dat de titel van uw PR voldoet aan de Conventionele Commits omdat deze wordt gebruikt zodra de code is samengevoegd.
• Meerdere commits zijn prima; het is niet nodig om te rebasen of push te forceren. We gebruiken Squash and Merge bij het samenvoegen.
• Zorg ervoor dat lint, typecheck en tests werken voordat u de PR indient. Vermijd het aanbrengen van niet-gerelateerde wijzigingen.

We zullen het onmiddellijk bekijken. Indien toegewezen aan een onderhouder, zullen ze het zorgvuldig beoordelen. Negeer de rode tekst; het is voor trackingdoeleinden.

Bedankt

Nogmaals bedankt voor uw interesse in dit project! Je bent geweldig! ❤️