Nieuwe website gelanceerd: WebsiteExpert.nl — gebouwd met Nuxt 3, Vue.js & GA4

Waarom een nieuwe website?

Onze vorige website draaide op WordPress — prima voor klanten, maar voor onszelf wilden we meer. Sneller, modulairder, en met volledige controle over elke pixel en elk data-event. Daarom hebben we gekozen voor een volledige herbouw met Nuxt 3 (Vue.js framework) en een dedicated server-setup.

De tech stack

Wat maakt deze stack bijzonder?

⚡ Snelheid

Met Nuxt 3 en server-side rendering (SSR) laden onze pagina's onder de 1 seconde. Vergelijk dat met een gemiddelde WordPress-site (3-5 seconden). De Core Web Vitals scoren consistent 95+ op PageSpeed Insights.

📊 GA4 Event Tracking — alles zichtbaar

We hebben een custom GA4 tracking systeem gebouwd dat automatisch bijhoudt:

• Scroll depth — op elke pagina: 25%, 50%, 75%, 100%
• CTA clicks — welke knoppen worden geklikt (WhatsApp, telefoon, prijsberekening)
• PriceChecker funnel — elke stap, elke selectie, elke conversie
• Sectie-zichtbaarheid — welke secties bezoekers daadwerkelijk zien
• Formulier interacties — start, invullen, en submit events
• Case views — welke projecten bekeken worden

Dit alles zonder handmatige code per pagina. Onze ga4-tracking.client.ts plugin doet het automatisch via event delegation en IntersectionObserver.

// Automatisch scroll depth tracking
const thresholds = [25, 50, 75, 100]
window.addEventListener('scroll', () => {
  const pct = Math.round((scrollY / docHeight) * 100)
  for (const t of thresholds) {
    if (pct >= t && !tracked.has(t)) {
      tracked.add(t)
      trackScrollDepth(t, pathname)
    }
  }
}, { passive: true })

🔒 Beveiliging

• reCAPTCHA v2 op alle formulieren (contact én prijschecker)
• Honeypot fields als extra spam-bescherming
• Server-side validatie op alle form submissions
• Docker containerisatie voor isolatie

🎨 Design System

We gebruiken een consistent design system met:

• Custom kleurenpalet (accent, primary, success, warm)
• Glassmorphism effects op key components
• Scroll-triggered animations (IntersectionObserver)
• Responsive bottom bar voor mobiel
• Premium typography (Inter font)

Functies die opvallen

Prijschecker Wizard

Een 4-staps wizard die direct een indicatieprijs berekent:

1. Type kiezen — Website, webshop of software
2. Aanpak — Template, maatwerk of custom design
3. Features — Contactformulier, meertalig, API-koppelingen, etc.
4. Tijdlijn — Normaal of spoedlevering

Het resultaat: een transparante prijsindicatie + leads direct in je inbox met alle context.

Live Case Previews

Bij elk project in ons portfolio kun je een desktop/mobiel toggle gebruiken om te zien hoe de website eruitziet. Compleet met browser-frame mockup (desktop) en iPhone-frame (mobiel).

11 Diensten

Van website en webshop tot app laten maken, webapp bouwen, zakelijke e-mail (met Google Workspace advies) en domein registratie — alles met eigen landingspagina, SEO, en FAQ.

SEO Setup

Elke pagina heeft:

• Title tag met primair keyword
• Meta description (150-160 tekens)
• Open Graph tags — preview voor WhatsApp, Facebook, LinkedIn, Twitter
• Schema.org markup — Organization, WebPage, FAQPage, BlogPosting
• Canonical URL
• XML Sitemap (automatisch via @nuxtjs/sitemap)
• robots.txt

Deployment

De hele site draait in een Docker container op onze dedicated server:

services:
  websiteexpert:
    build:
      context: ..
      dockerfile: docker/Dockerfile
    ports:
      - "3000:3000"
    restart: unless-stopped

Deploy is simpel: cd docker && docker compose up -d --build.

Resultaat

Conclusie

Deze website is ons visitekaartje. Elke pixel, elke interactie en elk data-event is doordacht. We bouwen dezelfde kwaliteit voor onze klanten — of het nu een WordPress-site, webshop of maatwerk software is.

👉 Benieuwd wat we voor jou kunnen bouwen? Bereken je prijs of neem contact op.