Configurazione
Tre modalità di utilizzo
@pzeta/vue-components supporta tre modalità di registrazione, con trade-off diversi tra semplicità e dimensione del bundle finale.
Modalità 1 — Plugin Globale
Registra tutti i 115+ componenti in un unico passaggio. Ideale per prototipi, applicazioni interne o quando si usa la maggior parte dei componenti.
import { createApp } from 'vue'
import App from './App.vue'
import { PzetaComponents } from '@pzeta/vue-components'
import '@pzeta/vue-components/style.css'
const app = createApp(App)
app.use(PzetaComponents)
app.mount('#app')
Con questa modalità tutti i componenti (Button, DataTable, Dialog, ecc.) sono disponibili globalmente nei template senza necessità di import locali.
::: note
Il plugin globale registra anche la direttiva v-tooltip, disponibile automaticamente su qualsiasi elemento del DOM.
:::
Modalità 2 — Plugin Selettivi per Categoria
Registra solo i componenti delle categorie che ti servono. Riduce il bundle eliminando le categorie non utilizzate.
import { createApp } from 'vue'
import App from './App.vue'
import '@pzeta/vue-components/style.css'
import {
ButtonsPlugin,
FormsPlugin,
FeedbackPlugin,
} from '@pzeta/vue-components'
const app = createApp(App)
app.use(ButtonsPlugin)
app.use(FormsPlugin)
app.use(FeedbackPlugin)
app.mount('#app')
Plugin disponibili
| Plugin | Componenti inclusi |
|---|---|
ButtonsPlugin | Button, ButtonGroup, SplitButton, ToggleButton, SelectButton, SpeedDial |
FormsPlugin | InputText, Select, Checkbox, DatePicker, FileUpload, Password, AutoComplete, MultiSelect, Slider, TreeSelect, SignatureInput, IntervalInput, Int4RangeInput, FormLabel, FormHelperText e altri |
LayoutPlugin | Card, Panel, Accordion, Tabs, Stepper, Splitter, Fieldset, Toolbar, ScrollPanel, ExpandableFooter e altri |
OverlaysPlugin | Dialog, ConfirmDialog, ConfirmPopup, Drawer, Popover, Sidebar |
FeedbackPlugin | Badge, OverlayBadge, Tag, Chip, Avatar, AvatarGroup, Message, Toast, ProgressBar, ProgressSpinner, Skeleton |
NavigationPlugin | Breadcrumb, Menu, MegaMenu, NavigationMenu, MobileNav, PanelMenu, Menubar, ContextMenu, ScrollTop, TieredMenu |
DataPlugin | DataTable, Column, TreeTable, Tree, Chart, EventCalendar, Paginator, Carousel, Galleria, DataView, Timeline, Inplace, Knob, OrderList, PickList |
WidgetsPlugin | ClockWidget, WeatherCard, ToolCard, RestaurantCard, MovieCard |
Modalità 3 — Named Imports (massimo tree-shaking)
Importa esattamente i componenti necessari direttamente nei file .vue. Garantisce il bundle più piccolo possibile con il tree-shaking del bundler.
<script setup lang="ts">
import { Button, InputText, Dialog } from '@pzeta/vue-components'
</script>
<template>
<Dialog v-model:visible="showDialog" header="Titolo">
<InputText v-model="value" placeholder="Inserisci testo" />
<Button label="Conferma" @click="showDialog = false" />
</Dialog>
</template>
::: note
Con i named imports i componenti non vengono registrati globalmente. Devono essere importati in ogni file .vue che li utilizza. Questo è il pattern consigliato per applicazioni di produzione con bundle ottimizzato.
:::
Combinazione con ConfigPlugin
Indipendentemente dalla modalità scelta, aggiungi sempre ConfigPlugin e I18nPlugin per configurare icone e lingua:
import { createApp } from 'vue'
import App from './App.vue'
import '@pzeta/vue-components/style.css'
import {
PzetaComponents,
ConfigPlugin,
lucideIcons,
it,
} from '@pzeta/vue-components'
import { I18nPlugin } from '@pzeta/vue-i18n'
const app = createApp(App)
// Icone Lucide al posto di PrimeIcons
app.use(ConfigPlugin, { icons: lucideIcons })
// Localizzazione italiana
app.use(I18nPlugin, { defaultLocale: 'it', messages: { it } })
// Componenti
app.use(PzetaComponents)
app.mount('#app')
Per i dettagli su ConfigPlugin e le opzioni di localizzazione, vedi la pagina ConfigPlugin.