Directus Nuxt blog setup

Directus Nuxt blog setup

Sjoerd 30 januari 2026

Post over de bouw van een volledig werkende blog applicatie met Directus als headless CMS en Nuxt als frontend framework.

Overzicht

Vandaag hebben we een volledig werkende blog applicatie gebouwd met Directus als headless CMS en Nuxt als frontend framework.

Directus Backend Setup

Data Model

Drie collections aangemaakt:

Blogposts

  • title (String) - Titel van de post
  • slug (String) - URL-vriendelijke identifier
  • content (Markdown) - Volledige content
  • excerpt (Textarea) - Korte samenvatting
  • featured_image (Image) - Hoofdafbeelding
  • author (Many-to-One → authors)
  • categories (Many-to-Many → categories)
  • System fields: status, date_created, date_updated, user_created, user_updated

Authors

  • name (String) - Naam auteur
  • bio (Textarea) - Korte biografie
  • avatar (Image) - Profielfoto
  • email (String) - Email adres

Categories

  • name (String) - Categorie naam
  • slug (String) - URL-vriendelijke identifier

Configuratie

  • Public permissions: Read toegang voor Blogposts, authors en categories
  • CORS: Enabled voor https://desktoptraveller.nl

Nuxt Frontend Setup

Installatie

  • Locatie: /var/www/sites/desktoptraveller.nl-web
  • URL: https://desktoptraveller.nl
  • Systemd service: nuxt-desktoptraveller.service
  • Productie mode: Node.js server op poort 3000

Technische Stack

  • Nuxt 4.3.0 - Vue.js framework
  • nuxt-directus 5.7.0 - Directus integratie
  • Tailwind CSS 6.14.0 - Styling framework
  • marked - Markdown rendering

Project Structuur

desktoptraveller.nl-web/
├── app.vue                 # Root component
├── pages/
│   ├── index.vue          # Homepage met blog overzicht
│   ├── blog/
│   │   └── [slug].vue     # Blog detail pagina
│   └── test.vue           # Test pagina
├── components/
│   └── BlogCard.vue       # Herbruikbare blog card
├── assets/
│   └── css/
│       └── main.css       # Custom CSS en fonts
├── public/
│   └── fonts/             # GAP Zuid VG en GAP Mono fonts
└── nuxt.config.ts         # Nuxt configuratie

Features

  • Homepage: Grid layout met blog posts
  • Detail pagina: Volledige post met featured image, markdown content, auteur info en categorieën
  • Herbruikbare components: BlogCard component voor consistent design
  • Custom fonts: GAP Zuid VG (regulier) en GAP Mono (code blocks)
  • Responsive design: Werkt op mobiel, tablet en desktop
  • Markdown rendering: Met marked library voor professionele opmaak

voorjongnederland.nl Herstel

Probleem

De Drupal site was verwijderd, alleen een backup met verse installatie bleef over.

Oplossing

  • Database radio_voorjongnederland gekoppeld (bevatte oude content)
  • Webform configuratie verwijderd (niet compatibel met Drupal 11)
  • Site volledig hersteld met content en menu's

Technische Details

  • Database: radio_voorjongnederland
  • Drupal versie: 11.1.6
  • Theme: Olivero (standaard)
  • Alleen core modules, geen contrib modules

Apache Configuratie

Virtual Hosts

  • desktoptraveller.nl: Proxy naar Nuxt (localhost:3000)
  • admin.desktoptraveller.nl: Proxy naar Directus (localhost:8055)
  • voorjongnederland.nl: Drupal site

SSL Certificaten

  • Let's Encrypt certificaten voor alle domeinen
  • Automatische vernieuwing geconfigureerd

Troubleshooting Uitgevoerd

Nuxt Rendering Probleem

Symptoom: Witte pagina, lege HTML output Oorzaak: Conflict met app/ directory structuur in Nuxt 4 Oplossing: app/app.vue verplaatst naar root als app.vue

CORS Error

Symptoom: API calls geblokkeerd in browser Oorzaak: Directus CORS niet geconfigureerd Oplossing: CORS_ENABLED en CORS_ORIGIN toegevoegd aan Directus .env

Font Loading

Symptoom: Custom fonts niet geladen Oorzaak: Fonts in verkeerde directory Oplossing: Fonts verplaatst van assets/fonts/ naar public/fonts/

Volgende Stappen

Nog Te Implementeren

  • Category pagina's (/category/[slug].vue)
  • Paginering voor blog overzicht
  • Search functionaliteit
  • SEO meta tags per pagina
  • Social media sharing
  • Related posts op detail pagina

Aanbevelingen

  1. Backups: Reguliere backups van SQLite database en uploads
  2. Monitoring: Logs monitoren voor errors
  3. Performance: Cache headers configureren in Apache
  4. Security: Rate limiting voor API calls
  5. Content: Meer blogposts toevoegen voor testen

Handige Commando's

Directus

# Status checken
sudo systemctl status directus-desktoptraveller

# Herstarten
sudo systemctl restart directus-desktoptraveller

# Logs bekijken
sudo journalctl -u directus-desktoptraveller -f

Nuxt

# Lokaal builden
cd /var/www/sites/desktoptraveller.nl-web
npm run build

# Service herstarten
sudo systemctl restart nuxt-desktoptraveller

# Dev mode (voor debugging)
npm run dev

Databases

# SQLite database bekijken
sqlite3 /var/www/sites/desktoptraveller.nl-admin/data.db

# MySQL databases
mysql -u sjoerd

Resources

Credits

  • Fonts: GAP Zuid VG en GAP Mono
  • CMS: Directus 11
  • Framework: Nuxt 4
  • Styling: Tailwind CSS 3
Overzicht