Getting Started
Plugin Setup
PzetaWidgetPlugin, opzioni di installazione e contesto iniettato nei componenti.
PzetaWidgetPlugin
Il plugin Vue 3 inizializza la libreria, registra globalmente <PzetaDashboard> e fornisce un contesto reattivo a tutti i discendenti tramite provide.
import { createApp } from 'vue'
import { PzetaWidgetPlugin } from '@pzeta/vue-widget'
const app = createApp(App)
app.use(PzetaWidgetPlugin, {
locale: 'en',
iconPreset: 'lucide',
icons: {
actions: { edit: 'icon-pencil-line' },
},
})
Opzioni — PzetaWidgetPluginOptions
| Opzione | Tipo | Default | Descrizione |
|---|---|---|---|
locale | 'it' | 'en' | 'de' | 'fr' | 'es' | 'it' | Lingua di default per i widget |
iconPreset | 'primeicons' | 'lucide' | 'fontawesome' | 'primeicons' | Preset icone da utilizzare |
icons | DeepPartial<WidgetIcons> | — | Override parziale delle icone (deep merge sul preset) |
customTranslations | Partial<TranslationDictionary> | — | Traduzioni custom aggiuntive |
L'override icons viene applicato dopo il preset base con deep merge: e sufficiente specificare solo le icone da sovrascrivere.
Contesto — PzetaWidgetContext
Il contesto reattivo viene iniettato sotto la chiave PZETA_WIDGET_KEY ed e accessibile da qualsiasi componente discendente.
| Proprieta | Tipo | Descrizione |
|---|---|---|
icons | WidgetIcons | Configurazione icone corrente (deep reactive) |
locale | SupportedLocale | Locale attivo |
setIcons | (newIcons: DeepPartial<WidgetIcons>) => void | Aggiorna parzialmente le icone a runtime |
Accesso al contesto via inject
import { inject } from 'vue'
import { PZETA_WIDGET_KEY } from '@pzeta/vue-widget'
const context = inject(PZETA_WIDGET_KEY)
if (context) {
console.log(context.locale) // 'it' | 'en' | ...
console.log(context.icons.actions.edit)
context.setIcons({ actions: { edit: 'fa-solid fa-pen' } })
}
In alternativa, usa il composable useIcon() che gestisce internamente l'inject con fallback su uno stato globale (utile in test isolati o componenti standalone).
Tipi esportati
import type {
PzetaWidgetPluginOptions,
PzetaWidgetContext,
SupportedLocale,
TranslationDictionary,
WidgetIcons,
IconPreset,
DeepPartial,
} from '@pzeta/vue-widget'