Wat is Nuxt en hoe begin je ermee?

Als je nog niet weet wat een framework precies is of hoe frontend, backend en full-stack verschillen, lees dan eerst de pagina met de populairste frameworks. Hier begin je direct met Nuxt. Nuxt is een full-stack framework dat bovenop Vue werkt. Het zorgt voor de pagina's die de bezoeker ziet, het adressysteem en de server-kant van je site. In deze pagina leer je hoe je een eerste project opzet en welke onderdelen je nodig hebt.

Waarom kies je voor Nuxt?

NuxtLabs maakte Nuxt. Het verscheen in 2016. Nuxt is het Vue-broertje van Next.js. Next.js bouwt op React, Nuxt bouwt op Vue. Dat maakt Nuxt vooral interessant als je Vue al een beetje kent. Lees de Vue-pagina als je die basis wilt opfrissen.

Denk aan een bouwpakket van een bouwmarkt. Vue is de losse steen, Nuxt is de kant-en-klare bouwset met fundering, dak en leidingen. Je bouwt sneller omdat de basis al klaarligt.

Wat is server-side rendering?

Server-side rendering (SSR) betekent dat de server de pagina al klaarmaakt voordat de bezoeker hem ziet. Zoekmachines kunnen zo de inhoud direct lezen. Dat is goed voor vindbaarheid.

Nuxt doet veel automatisch. Je maakt een bestand aan in de map pages en het wordt een pagina met een adres. Je hoeft zelf geen routes op te zoeken of in te stellen.

Hoe zet je een eerste Nuxt-project op?

Je hebt Node.js nodig. Installeer het via de officiële Node.js-website. Maak daarna een project aan:

Terminal

npm create nuxt@latest my-app
cd my-app
npm install
npm run dev

Wat doen deze commando's?

• npm create nuxt@latest my-app start de officiële opzetter en maakt de map my-app. Het stelt je een paar vragen. Voor een eerste project mag je de standaardopties kiezen.
• cd my-app zet je in de nieuwe map.
• npm install downloadt de benodigde pakketten. Soms doet de opzetter dit al voor je.
• npm run dev start de ontwikkelserver op je eigen computer.

Open daarna http://localhost:3000 in je browser. Je ziet de startpagina van je Nuxt-project.

Lees de officiële gids

Nuxt werkt met een eigen opzetter die kan veranderen. Check de officiële Nuxt-installatiegids als je stappen anders zijn.

Hoe ziet een Nuxt-project eruit?

Een Nuxt-project bevat ongeveer deze onderdelen:

my-app/
  app.vue             ← het hoofdbestand van je site
  pages/              ← elk bestand hier wordt een pagina met een adres
  components/         ← je herbruikbare componenten
  layouts/            ← de vaste opmaak om je pagina's heen
  public/             ← bestanden zoals plaatjes die ongewijzigd blijven
  nuxt.config.ts      ← instellingen voor Nuxt
  package.json        ← de lijst met pakketten van je project

Het bestand pages/index.vue is de startpagina, met het adres /. Een bestand pages/over-ons.vue krijgt het adres /over-ons. Zo werkt het adressysteem van Nuxt. Dat heet bestandsgebaseerde routing.

Hoe ziet een eerste Nuxt-pagina eruit?

Open pages/index.vue en vervang de inhoud door:

pages/index.vue

<script setup>
const { data: users } = await useFetch(
    'https://jsonplaceholder.typicode.com/users'
)
</script>

<template>
    <main>
        <h1>Onze gebruikers</h1>
        <ul>
            <li v-for="user in users" :key="user.id">{{ user.name }}</li>
        </ul>
    </main>
</template>

Wat gebeurt hier?

• useFetch haalt gegevens op bij een adres. Het is een functie die Nuxt zelf meelevert.
• data: users slaat het resultaat op in een variabele. Die gebruik je daarna in de HTML.
• await zorgt dat de pagina wacht tot de gegevens binnen zijn. Nuxt doet dat op de server voordat de pagina naar de bezoeker gaat.
• v-for herhaalt het lijstitem voor elke gebruiker. Dat ken je al uit de Vue-pagina.
• :key helpt Vue om elk item uniek te herkennen.

Open http://localhost:3000 en je ziet een lijst met namen.

Automatisch importeren

Nuxt importeert veel functies voor je, zoals ref en useFetch. Je hoeft ze dan niet bovenaan je bestand te schrijven. Dat scheelt typewerk, maar het kan verwarrend zijn. Lees in de officiële Nuxt-documentatie hoe dat precies werkt.

Welke kernbegrippen moet je kennen in Nuxt?

• Pages zijn de bestanden in de map pages. Elk bestand is een pagina met een eigen adres.
• Layouts zijn de vaste delen van je site, zoals een menu of voettekst. Ze staan in de map layouts.
• Components zijn de herbruikbare bouwstenen die je in components zet. Nuxt vindt ze zelf terug.
• Data ophalen doe je met useFetch of useAsyncData. Zo haal je gegevens op voordat de pagina getoond wordt.
• Server routes zijn kleine server-functies in de map server/api. Ze maken het mogelijk een eigen API te bouwen zonder een apart project.
• Modules zijn kant-en-klare uitbreidingen, zoals een module voor afbeeldingen of formulieren. Je zet ze aan in nuxt.config.ts.

Wil je alles rustig doorlezen? De officiële Nuxt-documentatie is helder en heeft een uitgebreide gids voor beginners.

Wanneer kies je voor Nuxt?

• Je gebruikt Vue en wil server-side rendering of statische pagina's.
• Je wil een gestructureerd project waarin veel vanzelf goed gaat.
• Je bouwt een contentsite, webwinkel of SaaS-applicatie.
• Je wil een volledige site bouwen zonder een apart backend-project.

Vergelijk Nuxt met Next.js. Beide zijn full-stack en beide zijn gebouwd rond pagina's in mappen. Next.js hoort bij React, Nuxt hoort bij Vue. Wil je React en Vue naast elkaar zien? Kijk dan op de React-pagina en vergelijk die met de Vue-pagina.

Veelgemaakte fout

Staat je pagina niet in de map pages? Dan maakt Nuxt er geen route van. Controleer of het bestand daar staat en of de naam eindigt op .vue.

Wat leer je hierna?

Je weet nu hoe een Nuxt-project is opgebouwd, hoe een pagina werkt en hoe je gegevens ophaalt. Probeer eens een tweede pagina te maken met een eigen adres en een gedeeld menu in een layout. Daarna is het goed om te leren werken met server routes. De officiële Nuxt-documentatie geeft daar duidelijke voorbeelden bij.

Je bouwt nu een complete site met Vue. Dat is een mooie prestatie. Blijf doorgaan!