MALIO-DEV
Repositories
20
 Projects
1
 Packages Code

@malio/layer-ui (1.0.0)

Published 2026-02-19 09:59:37 +00:00 by tristan in MALIO-DEV/malio-layer-ui

Installation

@malio:registry=
npm install @malio/layer-ui@1.0.0
"@malio/layer-ui": "1.0.0"

About this package

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>
  1. L’utiliser dans le playground
    Fichier .playground/pages/index.vue
<template>
  <div class="p-6 space-y-4">
    <MalioBadge label="Nouveau composant" />
  </div>
</template>
  1. 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'],
})

Dependencies

Dependencies

ID Version
@nuxtjs/tailwindcss ^6.14.0

Development Dependencies

ID Version
@nuxt/eslint latest
@types/node ^24.10.13
eslint ^10.0.0
nuxt ^4.3.1
typescript ^5.9.3
vue latest

Peer Dependencies

ID Version
nuxt ^4.0.0
Details
npm
MALIO-DEV/malio-layer-ui
2026-02-19 09:59:37 +00:00
1
1.9 KiB
Assets (1)
layer-ui-1.0.0.tgz 1.9 KiB
Versions (18) View all
1.5.0 2026-05-13
1.4.9 2026-05-11
1.4.8 2026-05-04
1.4.7 2026-05-04
1.4.6 2026-04-27
Issues