Vuetify · Marco Consiglio

🗺️ Cos'è Vuetify — componenti Vue con estetica Material Design

Vuetify è una libreria di componenti Vue.js che implementa Material Design (come Materialize CSS, guida dedicata), ma con una differenza fondamentale: i componenti sono elementi HTML personalizzati riconosciuti da Vue (es. <v-btn>), non classi CSS da applicare a tag HTML standard.

Questo significa che Vuetify richiede un progetto Vue.js funzionante per essere usato — non è un semplice file CSS da collegare a qualsiasi pagina HTML, come invece lo sono Bootstrap, Materialize CSS o Tailwind.

⚙️ Setup — richiede un progetto Vue, non solo un link CDN

// installazione tipica in un progetto Vue esistente (via npm) npm install vuetify // main.js: Vuetify va REGISTRATO come plugin dell'applicazione Vue import { createApp } from 'vue' import { createVuetify } from 'vuetify' import App from './App.vue' const vuetify = createVuetify() createApp(App).use(vuetify).mount('#app')

⚠️ Questa è la differenza pratica più importante rispetto a Materialize CSS: Materialize funziona con un semplice <link> in qualsiasi pagina HTML; Vuetify richiede un'applicazione Vue.js già configurata (tipicamente con Vite o Vue CLI) — non esiste un modo pratico di "aggiungere Vuetify" a una pagina HTML statica senza Vue.

🧩 Componenti come TAG invece di classi CSS

// Materialize CSS: classe applicata a un tag HTML standard <a class="btn waves-effect"">Click</a> // Vuetify: componente Vue con il proprio tag personalizzato <v-btn color="primary">Click</v-btn>

💡 <v-btn> non è HTML standard: è un COMPONENTE Vue che Vuetify registra globalmente nell'applicazione, che internamente genera il markup HTML necessario — questo permette di passare proprietà come color="primary" direttamente come attributo, invece di comporre classi CSS multiple.

🔢 Grid — v-container, v-row, v-col

<v-container> <v-row> <v-col cols="12" md="6" lg="4"> Colonna adattiva </v-col> </v-row> </v-container>

Concetto Bootstrap	Equivalente Vuetify
`container`	`<v-container>`
`row`	`<v-row>`
`col-md-6`	`<v-col cols="12" md="6">`

✅ Stessa LOGICA a 12 colonne mobile-first già vista in Bootstrap e Materialize, ma espressa come ATTRIBUTI del componente (cols, md, lg) invece che come classi CSS — coerente con l'approccio "componenti Vue" di tutto il framework.

🃏 Componenti principali: v-card, v-btn

<v-card elevation="4"> <v-img src="copertina.jpg" height="200"></v-img> <v-card-title>Titolo</v-card-title> <v-card-text>Testo descrittivo.</v-card-text> <v-card-actions> <v-btn color="primary">Scopri di più</v-btn> </v-card-actions> </v-card>

Anteprima (visiva, resa in HTML statico per la demo)

Titolo

Testo descrittivo.

Scopri

💡 elevation="4" è l'equivalente diretto di z-depth-4 in Materialize CSS (guida dedicata) — stesso concetto di ombra/elevazione Material Design, ma passato come attributo del componente invece che come classe CSS separata.

🔗 Binding e reattività — la differenza più importante rispetto ai framework CSS-only

Poiché Vuetify è basato su Vue, i suoi componenti si integrano nativamente con la reattività di Vue: un valore che cambia nei dati dell'applicazione aggiorna automaticamente l'interfaccia, senza manipolare manualmente il DOM.

<template> <v-btn :loading="caricamento" @click="salvaDati"> Salva </v-btn> </template> <script setup> import { ref } from 'vue' const caricamento = ref(false) async function salvaDati() { caricamento.value = true // operazione asincrona, es. chiamata API caricamento.value = false } </script>

⚠️ Questo è impossibile con Bootstrap/Materialize/Pure "puri": :loading="caricamento" collega automaticamente lo stato di caricamento del pulsante (che mostra uno spinner interno) alla variabile reattiva caricamento — cambiare quella variabile aggiorna l'aspetto del pulsante senza scrivere manualmente codice DOM (classList.add, ecc.).

🎨 Theming — personalizzare colori a livello di applicazione

// main.js: definizione di un tema personalizzato al momento della creazione di Vuetify const vuetify = createVuetify({ theme: { themes: { light: { colors: { primary: '#C9A24B', // sostituisce il blu predefinito di Vuetify } } } } })

✅ Definire primary una sola volta nel tema fa sì che TUTTI i componenti che usano color="primary" (bottoni, icone, bordi) cambino colore automaticamente in tutta l'applicazione — lo stesso principio di coerenza semantica visto nelle variabili colore di Bootstrap, ma applicato a livello di configurazione JavaScript dell'intera app invece che con classi CSS.

🧩 Applicazioni tipiche

Tipologia	Uso tipico
Dashboard amministrative Vue	Pannelli con dati dinamici, tabelle reattive, form collegati allo stato dell'app
App single-page (SPA)	Applicazioni Vue complete che richiedono un intero design system Material Design integrato
Progetti enterprise Vue	Team che scelgono Vue come framework JS e vogliono un componente library completo senza scrivere CSS custom
NON adatto a	Pagine HTML statiche senza build step: per quel caso, Materialize CSS o Bootstrap restano scelte più dirette

🎓 Esercitazioni pratiche

Griglia di v-card responsive

In un progetto Vue con Vuetify configurato, crea una v-row con 3 v-col (cols="12" md="4") ciascuna contenente una v-card con titolo e testo.

⏱ 30 min📦 Componente Vue💻 Individuale

Pulsante con stato di caricamento reattivo

Crea un v-btn con :loading collegato a una variabile ref, che si attiva per 2 secondi al click simulando un'operazione asincrona con setTimeout.

⏱ 25 min📦 Componente Vue💻 Individuale

Tema personalizzato con colore primary custom

Configura createVuetify con un colore primary personalizzato, e verifica che tutti i v-btn color="primary" della tua app cambino colore automaticamente.

⏱ 20 min📦 File main.js💻 Individuale

Vuetify — Material Design per Vue.js

Report Quiz

🎓 Attestato di Competenze sbloccato!