Introduzione
Cos'è @pzeta/vue-components
@pzeta/vue-components è una libreria di componenti Vue 3 progettata per il portale PZeta. Offre oltre 115 componenti UI pronti all'uso, costruiti con Tailwind CSS 4 e TypeScript strict, con supporto nativo per la localizzazione multilingua, un sistema di icone configurabile e dark mode.
La libreria segue un approccio zero-dipendenze pesanti: nessun framework UI di terze parti. Ogni componente è scritto da zero con Tailwind utility-first, garantendo bundle minimo tramite tree-shaking.
Feature principali
Componenti per categoria
| Categoria | Componenti | Esempi |
|---|---|---|
| Buttons | 6 | Button, ButtonGroup, SplitButton, ToggleButton, SelectButton, SpeedDial |
| Forms | 31 | InputText, Select, DatePicker, FileUpload, SignatureInput, IntervalInput, AutoComplete... |
| Layout | 21 | Card, Panel, Accordion, Tabs, Stepper, Splitter, Fieldset, Toolbar... |
| Overlays | 6 | Dialog, ConfirmDialog, ConfirmPopup, Drawer, Popover, Sidebar |
| Feedback | 12 | Badge, Toast, Message, Avatar, ProgressBar, Skeleton, Chip, Tag... |
| Navigation | 12 | Menu, Breadcrumb, MegaMenu, MobileNav, PanelMenu, Menubar, ContextMenu... |
| Data | 16 | DataTable, TreeTable, Chart, EventCalendar, Paginator, Carousel, Galleria... |
| Widgets | 5 | ClockWidget, WeatherCard, ToolCard, RestaurantCard, MovieCard |
Composables
La libreria esporta composables pronti all'uso:
- useToast — notifiche toast (info, success, warn, error)
- useConfirm / useConfirmPopup — dialog e popup di conferma
- useThemeColors — gestione dinamica colori tema con preset
- useIcons / useConfig — accesso alla configurazione icone e locale
- useTableCore e famiglia — sort, filter, pagination, selection, editing, expansion, grouping, state persistence
- useDropdownPosition / usePopoverPosition — posizionamento intelligente con auto-flip
- useListNavigation — navigazione tastiera nelle liste
- useSelectionManager — selezione singola/multipla con dataKey
Sistema temi e icone
Il sistema di icone è completamente sostituibile tramite ConfigPlugin. Sono inclusi tre preset pronti:
defaultIcons— PrimeIcons (default)lucideIcons— Lucide Icons (icon-*conlucide-static)fontAwesomeIcons— FontAwesome 7 (fa-solid fa-*)
Il tema colori è basato su CSS custom properties Tailwind 4, con variabili semantiche (--color-primary-*, --color-surface, --color-text) e dark mode tramite classe .dark.
Localizzazione
Supporto built-in per 5 lingue tramite @pzeta/vue-i18n:
- Italiano (
it) — precaricato - Inglese (
en), Francese (fr), Spagnolo (es), Tedesco (de) — lazy-loaded
Supporto MCP
Il sito di documentazione espone un server MCP all'endpoint /mcp, compatibile con Claude Code e Cursor. Questo permette di interrogare la documentazione dei componenti direttamente dall'assistente AI durante lo sviluppo.
Stack richiesto
| Dipendenza | Versione minima | Note |
|---|---|---|
| Node.js | 22 LTS | Richiesto per build e sviluppo |
| Vue | 3.5+ | Peer dependency |
| Tailwind CSS | 4.x | Integrazione via @tailwindcss/vite |
| TypeScript | 5.x+ | Strict mode consigliato |
@pzeta/vue-i18n | ^1.0.2 | Peer dependency per localizzazione |
chart.js | ^4.0.0 | Peer dependency opzionale (solo se si usa Chart) |
Sezioni della documentazione
- Installazione — come installare e configurare la libreria
- Configurazione — plugin globale, selettivo e named imports
- ConfigPlugin — icone e localizzazione
- Setup Tailwind — integrazione con Tailwind CSS 4
- MCP Setup — configurazione per Claude Code e Cursor
- Componenti — documentazione di ogni singolo componente
- Composables — riferimento API dei composables