# 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'],
})
```