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

npm install

Développement local (playground)

Préparer les fichiers Nuxt générés du playground (utile pour TypeScript + ESLint) :

npm run dev:prepare

Lancer le playground :

npm run dev

Qualité

Lancer le linter :

npm run lint

Build / preview

Build de production du playground :

npm run build

Génération statique du playground :

npm run generate

Prévisualiser le build :

npm run preview

Livraison / publication du layer

Vérifier le contenu qui sera publié :

npm pack --dry-run

Publier sur le registry NPM configuré :

npm publish

Publier explicitement sur un registry Gitea :

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

<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

<template>
  <div class="p-6 space-y-4">
    <MalioBadge label="Nouveau composant" />
  </div>
</template>

3. Lancer le playground

npm run dev

Utiliser ce layer dans un autre projet Nuxt

Installer le package :

npm install @malio/layer-ui

Étendre le layer dans nuxt.config.ts du projet consommateur :

export default defineNuxtConfig({
  extends: ['@malio/layer-ui'],
})