Nuxt.js Development

Nuxt is a Vue.js framework that handles everything a production application needs: server-side rendering, static site generation, file-system routing, state management, and server API routes -- with almost no configuration. Where plain Vue requires assembling these pieces yourself, Nuxt provides them as a coherent, opinionated system.

The defining feature is rendering flexibility. A single Nuxt app can serve different routes with different rendering strategies: server-render the homepage for SEO, statically pre-render blog posts at build time, and client-render the logged-in dashboard. This is Nuxt's hybrid rendering mode, configured per-route in nuxt.config.ts.

File-system routing

Nuxt generates routes automatically from your pages/ directory. No route configuration file needed. A file at pages/blog/[slug].vue becomes /blog/:slug. A file at pages/about.vue becomes /about. Nested directories create nested routes.

This extends to the server layer. Files in server/api/ become API endpoints. server/api/posts.get.ts becomes a GET /api/posts handler. Full-stack in one project, with TypeScript throughout.

The same convention applies to:

• composables/: Auto-imported Vue composables -- useFetch, useState, useAsyncData
• middleware/: Route middleware that runs before navigation
• layouts/: Shared layout components that wrap pages
• plugins/: Code that runs on app initialisation
• components/: Auto-imported Vue components with no explicit import statements

Rendering modes

SSR (server-side rendering): Default mode. HTML is rendered on the server per request. Good for dynamic content, personalisation, and authenticated pages. Powered by the Nitro server engine.

SSG (static site generation): Pages are pre-rendered at build time. Output is static HTML served from a CDN. Configured with nitro.prerender.routes or by setting ssr: false at the route level.

Hybrid rendering: Different routes use different strategies. routeRules in nuxt.config.ts lets you set prerender, ssr, cache TTL, redirect, and CORS rules per-route. This is Nuxt's most powerful and underused feature.

SPA mode: Full client-side rendering. Useful for admin panels or dashboards where SEO is not a concern and interactivity is the priority.

What we build with Nuxt

Marketing sites and content platforms

Nuxt with SSG or hybrid rendering is a strong combination for marketing sites. Content routes are pre-rendered for performance and SEO. Dynamic routes -- search, filters, personalised recommendations -- use SSR or client-side fetching. The result is a fast, SEO-friendly site with full interactivity where needed.

Full-stack web applications

Nuxt's server layer (Nitro) handles API routes, middleware, database connections, and server-side logic in the same project as the frontend. This is a genuine full-stack framework -- we use it for applications where a separate API server would add unnecessary complexity.

Nuxt with headless CMS

Nuxt integrates cleanly with headless CMSes: Strapi, Contentful, Sanity, and DatoCMS all have official or community Nuxt modules. We configure the data layer, set up ISR caching for content routes, and connect the CMS's webhook to a Nuxt rebuild trigger.

Vue-to-Nuxt migrations

Teams with existing Vue.js SPAs that need SSR for SEO often migrate to Nuxt. The component model is identical -- the migration is primarily restructuring routing and adding server-side data fetching. We handle these migrations and preserve all existing component logic.

The Nitro server engine

Nuxt's Nitro engine handles server-side rendering and API routes. It is framework-agnostic: the same Nuxt app can deploy to Node.js, Cloudflare Workers, AWS Lambda, Vercel Edge Functions, or Netlify without code changes. This deployment flexibility is a meaningful operational advantage.

Nuxt modules ecosystem

Nuxt's module system adds capabilities with minimal configuration:

• @nuxt/content: File-based CMS using Markdown/YAML/JSON. Ideal for documentation sites and blogs.
• @nuxt/image: Automatic image optimisation, format conversion, and lazy loading.
• @pinia/nuxt: Pinia state management, auto-imported and SSR-compatible.
• @nuxtjs/i18n: Internationalisation with locale-based routing.
• @nuxtjs/tailwindcss: Tailwind CSS integration.
• nuxt-security: Security headers, CSRF protection, rate limiting.

We select and configure modules based on project requirements. No module bloat.

Nuxt vs Next.js

Both are production-grade meta-frameworks. The choice is primarily about your team's existing knowledge and preference for Vue vs React.

Choose Nuxt when:

• Your team knows Vue.js and prefers its component model
• You want batteries-included defaults with less configuration
• You value the Nuxt module ecosystem for rapid feature addition
• You want hybrid rendering without complex middleware configuration

Choose Next.js when:

• Your team is React-first
• You need React Server Components
• You want Vercel's native optimisations

Both deploy cleanly to Vercel, Netlify, and Cloudflare. We are experienced with both and will be honest about which is the better fit for your specific project and team.