📦 @pappdavid/pd-ui – Telepítési és Frissítési Útmutató

Ez a csomag a közös UI komponenseket és a letisztult --lazy- színskálát tartalmazza.

1. Első telepítés a fogadó projektben

Lépj be a fogadó projekt mappájába, és húzd be a csomagot az npm-ről:

npm install @pappdavid/pd-ui

A stílusok (CSS) beüzemelése

Ahhoz, hogy a lazy színek és a betűtípusok működjenek, a CSS-t be kell kötni a projekt belépési pontján.

A) Ha a fogadó projekt egy sima Vite + Vue projekt:

Nyisd meg az src/main.ts (vagy main.js) fájlt, és add hozzá a legtetejére:

import '@pappdavid/pd-ui/dist/pd-ui.css'

B) Ha a fogadó projekt egy Nuxt projekt:

Nyisd meg a nuxt.config.ts fájlt, és regisztráld a stíluslapot a css tömbben:

export default defineNuxtConfig({
  css: [
    '@pappdavid/pd-ui/dist/pd-ui.css'
  ]
})

2. Használat a kódodban

A stílusok bekötése után a komponenseket név szerint tudod importálni, a háttérnek pedig bátran megadhatod az új skála színeit:

<script setup lang="ts">
import { Button } from "@pappdavid/pd-ui";
</script>

<template>
  <main class="min-h-screen bg-lazy-200 p-10">
    <Button variant="primary">Kattints rám</Button>
  </main>
</template>

3. Csomag frissítése (Update workflow)

Amikor a pd-ui library-ben módosítasz valamit (például hozzáadsz egy új komponenst vagy javítasz egy színt), a fogadó projektben így tudod lefrissíteni a legújabb verzióra.

Lépések a fogadó projektben:

1. Frissítsd be a legújabb verziót az npm-ről:

npm update @pappdavid/pd-ui

2. Indítsd újra a helyi fejlesztői szervert (Dev Server): Mivel a CSS fájlok a build folyamat során cache-elődhetnek, a legbiztosabb, ha leállítod a futó szervert (Ctrl + C), majd újra elindítod:

# Vite vagy Nuxt esetén is:
npm run dev

💡 Hibaelhárítási tipp

Ha az npm update után valamiért még mindig a régi dizájnt vagy komponenst látod, ürítsd ki az npm cache-t és a Vite belső cache mappáját:

rm -rf node_modules/.vite
npm install