133 lines
2.0 KiB
Markdown
133 lines
2.0 KiB
Markdown
# Malio UI Layer (Nuxt)
|
||
|
||
Layer Nuxt partageable pour centraliser des composants UI et les réutiliser dans plusieurs projets.
|
||
|
||
Le layer est à la racine du repo.
|
||
Le dossier `.playground/` sert à tester localement les composants du layer.
|
||
|
||
## Commandes utiles
|
||
|
||
### Installation
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### Développement local (playground)
|
||
|
||
Préparer les fichiers Nuxt générés du playground (utile pour TypeScript + ESLint) :
|
||
|
||
```bash
|
||
npm run dev:prepare
|
||
```
|
||
|
||
Lancer le playground :
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### Qualité
|
||
|
||
Lancer le linter :
|
||
|
||
```bash
|
||
npm run lint
|
||
```
|
||
|
||
### Build / preview
|
||
|
||
Build de production du playground :
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
Génération statique du playground :
|
||
|
||
```bash
|
||
npm run generate
|
||
```
|
||
|
||
Prévisualiser le build :
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
### Livraison / publication du layer
|
||
|
||
Vérifier le contenu qui sera publié :
|
||
|
||
```bash
|
||
npm pack --dry-run
|
||
```
|
||
|
||
Publier sur le registry NPM configuré :
|
||
|
||
```bash
|
||
npm publish
|
||
```
|
||
|
||
Publier explicitement sur un registry Gitea :
|
||
|
||
```bash
|
||
npm publish --registry https://<gitea-host>/api/packages/<owner>/npm/
|
||
```
|
||
|
||
## Tester un composant dans le playground
|
||
|
||
Le playground étend déjà le layer via `.playground/nuxt.config.ts`.
|
||
|
||
Exemple rapide :
|
||
|
||
1. Créer un composant dans le layer
|
||
Fichier `app/components/malio/Badge.vue`
|
||
|
||
```vue
|
||
<template>
|
||
<span class="inline-flex rounded-full bg-gray-900 px-2 py-1 text-xs text-white">
|
||
{{ label }}
|
||
</span>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
withDefaults(defineProps<{ label?: string }>(), {
|
||
label: 'Badge',
|
||
})
|
||
</script>
|
||
```
|
||
|
||
2. L’utiliser dans le playground
|
||
Fichier `.playground/pages/index.vue`
|
||
|
||
```vue
|
||
<template>
|
||
<div class="p-6 space-y-4">
|
||
<MalioBadge label="Nouveau composant" />
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
3. Lancer le playground
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
## Utiliser ce layer dans un autre projet Nuxt
|
||
|
||
Installer le package :
|
||
|
||
```bash
|
||
npm install @malio/layer-ui
|
||
```
|
||
|
||
Étendre le layer dans `nuxt.config.ts` du projet consommateur :
|
||
|
||
```ts
|
||
export default defineNuxtConfig({
|
||
extends: ['@malio/layer-ui'],
|
||
})
|
||
```
|