Definitie: Vue.js is een open source JavaScript-framework voor het bouwen van gebruikersinterfaces en single page applications. Het is gemaakt door Evan You, werd in 2014 gelanceerd en staat bekend als een progressief framework dat je stap voor stap kunt inzetten.
In het kort
- Vue (uitgesproken als “view”) wordt gebruikt voor de voorkant van webapplicaties: schermen, formulieren en interactieve onderdelen.
- Versie 2.0 verscheen in september 2016 en versie 3.0 in september 2020; Vue valt onder de MIT-licentie.
- Vue werkt met componenten waarin HTML, JavaScript en CSS samen in één bestand staan.
- Bij de keuze tussen Vue en React noemt men Vue vaak makkelijker te leren, terwijl React een groter ecosysteem en een grotere vacaturemarkt heeft.
Wat is Vue.js?
Vue.js is een JavaScript-framework waarmee ontwikkelaars de interface van een webapplicatie bouwen: alles wat de gebruiker ziet en waarmee hij werkt. Volgens Wikipedia begon Evan You in 2013 aan het project, nadat hij met AngularJS had gewerkt en daaruit wilde halen wat hij het meest waardeerde, in een lichtere vorm. In februari 2014 werd Vue publiek aangekondigd.
Het woord progressief betekent dat je Vue klein kunt inzetten, bijvoorbeeld om één interactief onderdeel op een bestaande pagina te verbeteren, of groot, als basis voor een complete single page application. Microsoft beschrijft het in zijn documentatie precies zo: van eenvoudige widgets tot complexe SPA’s.
Hoe werkt Vue?
Vue werkt met componenten. Een component is een herbruikbaar stuk interface, zoals een knop, een tabel of een compleet formulier. In een zogenaamd single file component staan de opmaak (HTML), het gedrag (JavaScript) en de vormgeving (CSS) bij elkaar, wat de code overzichtelijk houdt.
Daarnaast is Vue reactief: verandert een gegeven, dan werkt Vue automatisch de onderdelen van het scherm bij die dat gegeven tonen. Vue 3 voegde de Composition API toe, een manier om logica in componenten te ordenen en te hergebruiken.
Het ecosysteem rond Vue
| Onderdeel | Functie |
|---|---|
| Vue Router | Navigatie tussen pagina’s binnen de applicatie |
| Pinia | Beheer van gedeelde gegevens tussen componenten |
| Vite | Snelle ontwikkel- en buildtool, ook van Evan You |
| Nuxt | Metaframework voor rendering aan de serverkant en routering |
Een nieuw project start je volgens Microsoft met npm create vue@latest, dat op Vite is gebaseerd.
Vue vs React: wat is het verschil?
| Vue.js | React | |
|---|---|---|
| Beheer | Onafhankelijk communityproject rond Evan You | Meta |
| Type | Progressief framework | Bibliotheek voor interfaces |
| Leercurve | Vaak als eenvoudiger gezien | Iets steiler, veel keuzes zelf maken |
| Officiële tools | Router, Pinia en Vite vanuit het project | Tools vooral uit de community |
| Metaframework | Nuxt | Next.js |
| Vacatures en ecosysteem | Kleiner | Groter |
Kern-IT noemt Vue het eenvoudigst om op te pakken en adviseert React als langdurige consistentie en de beschikbaarheid van ontwikkelaars zwaar wegen. Beide zijn geschikt voor professionele webapplicaties; de keuze hangt vaak af van wat het team al kent.
Voordelen en nadelen van Vue
Voordelen
- Laagdrempelig. Wie HTML, CSS en JavaScript kent, kan snel aan de slag.
- Klein en snel. Starring Jane noemt een omvang van ongeveer 18 tot 21 KB voor het framework zelf.
- Stap voor stap inzetbaar. Je kunt Vue toevoegen aan een bestaande pagina zonder alles om te bouwen.
- Officiële tools. Routering en gegevensbeheer komen uit het project zelf, wat keuzes eenvoudiger maakt.
Nadelen
- Kleinere markt. Er zijn minder Vue-ontwikkelaars en kant-en-klare componenten beschikbaar dan bij React.
- Overstap tussen versies. De stap van Vue 2 naar Vue 3 vroeg bij bestaande projecten aanpassingen.
- Alleen de voorkant. Voor opslag, rechten en koppelingen heb je altijd nog een backend nodig.
Vue en de backend
Vue regelt wat er in de browser gebeurt. De gegevens, de logica achter de schermen en de beveiliging zitten op de server, in een backend die bijvoorbeeld in PHP met Laravel of in Node.js is gebouwd. De twee praten met elkaar via een API. Met Nuxt kan Vue ook pagina’s op de server opbouwen, wat helpt bij laadsnelheid en vindbaarheid.
Wie gebruiken Vue?
Volgens Kern-IT gebruiken onder meer Alibaba, Xiaomi, GitLab, Nintendo, Grammarly en Adobe Vue. Een Nederlands blog van Computer Creatief noemde in 2019 ook mijn.overheid.nl als voorbeeld.
Wat betekent dit voor jouw project?
Voor jou als opdrachtgever is de keuze tussen Vue en React minder belangrijk dan de vraag wat de applicatie moet doen. Ik wil vooraf duidelijk hebben wat we met een eerste versie bedoelen: wie gaat het gebruiken, en welke taak moet die persoon als eerste kunnen afronden? Daarna kies je techniek die breed bekend en goed gedocumenteerd is, zodat je niet afhankelijk wordt van één ontwikkelaar.
Vraag? Stuur me voor wie het is, wat er nu gebeurt en wat de eerste versie moet oplossen. Dan bepalen we samen de logische eerste stap. Lees ook meer over een webapplicatie bouwen.
Veelgestelde vragen over Vue.js
Wat is Vue.js?
Vue.js is een open source JavaScript-framework voor het bouwen van gebruikersinterfaces en single page applications. Het is gemaakt door Evan You en in 2014 gelanceerd.
Wat is het verschil tussen Vue en React?
Vue is een progressief framework met officiële tools voor routering en gegevensbeheer, en wordt vaak als makkelijker te leren gezien. React is een bibliotheek van Meta met een groter ecosysteem, waarbij meer keuzes bij de ontwikkelaar liggen.
Is Vue.js gratis?
Ja. Vue.js is open source en valt onder de MIT-licentie, waardoor je het gratis kunt gebruiken, ook in commerciële projecten.
Verwante termen
TypeScript · Laravel · Webapplicatie · Progressive web app · Backend · Broncode
← Terug naar de kennisbank