MALIO-DEV
Repositories
20
 Projects
1
 Packages Code

@malio/layer-ui (1.5.0)

Published 2026-05-13 07:02:41 +00:00 by tristan in MALIO-DEV/malio-layer-ui

Installation

@malio:registry=
npm install @malio/layer-ui@1.5.0
"@malio/layer-ui": "1.5.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 (CI)

La publication est automatique via .gitea/workflows/release.yml sur push main / master.

Le job CI :

  1. Installe les dépendances
  2. Lance npm run dev:prepare
  3. Lance npm run lint
  4. Lance semantic-release (version automatique + publish sur Gitea Packages)

Les versions sont calculées via Conventional Commits :

  • fix: ... -> patch (1.0.0 -> 1.0.1)
  • feat: ... -> minor (1.0.0 -> 1.1.0)
  • feat!: ... ou BREAKING CHANGE: -> major (1.0.0 -> 2.0.0)

Secrets requis dans le repo Gitea :

  • NPM_TOKEN : token avec droits publish package
  • RELEASE_TOKEN : token avec droits write repo (tags/releases)

Commande locale utile avant push :

npm pack --dry-run

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

1) Configurer le .npmrc du projet consommateur

Option simple :

@malio:registry=https://gitea.malio.fr/api/packages/MALIO-DEV/npm/

Puis :

export NPM_TOKEN=TON_TOKEN_GITEA

2) Installer le package

npm install @malio/layer-ui

3) Étendre le layer

Dans nuxt.config.ts du projet consommateur :

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

Dependencies

Dependencies

ID Version
@nuxt/icon ^2.2.1
@nuxtjs/tailwindcss ^6.14.0
@tiptap/extension-color ^3.22.5
@tiptap/extension-highlight ^3.22.5
@tiptap/extension-placeholder ^3.22.5
@tiptap/extension-text-style ^3.22.5
@tiptap/pm ^3.22.5
@tiptap/starter-kit ^3.22.5
@tiptap/vue-3 ^3.22.5
maska ^3.2.0
tailwind-merge ^3.3.1
tiptap-markdown ^0.9.0

Development Dependencies

ID Version
@histoire/plugin-vue ^1.0.0-beta.1
@nuxt/eslint latest
@types/node ^24.10.13
@vitejs/plugin-vue ^6.0.4
@vue/test-utils ^2.4.6
eslint ^10.0.0
histoire ^1.0.0-beta.1
jsdom ^27.0.1
nuxt ^4.3.1
typescript ^5.9.3
vitest ^3.2.4
vue latest

Peer Dependencies

ID Version
nuxt ^4.0.0
Details
npm
MALIO-DEV/malio-layer-ui
2026-05-13 07:02:41 +00:00
2
latest
76 KiB
Assets (1)
layer-ui-1.5.0.tgz 76 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