Installazione

Prerequisiti

Prima di installare la libreria, verifica che il tuo progetto soddisfi i seguenti requisiti:

Installazione

Installa la libreria come dipendenza del progetto:

npm install @pzeta/vue-components

Peer dependencies

La libreria richiede le seguenti peer dependencies. Installale nel tuo progetto se non già presenti:

# Obbligatorie
npm install vue@^3.5.0
npm install @pzeta/vue-i18n@^1.0.2

# Opzionale — solo se usi il componente Chart
npm install chart.js@^4.0.0

::: note @pzeta/vue-i18n è necessario anche se non usi la localizzazione multilingua: viene usato internamente dai componenti per le label di interfaccia. :::

Configurazione base in main.ts

Setup minimo: registra il plugin globale dei componenti e inizializza @pzeta/vue-i18n con il dizionario italiano. Senza i18n configurato i componenti mostrerebbero le chiavi grezze (es. paginator.first, form.datePlaceholder) al posto delle label tradotte.

import { createApp } from 'vue'
import App from './App.vue'

// Import stili della libreria — OBBLIGATORIO
import '@pzeta/vue-components/style.css'

// `it` è il dizionario italiano già precaricato dalla libreria —
// non riscriverlo a mano nel consumer.
import { PzetaComponents, it } from '@pzeta/vue-components'
import {
  configureI18n,
  isI18nConfigured,
  type TranslationDictionary,
} from '@pzeta/vue-i18n'

// 1. i18n — chiamata di funzione singleton (NON un plugin Vue,
// `I18nPlugin` non esiste).
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)

// 2. Componenti
app.use(PzetaComponents)

app.mount('#app')

::: warning L'import di @pzeta/vue-components/style.css deve avvenire prima degli stili personalizzati del tuo progetto, in modo che le custom properties del tema possano essere sovrascritte correttamente. Senza questo import i componenti vengono renderizzati senza il tema PrimeVue/PZeta e l'app sembra "rotta". :::

optimizeDeps: {
  include: [
    '@pzeta/vue-i18n',
    '@pzeta/vue-components',
    '@pzeta/vue-form',
    '@pzeta/vue-ricerca',
  ],
  force: true,
}

Verifica dell'installazione

Aggiungi un componente in una qualsiasi pagina Vue per verificare che l'installazione funzioni correttamente:

<script setup lang="ts">
// Nessun import necessario se hai registrato PzetaComponents globalmente
</script>

<template>
  <div class="p-4">
    <Button label="Installazione completata!" severity="success" />
  </div>
</template>

Se il bottone appare con lo stile corretto, la libreria è configurata correttamente.

Passi successivi

• Configurazione — scopri le modalità di registrazione (plugin globale, selettivo, named imports)
• ConfigPlugin — configura icone e lingua
• Setup Tailwind — integrazione avanzata con Tailwind CSS 4