Je website maken met Vue.js en Nuxt!

Komt het aan op het maken van websites, dan kiezen de meeste mensen bijna automatisch voor WordPress. Maar vandaag de dag is dat zeker niet meer je enige optie. Zo schreven we al eens over de Jamstack. Nu hebben de ontwikkelingen niet stilgestaan. Websites die puur zijn gebouwd met JavaScript-frameworks, zijn inmiddels de normaalste zaak van de wereld. Graag stel ik je daarom voor aan het populaire framework Vue.js.

Je website maken met Vue.js en Nuxt!

Deel 2: je website uitrollen
Dit deel is een introductie tot Vue.js en Nuxt. Website gemaakt? In het tweede deel lees je alles over het uitrollen van je applicatie.

Bouw je een website met Vue, dan gaat dat iets anders dan je gewend bent van bijvoorbeeld WordPress. In plaats van Vue installeren en het vervolgens aanvullen met thema’s, plugins en content, ben je zelf verantwoordelijk voor de hele opzet van je site. Je zult dus ook echt code moeten schrijven en komt niet weg met alleen maar rondklikken. Wellicht heb je al eens een WordPress-thema gemaakt. In dat geval ken je waarschijnlijk de basisbeginselen van HTML en CSS. In dit blog zullen we zelf een hele simpele website bouwen, waarbij die kennis wel van pas komt.

Waarom Vue?

Vue is een JavaScript-framework dat wordt gebruikt voor de front-end van je website. De front-end wil zeggen: de voorkant. Ofwel alles wat naar de gebruiker wordt gestuurd. JavaScript als taal is dan ook de enige logische keuze, want alle browsers kunnen scripts in deze taal uitvoeren. PHP, waar WordPress gebruik van maakt, gaat er dus niet in. Bovendien doet WordPress veel taken aan de achterkant: de back-end. Vue houdt zich hier helemaal niet mee bezig; je hebt dus in principe ook geen server nodig om er gebruik van te maken. Het is overigens niet ongewoon dat moderne WordPress-thema’s ook van Vue gebruikmaken in de front-end.

Hoewel de stap naar het maken van je website met Vue misschien wat groter is, biedt het ook veel voordelen. Zo kan een Vue-site makkelijk een stuk sneller reageren dan een WordPress-site. Zeker als je kiest om je site statisch te bouwen (meer daarover in deel 2). Omdat sites van Vue niet echt een back-end hebben, vermijd je automatisch ook veel beveiligingsproblemen. Ze zijn vaak niet afhankelijk van een database. Het is mede daarom veel makkelijker om je site eerst op je lokale computer te bouwen, voordat je het op een webhostingpakket plaatst.

De voordelen van Vue.js gebruiken.

Aangevuld door Nuxt

Nu is Vue op zichzelf nog niet voldoende om je website volledig te laten draaien. Het Vue-framework werkt namelijk met zogeheten componenten. Een component kun je zien als onderdeel van een webpagina. Dit alleen is niet genoeg om een website op te zetten. Er moet immers een server zijn die verzoeken beantwoordt. Ook de webpagina waar de componenten worden gebruikt, moet gemaakt worden. En misschien moet er nog wat (dynamische) content op je site worden ingeladen.

Om van een verzameling aan Vue-componenten echt een volwaardige website te maken, kan Nuxt worden ingezet. Nuxt wordt wel eens een meta framework genoemd, omdat het eigenlijk een framework is voor Vue – en dat is op zichzelf al een framework! Buiten dat Nuxt het mogelijk maakt om pure Vue-code te schrijven voor volledige websites, doet het meer dan alleen dat. Het biedt ontwikkelaars handige handvaten voor het bouwen van websites. Ook heeft het ondersteuning voor plugins en andere build tools.

Nuxt regelt daarnaast automatisch Server Side Rendering of SSR. Een traditioneel probleem met websites die met JavaScript zijn gemaakt, is namelijk dat alles van de website aan de front-end wordt gerenderd. Dat wil zeggen: de server stuurt een lege pagina op en deze wordt aan de kant van de gebruiker “in elkaar gezet”. Dat is vaak slecht voor de prestaties van je website, maar bijvoorbeeld ook voor je vindbaarheid in Google. Bovendien is dat een groot nadeel in vergelijking met technologieën als WordPress. Nuxt lost dit probleem dus op, door alvast aan de kant van de server te doen, wat anders in de browser van de bezoeker zou moeten gebeuren.

Aan de slag

Laten we dan eens aan de slag gaan om een site op te zetten met Vue en Nuxt! Enige basiskennis met de command line is vereist om het volgende goed te kunnen volgen. Ook moet Node.js (v10.19+) geïnstalleerd zijn samen met NPM (v6.14+). Ik ga verder niet in op het installeren van die twee pakketten. Vaak zijn ze al standaard aanwezig en ook bestaan er veel handleidingen om dat gemakkelijk zelf te doen. We gaan als volgt te werk:

  • Pak je command line erbij.
  • Eerst maken we een nieuwe map met mkdir mijn-blog en zorgen we dat we ons in die map bevinden met cd mijn-blog.
  • We maken een nieuw NPM-project aan door npm init te draaien en de instructies op het scherm te volgen.
  • Installeer vervolgens Nuxt met npm install nuxt.

Voeg deze items toe aan package.json, zodat je scripts er zo uit komt te zien:

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}
  • Maak het bestand nuxt.config.js aan (touch nuxt.config.js) en vul het voor nu nog even met de regel export default {}.

Bekend met Git en gebruik je dat graag?

Geen probleem, dat kan zeker! Voeg in dat geval wel node_modules, .nuxt en dist toe aan je .gitignore-bestand.

Leer meer over Git →

Maak je website

Op dit punt hebben we de vereiste stappen doorlopen. Nu kennen we echt aan de slag met het maken van onze website. Hieronder geef ik je een voorbeeld van een heel simpel blog. Het is bedoeld om je een idee te geven. Ga je zelf aan de slag, dan kun je beter de officiële documentatie van Vue.js en Nuxt gebruiken. Er is immers veel te veel functionaliteit om in één blog te verwerken.

Maak eerst drie mappen aan:

  • assets | Hier bewaar je de statische bestanden, zoals CSS.
  • components | Herbruikbare componenten sla je hier op, zoals een knop, menu of footer.
  • pages | In deze map staan ook componenten, met als belangrijk verschil dat deze componenten in pagina’s worden omgezet. Ze zijn dus benaderbaar via een browser.

Vervolgens maak je een herbruikbare header door in de components-map een bestand genaamd Header.vue te maken en te vullen:

<template>
    <header>
        <h1>Marks blog</h1>
    </header>
</template>

Dan voeg je in pages/index.vue je voorpagina toe:

<template>
    <div>
        <Header />
        <p>
            Dit is de homepagina van mijn blog. Hieronder zie je wat artikelen.
        </p>
        <h2>Vanaf nu met Vue.js</h2>
        <p>Vue is steeds populairder. Daarom is mijn site vanaf nu gemaakt met Vue.js.</p>
        <h2>Ik host mijn site bij Antagonist</h2>
        <p>Die bieden immers webhosting aan van goede kwaliteit, óók voor hypermoderne Vue-sites!</p>
    </div>
</template>

Voeg nu nog wat kleur toe met CSS in assets/site.css:

body {
    background-color: #a80000;
    color: white;
}

Ten slotte pas je de instellingen aan in nuxt.config.js, zodat alles juist wordt geladen:

export default {
    components: true,  // vind componenten zoals de header automatisch
    css: [
        '@/assets/site.css',  // gebruik deze CSS overal
    ],
}

We hebben inmiddels iets moois gebouwd, maar hoe zien we het resultaat? Voer op je command line npm run dev uit om lokaal een server te starten. Tik in je browser vervolgens localhost:3000 in en je ziet jouw creatie! Het mag duidelijk zijn dat dit voorbeeld natuurlijk wel heel minimalistisch is. Zo zou ik voor mijn artikelen aparte pagina’s kunnen maken. Het lijstje met artikelen zou ook uit herbruikbare componenten moeten bestaan. Daarnaast zouden de artikelen dynamisch kunnen worden ingeladen, zelfs van een andere bron.

Probeer het uit

Hopelijk heeft dit artikel je wat inzicht heeft gegeven in de wereld van één van de meest populaire JavaScript-frameworks. Vergeet je site na het bouwen niet op een webhostingpakket te zetten, zodat de hele wereld er van kan genieten. Hoe je het uitrollen van je applicatie precies aanpakt, lees je in het tweede deel. Succes en zie je daar!

P.S. Blijf op de hoogte en volg ons via Facebook, Twitter, Instagram, e-mail en RSS. Heb je vragen, tips of opmerkingen? Laat het achter als reactie. Vond je het artikel nuttig? Deel het dan met anderen!

Deel App Tweet Mail Deel

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.