Blog

Terug

Nuxt.js: een framework voor Vue.js applicaties

hoofdafbeelding van het artikel
  • Nuxt.js
  • JAMstack
  • SSR
  • Vue.js
Leestijd 0 min

Wat is Nuxt.js?

Nuxt.js is een framework dat gebaseerd is op het Vue.js framework. Nuxt.js wordt ook wel het Zwitsers zakmes van alle Vue.js frameworks genoemd. Het maakt het ontwikkelen van Vue.js applicaties en websites eenvoudiger door allerlei lastige configuratie op een slimme manier op te lossen en dat zorgt ervoor dat je je vooral op de ontwikkeling van de app of website kan richten.

Wat kan je met Nuxt.js maken?

Met Nuxt.js kan je verschillende soorten applicaties maken. Je kan bij het aanmaken van een Nuxt applicatie kiezen op welke manier je deze wil uitrollen. Maar het mooie is, je kan dit later nog veranderen door één regel te wijzigen in de configuratie. Er zijn twee zogenaamde rendering modes:

Server Side Rendered

Deze optie is bedoeld voor het bouwen van een Single Page Application (SPA). Een SPA heeft veel voordelen. Je kan bijvoorbeeld hele snappy user interfaces bouwen die heel vlot updaten. Enkele voorbeelden hiervan zijn Gmail, Google Maps, AirBNB, Netflix, Pinterest, Paypal, en nog veel meer bekende bedrijven. Zij gebruiken SPA's om een vloeiende, schaalbare gebruikerservaring op te leveren in hun apps.

Maar de nadelen van een SPA zijn de lange laadtijden (de complete applicatiecode moet worden ingeladen voordat deze werkt) en het feit dat zoekmachines moeite hebben om de applicatie te indexeren. De app bestaan uit een "lege" index pagina die dynamisch wordt gevuld door JavaScript. De app heeft in feit geen inhoud.

Nuxt.js doet iets heel slims. Ze leveren een SPA, maar in plaats van een lege index pagina wordt de hele applicatie vooraf gerenderd en op de server geladen. Hierdoor wordt de laadtijd van elke pagina verbeterd en kunnen zoekmachines makkelijk in inhoud indexeren. Je hebt dan een SPA met de voordelen, maar zonder de nadelen.

Als je overigens wel een "echte" SPA wil zonder server side rendering, dan kan dat ook. Je hebt dan nog steeds voordeel van de handige projectstructuur en andere features.

Statically Generated

Met deze optie gebruik je Nuxt.js als een static site generator, net zoals Gridsome, om JAMstack sites te bouwen. Nuxt.js biedt hierbij veel verschillende mogelijkheden. Zo kan je content uit een headless CMS importeren, maar kan je ook gebruik maken van locale Markdown-bestanden door de @nuxt/content module te gebruiken.

De voordelen van Nuxt.js

Nuxt.js is een fantastisch framework en biedt veel voordelen voor ontwikkelaars. Hier een overzicht van de belangrijkste voordelen.

Een geweldige standaard mappenstructuur

Nuxt.js biedt bij installatie een hele overzichtelijke mappenstructuur die erg behulpzaam is bij het organiseren van alle onderdelen van de applicatie. Deze structuur is geschikt voor kleinere projecten, maar is ook goed schaalbaar voor grote projecten. De mappenstructuur ziet er zo uit:

project
|--.nuxt
|--assets
|--components
|--content
|--dist
|--layouts
|--middleware
|--modules
|--pages
|--plugins
|--static
|--store
|--nuxt.config

Veel beschikbare modules

Nuxt.js wordt actief ontwikkeld en er zijn veel modules beschikbaar die het toevoegen van allerlei functionaliteit heel eenvoudig maakt. Op modules.nuxtjs.org zijn op het moment van schrijven 166 modules beschikbaar in 19 categorieën. Denk hierbij aan modules met de volgende functionaliteit:

  • Koppeling maken met een headless CMS
  • Analytics toevoegen
  • Markdown content
  • Meertaligheid
  • SEO
  • Optimalisatie van afbeeldingen
  • Betaaloplossingen
  • PWA
  • Authenticatie
  • en nog veel meer...

De verschillende rendering modes

Zoals hierboven al beschreven biedt Nuxt.js verschillende manieren om je applicatie uit te rollen. Je kan zowel Single Page Applications opleveren als statisch gegenereerde JAMstack websites.

Automatische codesplitsing

Nuxt.js kan een statische versie van je website genereren met een speciale Webpack-configuratie. Voor elke route (pagina) die statisch wordt gegenereerd, krijgt de route ook een eigen JavaScript-bestand, met alleen de code die nodig is om die route uit te voeren. Dit kan echt helpen bij de snelheid, omdat het de grootte van het JavaScript-bestand klein houdt in verhouding tot de grootte van de volledige applicatie.

Goede documentatie

Nuxt.js en de diverse modules zijn voorzien van goede documentatie en dat helpt enorm bij de ontwikkeling van een een nieuwe applicatie. Ook zijn er veel tutorials beschikbaar, waarbij vooral het YouTube-kanaal van Debbie O'Brien een aanrader is.

Populariteit

Nuxt.js is erg populair onder Vue.js ontwikkelaars en een redelijk grote speler in de JAMstack wereld. Het framework is erg volwassen en wordt actief ontwikkeld. Waar Gridsome (een ander Vue.js framework) bijvoorbeeld nog maar op versie 0.7.x zit, is de meest recent versie van Nuxt.js al 2.15.x. Je hoeft dus niet bang te zijn om te investeren in de verkeerde technologie.

En ook bij grote bedrijven wordt Nuxt.js gebruikt, zoals bij dit bekende modemerk:

Nuxt.js en Corneel

Corneel heeft Nuxt.js gebruikt bij de bouw van de website voor Corneelia Wall Art. Het werken met Nuxt.js is erg goed bevallen en ik hoop het nog vaak te gebruiken bij toekomstige projecten. Nuxt.js wordt een vast onderdeel van mijn gereedschapskist.

Is jouw website of webapplicatie aan vervanging toe?

Dan is Nuxt.js een uitstekende keuze om je toekomstige ontwikkelingen een kickstart te geven!

Neem contact op

Wat houdt je bezig?

Heb jij een interessant project?
En wil je erover praten?

Of je nou een starter bent of een doorgewinterd bedrijf, ik hoor het graag als je een leuke uitdaging voor me hebt.

Marco Verheul
T. 06 2846 1106
E. marco@corneelonline.nl