Getting Started

Configurazione

Modalità di configurazione di @pzeta/vue-components — plugin globale, selettivo, named imports.

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, WeekScheduler, 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 (icone) e configureI18n() (lingua) — il primo è un plugin Vue, il secondo una funzione singleton di @pzeta/vue-i18n (non app.use(...)).

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 {
  configureI18n,
  isI18nConfigured,
  type TranslationDictionary,
} from '@pzeta/vue-i18n'

// i18n — singleton globale, configurarlo PRIMA di createApp
if (!isI18nConfigured()) {
  const itDict = it as unknown as TranslationDictionary
  configureI18n({
    defaultLocale: 'it',
    fallbackLocale: 'it',
    locales: {
      it: { loader: () => Promise.resolve({ default: itDict }), preloaded: itDict },
    },
  })
}

const app = createApp(App)

// Icone Lucide al posto di PrimeIcons
app.use(ConfigPlugin, { icons: lucideIcons })

// Componenti
app.use(PzetaComponents)

app.mount('#app')

I18nPlugin non esiste in @pzeta/vue-i18n. Gli unici export sono configureI18n, isI18nConfigured, getI18nConfig, useI18n, loadLocale, initI18n, resetI18n. La configurazione i18n è una chiamata di funzione, non un plugin Vue.

Per i dettagli su ConfigPlugin e le opzioni di localizzazione, vedi la pagina ConfigPlugin.

Coabitazione con `@pzeta/vue-form` (i18n)

Attenzione — se l'app usa anche @pzeta/vue-form, NON chiamare configureI18n() separatamente per registrare la lingua di @pzeta/vue-components. I18nFormPlugin di vue-form invoca a sua volta configureI18n() durante il suo install() e sostituisce il dizionario, lasciando solo le chiavi validation.* di vue-form. Le chiavi dei componenti (paginator.*, panel.*, form.datePlaceholder, table.selectAll, ecc.) sparirebbero e i componenti mostrerebbero le chiavi grezze a schermo.

Pattern corretto in presenza di vue-form: passare il dizionario it di @pzeta/vue-components come mergeTranslations di I18nFormPlugin. Un solo punto di configurazione i18n:

import { PzetaComponents, it as itComponents } from '@pzeta/vue-components'
import { I18nFormPlugin, VueFormPlugin } from '@pzeta/vue-form'

const app = createApp(App)
app.use(PzetaComponents)
// I18nFormPlugin riconfigura vue-i18n: passa qui il dizionario dei componenti
// per non perderlo.
app.use(I18nFormPlugin, {
  mergeTranslations: {
    it: itComponents as unknown as Record<string, unknown>,
  },
})
app.use(VueFormPlugin)

Vedi anche la pagina I18nFormPlugin di @pzeta/vue-form per i dettagli.

Installazione

Come installare @pzeta/vue-components nel tuo progetto Vue 3.

ConfigPlugin

Configurazione icone e localizzazione con ConfigPlugin di @pzeta/vue-components.