Wat is Vue.js?

Vue.js is een JavaScript-framework waarmee je de voorkant van een website of applicatie bouwt. Je beschrijft hoe een scherm eruit hoort te zien bij een bepaalde toestand, en Vue houdt het beeld daarna gelijk aan de gegevens erachter.

Evan You bracht het in februari 2014 uit. Hij werkte daarvoor bij Google met Angular en wilde iets lichters met dezelfde kracht: geen compleet bouwpakket dat je hele project overneemt, maar een laag die je ook op één stukje van een bestaande pagina kunt zetten.

Waar Vue vandaan komt

Vue is begonnen als het werk van één persoon en is dat in de kern gebleven. Er zit geen Meta of Google achter, wat een verschil maakt dat je pas merkt als een groot bedrijf van koers verandert.

Versie 2 verscheen in september 2016 en werd de versie waarmee de meeste mensen Vue hebben leren kennen. Versie 3 kwam in september 2020 uit en is op 7 februari 2022 de standaardversie geworden. Op 31 december 2023 stopte de ondersteuning van Vue 2 definitief.

Die laatste datum is de belangrijkste van het rijtje. Draait er ergens nog een Vue 2 project, dan krijgt dat geen beveiligingsfixes meer van het projectteam zelf. Een commerciële partij verkoopt verlengde ondersteuning, maar dat is een tussenoplossing en geen plan.

Het geld komt van sponsors en van bedrijven die het gebruiken. Evan You richtte in 2024 een bedrijf op rond het bouwgereedschap, om dat werk betaald te krijgen in plaats van het van vrijwilligers te laten afhangen.

Wat een framework je uit handen neemt

Zonder framework werk je het scherm zelf bij. Verandert er iets aan de gegevens, dan zoek je in JavaScript het juiste element op en pas je de inhoud aan.

Bij een winkelmandje zijn dat vier handelingen voor één klik: het aantal aanpassen, het regeltotaal herberekenen, het eindbedrag bijwerken en de knop uitschakelen als het mandje leeg is. Vergeet je er één, dan klopt het scherm niet meer.

Bij Vue leg je de relatie één keer vast. Het eindbedrag is de som van de regels, en zodra een regel verandert klopt het bedrag weer. Je schrijft op wat waar is, niet welke stappen er in welke volgorde moeten gebeuren.

Dat is de hele winst, en het is een grote. Het foutgevoelige werk verdwijnt, en wat overblijft is de logica die er echt toe doet.

Hoe reactiviteit werkt

Vue houdt bij welk stukje scherm welke waarde gebruikt. Verandert die waarde, dan wordt alleen dat stukje opnieuw opgebouwd.

De manier waarop dat gebeurt is bij versie 3 veranderd. Vue 2 hing bij het opstarten aan elke eigenschap van je gegevens een lees- en schrijffunctie. Dat werkte, met één beroemd gat: eigenschappen die er bij het opstarten nog niet waren, kende Vue niet. Zette je later een nieuw veld op een object, dan veranderde de waarde wel en het scherm niet.

Daar zijn generaties beginners op vastgelopen, want er komt geen foutmelding. Je ziet in de ontwikkelaarsgereedschappen de juiste waarde staan en op het scherm de oude.

Vue 3 gebruikt een proxy, een omhulsel om je gegevens heen dat elke lees- en schrijfactie opvangt, ook van velden die er nog niet waren. Daarmee is dat hele probleem weg. Het is meteen de reden dat Vue 3 geen oude browsers meer ondersteunt, want een proxy kun je niet nabootsen.

Onder water houdt Vue een schaduwversie van de pagina bij en vergelijkt die bij elke wijziging met de vorige. Alleen de verschillen gaan naar de echte pagina. Dat is sneller dan het hele scherm opnieuw tekenen en trager dan zelf dat ene element aanpassen. Een framework is dus nooit sneller dan handwerk, alleen betrouwbaarder.

Componenten en bestanden met drie delen

Een component is een herbruikbaar blok met zijn eigen opmaak, gedrag en stijl. Een knop, een productkaart, een boekingsformulier.

Vue bewaart zo'n blok in één bestand met de extensie .vue, met daarin drie stukken: de HTML van het sjabloon, de code, en de CSS. Zet je op dat stijlblok het woord scoped, dan geldt de opmaak alleen binnen dat component en lekt hij niet naar de rest van de pagina.

Ik vind dat een van de prettigste kanten van Vue. Alles wat bij één ding hoort staat bij elkaar, dus je hoeft bij een wijziging niet in drie mappen te zoeken.

Gegevens gaan van boven naar beneden via props, en meldingen gaan van beneden naar boven via gebeurtenissen. Een kindcomponent past de gegevens van zijn ouder dus niet zelf aan, maar zegt dat er iets gebeurd is. Die richting lijkt omslachtig tot je een keer hebt gezocht naar de plek waar een waarde stiekem werd overschreven.

Twee manieren om een component te schrijven

Vue kent twee schrijfwijzen, en dat is de grootste bron van verwarring bij oude voorbeelden op internet.

De oude manier deelt een component op in vaste vakken: hier je gegevens, daar je berekende waarden, daaronder je methodes. Overzichtelijk bij een klein component en rommelig bij een groot component, want alles wat bij één functie hoort ligt verspreid over vier vakken.

De nieuwe manier zet alles wat bij één functie hoort bij elkaar in gewone code. Sinds versie 3.2 uit augustus 2021 kan dat in een compacte vorm die de meeste projecten nu gebruiken. Kom je een voorbeeld tegen dat niet aansluit op je eigen code, kijk dan eerst welke van de twee je voor je hebt. Dat scheelt een uur zoeken naar een fout die er niet is.

Directives: de aanwijzingen in je HTML

Directives zijn attributen die met v beginnen en die Vue vertellen wat hij met een element moet doen. Het zijn er een stuk of tien en je gebruikt er in de praktijk vier.

• v-if. Toont een element alleen als een voorwaarde klopt. Klopt hij niet, dan staat het element er echt niet, dus ook niet verborgen in de broncode.
• v-for. Herhaalt een element voor elk item in een lijst. Geef er altijd een key bij met een vast kenmerk van het item.
• v-model. Koppelt een invoerveld aan een waarde in twee richtingen. Typt de bezoeker iets, dan verandert de waarde meteen mee.
• v-html. Zet ruwe HTML in een element. Doe dit nooit met tekst die van een bezoeker komt, want dan kan iemand er code in stoppen die bij je andere bezoekers draait.

Die key bij v-for is het punt waar het het vaakst misgaat. Laat je hem weg of gebruik je het volgnummer, dan hergebruikt Vue bij het sorteren de verkeerde elementen. Het klassieke symptoom is een lijst met aanvinkvakjes waarbij na sorteren de vinkjes bij de verkeerde regels staan.

Het gereedschap eromheen

Een Vue-project bestaat uit meer dan Vue. Je hebt iets nodig dat je bestanden vertaalt naar iets dat een browser begrijpt, en dat is Vite geworden, gemaakt door dezelfde Evan You.

Vite is de reden dat Vue-ontwikkelaars tegenwoordig een zichtbaar prettiger leven hebben. Het opstarten duurt een seconde in plaats van een halve minuut, en een wijziging staat direct op je scherm zonder dat de pagina herlaadt. De oudere gereedschapskist Vue CLI wordt alleen nog onderhouden en is voor nieuwe projecten niet meer de aanbevolen route.

Verder kom je twee onderdelen vrijwel altijd tegen. Vue Router koppelt adressen aan schermen zonder dat de pagina opnieuw laadt. Pinia bewaart gegevens die meerdere componenten nodig hebben, zoals wie er is ingelogd en wat er in het mandje zit. Pinia verving Vuex, dat je in oudere artikelen nog tegenkomt en dat alleen nog onderhoud krijgt.

Voor het zoeken naar fouten is er een browseruitbreiding waarmee je per component ziet welke waarden erin zitten. Bij een scherm dat zich vreemd gedraagt is dat vaak sneller dan wat dan ook.

Nuxt en pagina's die op de server worden opgebouwd

Een gewoon Vue-project stuurt een vrijwel lege pagina naar de browser en vult die daarna met JavaScript. Prima voor een scherm achter een inlog, slecht voor een pagina die gevonden moet worden.

Nuxt lost dat op door de pagina op de server op te bouwen en als kant-en-klare HTML te versturen. De bezoeker ziet meteen tekst, en Vue neemt het daarna over voor de interactie. Nuxt 3 verscheen in november 2022 en is voor nieuwe projecten de gebruikelijke keuze.

Je kunt ook kiezen om alle pagina's vooraf te laten uitrekenen en als losse bestanden weg te schrijven. Dan heb je de snelheid van een statische site met het gemak van componenten, en kun je het resultaat op elke gewone hosting neerzetten.

Die twee smaken lijken op elkaar en hebben een heel verschillend gevolg voor je hosting. Bij het eerste heb je een draaiend proces nodig, bij het tweede een map met bestanden.

Wat het betekent voor je vindbaarheid

Google kan JavaScript uitvoeren en doet dat ook. Het gebeurt alleen in een tweede ronde, nadat de pagina is opgehaald, en die ronde is niet gegarandeerd even snel.

Het gevolg zie je bij sites die alles in de browser opbouwen: pagina's die traag in de index komen of er half in staan. Hoe dat proces werkt staat bij indexering door zoekmachines.

Voor andere partijen die je pagina lezen is er geen tweede ronde. Deelknoppen op sociale netwerken, chatprogramma's die een voorbeeldkaartje tonen en de meeste crawlers van AI-diensten lezen alleen wat er in de eerste HTML staat. Is dat leeg, dan is je voorbeeldkaartje leeg.

Mijn regel is simpel. Moet een pagina gevonden worden, dan hoort de tekst in de eerste HTML te staan. Dat betekent server-side opbouwen of vooraf uitrekenen, of gewoon geen framework gebruiken voor dat deel van je site.

Wat er in de praktijk misgaat

De fout die iedereen één keer maakt zit in de router. Zet je die in de nette modus zonder hekje in het adres, dan werkt klikken prima en geeft vernieuwen op een subpagina een 404.

Dat komt doordat de webserver dat pad niet kent. Hij zoekt een map die er niet is, terwijl het adres alleen in de browser bestaat.

Het tweede probleem hoort bij server-side opbouwen. Bouwt de server iets anders op dan de browser, bijvoorbeeld doordat er een datum of een willekeurig getal in staat, dan klopt de overname niet. Je ziet dan tekst die kort flikkert of van plaats verandert, met een waarschuwing in de console.

Het derde is toegankelijkheid. Bij een gewone site weet een schermlezer dat er een nieuwe pagina is geladen. Bij een scherm dat zichzelf vervangt gebeurt er niets: de titel blijft staan en de aandacht blijft hangen waar hij was. Je moet dat zelf regelen, en dat wordt zelden gedaan. Wat er verder bij de voorkant komt kijken staat bij front-end ontwikkeling.

Vue naast React en Angular

De drie doen hetzelfde en verschillen vooral in hoeveel ze voor je invullen: Angular het meest, React het minst, Vue ertussenin. React heeft veruit de meeste vacatures en uitbreidingen, Angular komt vooral bij grote organisaties voor, en Vue heeft de naam het makkelijkst te leren te zijn en de beste documentatie te hebben. Een uitgebreidere vergelijking staat bij webontwikkelingsbibliotheken, en ReactJS heeft een eigen artikel.

Voor wie moet kiezen weegt in Nederland iets anders zwaarder dan de techniek: je vindt hier makkelijker iemand die React kent. Vue is populairder in Azië en bij PHP-ontwikkelaars, doordat Laravel het jarenlang standaard meeleverde.

Waar je een Vue-project neerzet

Een Vue-project dat je vooraf uitrekent, levert een map met HTML, CSS, JavaScript en afbeeldingen op. Die kun je op elke webhosting zetten, ook op het goedkoopste gedeelde pakket, want er hoeft niets te draaien.

Wil je server-side opbouwen, dan heb je een omgeving nodig waar Node.js blijft draaien. Dat kan niet op gewone Nederlandse hosting, want die is ingericht op PHP. Je hebt dan een eigen server nodig, een containeromgeving of een platform dat dat voor je regelt.

Let bij die keuze op waar de server staat. Verwerk je persoonsgegevens van Nederlandse bezoekers, dan is een server binnen de Europese Unie de eenvoudigste route en heb je met je hostingpartij een verwerkersovereenkomst nodig.

Bibliotheken van buiten en de AVG

Je kunt Vue en alles eromheen vanaf een extern netwerk laden in plaats van vanaf je eigen server. Dat scheelt een bouwstap en het kost je iets anders.

Elke bezoeker vraagt dat bestand namelijk zelf op bij die partij, en geeft daarbij zijn IP-adres af. Een Duitse rechtbank in München oordeelde in januari 2022 dat een website die op die manier lettertypes van Google inlaadde, in strijd handelde met de AVG omdat het IP-adres zonder toestemming werd doorgegeven.

Die uitspraak ging over lettertypes en het mechanisme is bij elk extern script hetzelfde. Zet je bibliotheken dus op je eigen server. Het is één regel in je bouwconfiguratie en het haalt een discussie weg die je niet wilt voeren.

Wanneer je Vue niet nodig hebt

Voor een gewone bedrijfswebsite heb je geen framework nodig. Dit is het deel dat in de meeste artikelen over Vue ontbreekt, en het geldt voor verreweg de meeste sites die ik tegenkom.

Een site met een homepage, een dienstenpagina, een blog en een contactformulier is een verzameling documenten. Die haal je op, je leest ze, je gaat verder. Er is geen toestand die je moet bijhouden, dus er valt niets te winnen met een framework dat toestand bijhoudt.

Wat je ervoor terugkrijgt is een langere laadtijd en een pagina die zonder JavaScript leeg blijft. Voor iets dat vooral informatie moet overbrengen is dat een slechte ruil.

Draait je site op een contentmanagementsysteem als WordPress, dan komt daar nog iets bij. Je klant wil zijn teksten zelf kunnen aanpassen. Zodra de tekst in een component staat, kan dat niet meer zonder ontwikkelaar.

Wil je alleen op één plek wat interactie, bijvoorbeeld een prijsberekening of een filter, dan kun je Vue op dat ene stukje pagina zetten en de rest laten zoals hij is. Dat is precies waarvoor Vue oorspronkelijk bedoeld was en het wordt te weinig gedaan.

Wanneer het wel loont

Bij een scherm waar veel gebeurt zonder dat de pagina herlaadt. Een klantportaal, een planbord, een dashboard, een configurator met tientallen keuzes die elkaar beïnvloeden.

Bij onderdelen die op veel plekken terugkomen en overal gelijk moeten blijven. Componenten zijn daar precies voor bedoeld, en de winst groeit met het aantal schermen.

En bij een team dat het al kent. Bekende techniek verslaat in de praktijk bijna altijd betere techniek.

Wat een klein bedrijf hier moet weten

De bouw is niet het probleem, het onderhoud is het probleem. Een Vue-project heeft een bouwstap en een lijst met pakketten die veroudert, en die pakketten hebben elk hun eigen tempo.

Laat je zo'n project twee jaar liggen, dan draait de bouwstap niet meer op een moderne machine. Dan moet iemand eerst een halve dag versies bijwerken voordat hij die ene tekst kan wijzigen. Bij een site zonder bouwstap komt dat probleem niet voor.

Vraag daarom bij een offerte drie dingen. Wie beheert de code, wat kost een jaar onderhoud, en kan een andere partij het overnemen. Die laatste vraag is de belangrijkste en wordt bijna nooit gesteld.

Als je het wilt leren

Leer eerst JavaScript zelf. Wie bij een framework begint, leert dat framework en niet de taal, en loopt vast op het moment dat hij iets moet doen wat er niet in zit.

Begin daarna bij de officiële documentatie op de site van Vue. Die heeft een interactieve inleiding waarin je in de browser meetypt, en hij is beter dan de meeste cursussen die erover verkocht worden.

Let op de versie van wat je leest. Alles van voor 2022 gaat waarschijnlijk over Vue 2 en klopt op onderdelen niet meer. Staat er ergens Vuex in plaats van Pinia, dan weet je genoeg.

Veelgestelde vragen over Vue.js

Is Vue.js een programmeertaal?

Nee. Vue.js is een framework dat in JavaScript is geschreven en dat je met JavaScript gebruikt. De taal die je leert is JavaScript, Vue is de manier waarop je die taal voor schermen inzet.

Is Vue.js gratis?

Ja. Vue is open source onder de MIT-licentie, wat betekent dat je het vrij mag gebruiken, ook commercieel. Het project draait op sponsorbijdragen van bedrijven en particulieren.

Wat is het verschil tussen Vue 2 en Vue 3?

Vue 3 gebruikt een andere manier om veranderingen bij te houden, waardoor het oude gedoe met velden die niet vanzelf meebewegen verdwenen is. Daarnaast kwam er een tweede schrijfwijze voor componenten bij en werd het geheel sneller en kleiner.

Voor de praktijk telt vooral dat Vue 2 op 31 december 2023 zijn laatste update kreeg. Draait er nog iets op versie 2, dan is bijwerken geen luxe.

Is Vue.js moeilijk te leren?

Van de drie grote frameworks is Vue de makkelijkste om mee te beginnen. Ken je HTML, CSS en de basis van JavaScript, dan kun je in een middag een werkend scherm bouwen. De diepte komt later, bij routes, gedeelde gegevens en de bouwstap.

Heb ik Vue.js nodig voor een WordPress-website?

Nee. WordPress bouwt zijn pagina's op de server op en heeft daar geen framework voor nodig. De blokkeneditor in WordPress gebruikt overigens React en geen Vue, dus ook daar levert Vue je niets op.

Wil je één interactief onderdeel op een WordPress-pagina, bijvoorbeeld een rekenmodule, dan kun je Vue op dat ene blok zetten zonder de rest van de site aan te raken.

Is Vue.js goed voor SEO?

Dat hangt volledig af van waar de pagina wordt opgebouwd. Gebeurt dat in de browser, dan krijgt Google eerst een lege pagina en moet het in een tweede ronde terugkomen. Wordt de pagina op de server opgebouwd of vooraf uitgerekend, dan is er voor een zoekmachine geen verschil met een gewone website.

Wat is het verschil tussen Vue en Nuxt?

Vue is het framework, Nuxt is een laag eromheen die regelt wat je bij een echte website nodig hebt: pagina's op basis van je mappenstructuur, opbouwen op de server en meta-informatie per pagina. Je kunt Vue zonder Nuxt gebruiken, andersom niet.

Wat is Pinia en waarom niet Vuex?

Pinia bewaart gegevens die meerdere componenten nodig hebben, zoals de ingelogde gebruiker of de inhoud van een winkelmandje. Het is de opvolger van Vuex en sinds Vue 3 de aanbevolen keuze. Vuex werkt nog en krijgt alleen onderhoud, dus begin er niet meer mee.

Kan ik Vue.js op gewone webhosting draaien?

Als je je project vooraf uitrekent tot losse bestanden, dan kan dat op elk hostingpakket. Wil je de pagina's op de server laten opbouwen, dan heb je een omgeving nodig waar een Node-proces blijft draaien, en dat biedt gewone gedeelde hosting niet.

Waarom werkt mijn Vue-site wel bij klikken en niet bij vernieuwen?

Dan staat je router in de modus zonder hekje in het adres en weet je webserver niet wat hij met dat pad moet. Je lost het op door de server alle adressen naar je hoofdbestand te laten wijzen. Op Apache doe je dat met een herschrijfregel in .htaccess, op nginx met een try_files regel.

Waarom verandert mijn scherm niet terwijl de waarde wel klopt?

Bij Vue 2 komt dat vrijwel altijd doordat je een eigenschap hebt toegevoegd die er bij het opstarten nog niet was. Vue houdt die dan niet in de gaten. Bij Vue 3 is dat probleem weg. Zie je het daar toch, kijk dan of je de reactieve verpakking hebt weggehaald door het object uit elkaar te trekken.

Wat kost het om iets in Vue te laten bouwen?

Dat hangt af van wat het moet doen, en de eerste werkende versie is meestal het goedkoopste deel. De rekening loopt op bij de randgevallen: foutmeldingen, lege lijsten, trage verbindingen, mensen die twee keer op verzenden drukken. Bij elk scherm is dat het grootste deel van het werk, en bij een demonstratie valt het niet op.

Kan ik later van Vue naar iets anders overstappen?

Dat is een herbouw van de voorkant en geen omzetting. Je gegevens en je achterkant blijven staan, de schermen schrijf je opnieuw. Kies bij de start dus iets waar je in jouw omgeving mensen voor kunt vinden.

Is Vue.js aan het uitsterven?

Nee. Er verschijnen nieuwe versies, het gereedschap eromheen wordt actief doorontwikkeld en er is een bedrijf opgericht om dat werk te betalen. Wat wel klopt is dat React in vacatures veel vaker voorkomt, en dat is voor een Nederlands bedrijf een reëler argument dan welk technisch verschil ook.