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

Il modo più semplice per iniziare è registrare il plugin globale che include tutti i componenti:

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

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

// Import plugin principale
import { PzetaComponents } from '@pzeta/vue-components'

const app = createApp(App)
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. :::

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