00
:
00
:
00
:
00
•Corso SEO AI - Usa SEOEMAIL al checkout per il 30% di sconto

Introduzione a Vue.js

Edoardo Midali
Edoardo Midali

Cos’e Vue.js

Vue.js e un framework JavaScript progressivo per la costruzione di interfacce utente. Creato da Evan You nel 2014, Vue si distingue per la sua curva di apprendimento graduale: puoi adottarlo incrementalmente, da un semplice widget interattivo in una pagina HTML fino a una Single Page Application complessa con routing e state management.

Vue 3, rilasciato nel settembre 2020, rappresenta una riscrittura completa del framework con miglioramenti significativi in termini di performance, dimensione del bundle, supporto TypeScript e la nuova Composition API.

Breve storia

Vue nasce dall’esperienza di Evan You in Google, dove lavorava con AngularJS. L’obiettivo era creare un framework che mantenesse le parti migliori di Angular (data binding, direttive) eliminando la complessita non necessaria.

  • 2014: Prima release pubblica di Vue.js
  • 2016: Vue 2.0 con Virtual DOM e rendering lato server
  • 2018: Inizio sviluppo Vue 3
  • 2020: Release ufficiale Vue 3 con Composition API
  • 2022: Vue 3 diventa la versione predefinita
  • 2024-2025: Vapor Mode (sperimentale) per compilazione senza Virtual DOM

L’approccio progressivo

La caratteristica distintiva di Vue e il suo design progressivo. Puoi usarlo a diversi livelli di complessita.

Livello 1: Script semplice

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
  <h1>{{ messaggio }}</h1>
  <button @click="contatore++">Cliccato {{ contatore }} volte</button>
</div>

<script>
const { createApp, ref } = Vue

createApp({
  setup() {
    const messaggio = ref('Ciao da Vue!')
    const contatore = ref(0)
    return { messaggio, contatore }
  }
}).mount('#app')
</script>

Livello 2: SPA completa con build tool

// main.ts - Applicazione completa con router e store
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.use(createRouter({
  history: createWebHistory(),
  routes: [/* ... */]
}))
app.mount('#app')

Options API vs Composition API

Vue 3 offre due stili di scrittura dei componenti. Entrambi sono pienamente supportati e producono lo stesso risultato.

Options API

L’Options API organizza il codice per tipo di opzione (data, methods, computed, watch). E intuitiva per chi proviene da linguaggi orientati agli oggetti.

<script>
export default {
  data() {
    return {
      nome: 'Mario',
      cognome: 'Rossi',
      eta: 30
    }
  },
  computed: {
    nomeCompleto() {
      return `${this.nome} ${this.cognome}`
    }
  },
  methods: {
    saluta() {
      alert(`Ciao, sono ${this.nomeCompleto}!`)
    }
  },
  mounted() {
    console.log('Componente montato')
  }
}
</script>

Composition API

La Composition API organizza il codice per logica funzionale. E ideale per componenti complessi, riusabilita del codice e TypeScript.

<script setup>
import { ref, computed, onMounted } from 'vue'

const nome = ref('Mario')
const cognome = ref('Rossi')
const eta = ref(30)

const nomeCompleto = computed(() => `${nome.value} ${cognome.value}`)

function saluta() {
  alert(`Ciao, sono ${nomeCompleto.value}!`)
}

onMounted(() => {
  console.log('Componente montato')
})
</script>

Quando scegliere cosa

Criterio Options API Composition API
Curva di apprendimento Piu bassa Moderata
Organizzazione codice Per tipo Per logica
Riusabilita Mixins (limitati) Composables (flessibili)
TypeScript Supporto base Supporto eccellente
Componenti complessi Codice frammentato Codice coeso
Consigliato per Progetti semplici Progetti medi/grandi

Ecosistema Vue

Vue dispone di un ecosistema ufficiale maturo e coerente.

Librerie ufficiali

  • Vue Router: Routing SPA con navigazione dichiarativa e guards
  • Pinia: State management moderno (sostituto di Vuex)
  • Vue DevTools: Estensione browser per debug e ispezione
  • Vite: Build tool ultrarapido creato dallo stesso team Vue
  • VitePress: Generatore di siti statici basato su Vue
  • Vue Test Utils: Utility ufficiali per testing dei componenti

Strumenti della community

  • Nuxt 3: Framework full-stack con SSR, SSG e routing automatico
  • VueUse: Raccolta di composables utility (200+)
  • PrimeVue / Vuetify / Quasar: Librerie UI component
  • FormKit / VeeValidate: Gestione e validazione form
  • TanStack Query per Vue: Data fetching e caching

Confronto con altri framework

Vue vs React

React e una libreria per UI, Vue e un framework progressivo. React usa JSX, Vue usa template HTML. React richiede piu decisioni architetturali (state management, routing), Vue offre soluzioni ufficiali integrate.

<!-- Vue: template dichiarativo -->
<template>
  <ul>
    <li v-for="item in lista" :key="item.id">
      {{ item.nome }}
    </li>
  </ul>
</template>

// React: JSX con JavaScript
function Lista({ lista }) {
  return (
    <ul>
      {lista.map(item => (
        <li key={item.id}>{item.nome}</li>
      ))}
    </ul>
  )
}

Vue vs Angular

Angular e un framework enterprise completo con opinioni forti su struttura e pattern (dependency injection, moduli, decorators). Vue e piu leggero e flessibile, con una curva di apprendimento meno ripida.

Vue vs Svelte

Svelte compila i componenti a JavaScript imperativo senza Virtual DOM. Vue 3 con il futuro Vapor Mode si avvicina a questo approccio, mantenendo la compatibilita con l’ecosistema esistente.

Concetti fondamentali

Prima di procedere con la documentazione, ecco i concetti chiave di Vue 3.

Reattivita

Vue traccia automaticamente le dipendenze dei dati e aggiorna il DOM quando i dati cambiano. Non serve chiamare setState o gestire manualmente gli aggiornamenti.

<script setup>
import { ref } from 'vue'

const contatore = ref(0)

// Quando contatore.value cambia, il template si aggiorna automaticamente
function incrementa() {
  contatore.value++
}
</script>

<template>
  <p>Contatore: {{ contatore }}</p>
  <button @click="incrementa">+1</button>
</template>

Componenti

Tutto in Vue e un componente. I Single File Components (.vue) incapsulano template, logica e stile in un unico file.

<!-- CartaProdotto.vue -->
<script setup>
defineProps<{
  nome: string
  prezzo: number
  immagine: string
}>()
</script>

<template>
  <div class="carta-prodotto">
    <img :src="immagine" :alt="nome" />
    <h3>{{ nome }}</h3>
    <p class="prezzo">{{ prezzo.toFixed(2) }} EUR</p>
  </div>
</template>

<style scoped>
.carta-prodotto {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
}

.prezzo {
  color: #16a34a;
  font-weight: bold;
}
</style>

Direttive

Le direttive sono attributi speciali con il prefisso v- che applicano comportamenti reattivi al DOM.

<template>
  <!-- Condizionale -->
  <p v-if="visibile">Sono visibile</p>

  <!-- Iterazione -->
  <li v-for="item in lista" :key="item.id">{{ item.nome }}</li>

  <!-- Binding attributi -->
  <img v-bind:src="urlImmagine" />

  <!-- Gestione eventi -->
  <button v-on:click="gestisciClick">Clicca</button>

  <!-- Two-way binding -->
  <input v-model="testo" />
</template>

Prossimi passi

Questa documentazione copre tutti gli aspetti fondamentali e avanzati di Vue 3, dall’installazione al testing. Segui l’ordine suggerito nella sidebar per un percorso di apprendimento strutturato, oppure consulta direttamente l’argomento che ti interessa.

SuccessivoInstallazione e Setup