Getting Started
Installazione
Installazione e configurazione di @pzeta/vue-widget con peer dependencies.
Installazione
npm install @pzeta/vue-widget
Peer dependencies
La libreria dichiara come peer le dipendenze runtime, da installare nell'app consumer:
npm install vue@^3.5 vue-router@^4 chart.js@^4 chartjs-chart-geo@^4 \
@pzeta/vue-components@^1.4 @pzeta/vue-i18n@^1
| Dipendenza | Versione | Note |
|---|---|---|
vue | ^3.5 | Composition API |
vue-router | ^4 | Usato dai widget per navigazione (link tabelle, dettagli) |
chart.js | ^4 | Backend grafici (line, bar, doughnut, radar, polar) |
chartjs-chart-geo | ^4 | Mappe geografiche (LiveUsersCountry, SessionsByCountry) |
@pzeta/vue-components | ^1.4 | Primitive UI (EmptyState, Card, ecc.) |
@pzeta/vue-i18n | ^1 | Sistema i18n; la libreria fornisce solo i dizionari |
Import CSS
Importa lo stile distribuito una sola volta nell'entry point:
import '@pzeta/vue-widget/style.css'
Setup base
import { createApp } from 'vue'
import { PzetaWidgetPlugin } from '@pzeta/vue-widget'
import '@pzeta/vue-widget/style.css'
import App from './App.vue'
const app = createApp(App)
app.use(PzetaWidgetPlugin, {
locale: 'it',
iconPreset: 'primeicons',
})
app.mount('#app')
Il plugin registra globalmente il componente <PzetaDashboard> e fornisce un contesto reattivo (icone + locale) accessibile via inject(PZETA_WIDGET_KEY) nei widget custom.
Setup i18n
L'app consumer e responsabile della configurazione di @pzeta/vue-i18n. La libreria espone solo i dizionari:
import { createI18n } from '@pzeta/vue-i18n'
import { itLocale, loadEn } from '@pzeta/vue-widget'
const i18n = createI18n({
locale: 'it',
messages: { it: itLocale },
})
// Lazy loading altre lingue
async function switchToEnglish() {
const en = await loadEn()
i18n.global.setLocaleMessage('en', en.default)
i18n.global.locale.value = 'en'
}
Lingue disponibili: it (precaricata), en, de, fr, es (tutte lazy via loadEn/loadDe/loadFr/loadEs).
Import individuali
import {
PzetaWidgetPlugin,
PZETA_WIDGET_KEY,
widgetRegistry,
WidgetType,
defaultIcons,
lucideIcons,
fontAwesomeIcons,
useWidgetEvent,
useWidgetData,
useChartDefaults,
} from '@pzeta/vue-widget'