Vue.js

Wat is Vue.js?

Vue.js is een open source JavaScript framework voor het bouwen van gebruikersinterfaces en single-page applications. Veel developers noemen het gewoon Vue. Beide namen gaan over hetzelfde framework.

Vue richt zich op wat de gebruiker ziet: knoppen, formulieren, lijsten en complete schermen. Je bouwt een interface op uit losse componenten. Vue zorgt ervoor dat het scherm vanzelf bijwerkt zodra de data verandert.

Evan You bracht Vue.js in 2014 uit. Hij werkte daarvoor bij Google met AngularJS en wilde een lichter alternatief maken dat de handige delen behield. Vue valt onder de MIT-licentie, dus je mag het gratis gebruiken, ook in commerciële projecten.

Er zit geen groot techbedrijf achter Vue. Het project draait op een kernteam, de community en sponsors.

Wat betekent progressive framework?

Vue noemt zichzelf een progressive framework. Dat betekent dat je het stap voor stap kunt inzetten. Je kunt Vue gebruiken voor één interactief onderdeel op een bestaande pagina. Je kunt er ook een volledige webapplicatie mee bouwen, met routing, state management en server-side rendering.

Je hoeft dus niet alles in één keer over te nemen. Begin je klein, dan kun je later uitbreiden zonder van framework te wisselen.

Waarvoor gebruik je Vue.js?

Vue.js is breed inzetbaar voor de frontend van websites en webapplicaties. Je komt het vaak tegen in deze situaties:

• Single-page applications (SPA's), waarbij de pagina niet steeds opnieuw laadt

• Dashboards en interne tools met veel formulieren, tabellen en filters

• Interactieve onderdelen binnen een bestaande website, zoals een configurator of zoekfilter

• Webshops en contentwebsites, vaak samen met Nuxt voor server-side rendering

• Mobiele apps en desktop-apps, via tools zoals Capacitor of Electron die webtechniek omzetten naar een app

Bekende gebruikers zijn onder meer GitLab en Alibaba. Daarnaast is Vue populair binnen het Laravel-ecosysteem in de PHP-wereld.

Hoe werkt Vue.js?

Vue.js draait om drie ideeën: componenten, reactiviteit en templates. Samen zorgen ze ervoor dat je minder code schrijft om het scherm actueel te houden.

Componenten

Een component is een herbruikbaar blok van de interface, zoals een knop, een productkaart of een navigatiebalk. Elk component heeft zijn eigen HTML, logica en styling. Een grote applicatie bestaat uit een boom van componenten die in elkaar passen.

Componenten geven data aan elkaar door met props. Een kind-component kan via een event een seintje terugsturen naar zijn ouder. Zo blijft duidelijk waar data vandaan komt.

Reactiviteit

Reactiviteit is het hart van Vue. Je koppelt data aan de interface en Vue houdt bij welke delen van het scherm van welke data afhangen. Verandert een waarde, dan werkt Vue alleen die delen bij.

Je hoeft de pagina dus niet zelf aan te passen met losse DOM-opdrachten. In Vue 3 werkt dit systeem met JavaScript Proxies. Die merken het op zodra data wordt gelezen of aangepast.

Templates en directives

In een template schrijf je gewone HTML, aangevuld met speciale attributen. Die attributen heten directives en beginnen met v-. Met dubbele accolades zet je een waarde direct in de tekst, zoals {{ naam }}.

Dit zijn de directives die je het vaakst gebruikt:

• v-if en v-else tonen of verbergen een element op basis van een voorwaarde

• v-for herhaalt een element voor elk item in een lijst

• v-bind (kort: :) koppelt een attribuut aan data

• v-on (kort: @) reageert op events, zoals een klik

• v-model koppelt een invoerveld in twee richtingen aan data

Virtual DOM

Standaard werkt Vue met een virtual DOM. Dat is een lichte kopie van de pagina in het geheugen. Bij een wijziging vergelijkt Vue de nieuwe versie met de vorige en past alleen de verschillen toe op de echte pagina.

Vue haalt hier extra snelheid uit doordat de compiler templates vooraf analyseert. Delen die nooit veranderen, slaat Vue bij een update over. Daarnaast werkt het Vue-team aan Vapor Mode: een optionele compilatiemodus die de virtual DOM helemaal overslaat en de pagina direct bijwerkt.

Single-file components

In de meeste Vue-projecten schrijf je componenten als single-file component (SFC). Dat is een bestand met de extensie .vue waarin template, logica en styling bij elkaar staan. Een build tool zoals Vite zet dit bestand om naar code die de browser begrijpt.

Een eenvoudige teller ziet er zo uit:

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

const count = ref(0)
</script>

<template>
  <button @click="count++">
    Je hebt {{ count }} keer geklikt
  </button>
</template>

Het script-blok bevat de logica. Door ref() is de variabele count reactief. Het template toont de waarde en verhoogt die bij elke klik. Met scoped geldt de styling alleen voor dit component.

Options API en Composition API

Vue.js kent twee manieren om de logica van een component te schrijven. Ze bestaan naast elkaar en je kunt ze allebei in hetzelfde project gebruiken.

Options API

De Options API is de klassieke manier uit Vue 2. Je deelt een component op in vaste onderdelen, zoals data, methods, computed en watch. Dat is overzichtelijk voor kleine componenten en makkelijk te leren.

export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

Composition API

De Composition API kwam met Vue 3. Hier schrijf je logica als gewone functies, met hulpmiddelen zoals ref, computed en watch. Bij grotere componenten houd je zo alles wat bij elkaar hoort ook echt bij elkaar.

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

const count = ref(0)
const doubled = computed(() => count.value * 2)
</script>

Een groot voordeel is hergebruik. Je kunt logica in een eigen functie zetten, een zogenoemde composable, en die in meerdere componenten gebruiken. De Composition API werkt ook beter samen met TypeScript. Voor volledige applicaties met een build tool raadt Vue daarom de Composition API aan.

Het ecosysteem rond Vue.js

Een sterk punt van Vue.js is dat de belangrijkste tools officieel worden onderhouden of dicht bij het kernteam staan. Je hoeft dus niet zelf uit tientallen losse pakketten te kiezen. Dit zijn de bekendste onderdelen:

• Vue Router: regelt de navigatie tussen pagina's in een single-page application

• Pinia: de officiële oplossing voor state management, dus data die meerdere componenten delen; Pinia volgde Vuex op

• Vite: een snelle build tool en dev server, ook bedacht door Evan You

• Nuxt: een meta-framework bovenop Vue voor server-side rendering, static site generation en routing op basis van mappen

• Vue DevTools: een browserextensie om componenten, state en performance te bekijken

Daarnaast zijn er veel UI-bibliotheken met kant-en-klare componenten, zoals Vuetify, PrimeVue en Quasar.

Voordelen en nadelen van Vue.js

Geen enkel framework is voor elk project de beste keuze. Het helpt om de sterke en zwakke kanten van Vue.js naast elkaar te zetten.

Voordelen

Vue staat bekend als een van de toegankelijkste frameworks om mee te beginnen. De belangrijkste voordelen zijn:

• Lage drempel: templates lijken op gewone HTML, dus met basiskennis van HTML, CSS en JavaScript kom je al ver

• Goede documentatie: de officiële uitleg is helder en compleet

• Flexibel: je zet het in voor één widget of voor een volledige applicatie

• Officiële tools: routing en state management zijn geregeld, dus je hoeft minder losse keuzes te maken

• Snel en licht: het reactiviteitssysteem en de compiler houden updates efficiënt en de basisomvang klein

Nadelen

Er zijn ook punten om rekening mee te houden:

• Kleiner ecosysteem dan React: er zijn minder pakketten en kant-en-klare oplossingen

• Minder vacatures dan React: dat speelt mee als je developers zoekt of zelf een baan zoekt

• Geen grote geldschieter: er staat geen techbedrijf achter, al draait het project al jaren stabiel op sponsors en community

• Twee API-stijlen: in een team kan dat leiden tot verschillende schrijfwijzen als je geen afspraken maakt

• Grote versie-overstappen: de stap van Vue 2 naar Vue 3 vroeg bij veel projecten flink wat werk

Vue.js vs React en Angular

Vue.js wordt vaak vergeleken met React en Angular. Alle drie zijn geschikt voor moderne webapplicaties, maar hun aanpak verschilt flink.

React richt zich puur op de interface. Voor routing en state management kies je zelf pakketten. Angular is juist een compleet pakket met alles ingebouwd, maar vraagt ook meer leertijd. Vue zit daartussenin: lichter dan Angular, met meer officiële keuzes dan React.

Korte geschiedenis van Vue.js

Evan You publiceerde de eerste versie van Vue.js in februari 2014. Het begon als zijproject en groeide uit tot een van de populairste JavaScript frameworks ter wereld.

In 2016 verscheen Vue 2, met onder meer een virtual DOM en ondersteuning voor server-side rendering. Die versie maakte Vue echt groot.

Vue 3 kwam uit in september 2020. Die versie bracht de Composition API, een herschreven reactiviteitssysteem en betere ondersteuning voor TypeScript. Sinds februari 2022 is Vue 3 de standaardversie. Vue 2 bereikte op 31 december 2023 het einde van zijn officiële ondersteuning.

Een framework dat met je project meegroeit

Vue.js is een toegankelijk en flexibel framework voor het bouwen van gebruikersinterfaces. Componenten, reactiviteit en templates vormen de basis. Je kunt klein beginnen met één component en doorgroeien naar een volledige applicatie met routing, state management en server-side rendering.

Zoek je een framework dat snel te leren is en toch stevig genoeg voor grote projecten, dan is Vue een sterke kandidaat. Wil je het grootste ecosysteem, dan ligt React meer voor de hand. Wil je alles ingebouwd en strak gestructureerd, dan past Angular beter.