Nuxt.js Frontend Website Development

Nuxt.js Frontend Website Development

Nuxt.js is a meta-framework for Vue 3 with SSR, SSG, file-based routing, and server capabilities. For Vue what Next.js is for React. Nuxt 3 uses Nitro as server engine — it deploys to Node.js, Vercel, Netlify Edge Functions, Cloudflare Workers.

File-based routing

pages/
├── index.vue          → /
├── about.vue          → /about
├── blog/
│   ├── index.vue      → /blog
│   └── [slug].vue     → /blog/:slug
└── [...slug].vue      → catch-all route

Each file in pages/ is a route. No router configuration.

useAsyncData and useFetch

<script setup>
const { data: posts, pending, error } = await useFetch('/api/posts', {
  query: { page: 1, limit: 10 },
  lazy: false, // wait for data before render (SSR)
});

// Or with transformation
const { data } = await useAsyncData('posts', () =>
  $fetch('/api/posts').then(r => r.items)
);
</script>

useFetch and useAsyncData execute once on the server, result passes to client via useNuxtApp().payload — no duplicate request on client (deduplication).

Server Routes (Nitro)

Nuxt 3 allows writing server logic next to UI:

// server/api/posts/[id].get.ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id');
  const post = await db.post.findUnique({ where: { id: Number(id) } });
  if (!post) throw createError({ statusCode: 404 });
  return post;
});

Files in server/api/ become API endpoints. .get.ts, .post.ts — HTTP method defined by filename.

Nuxt Content

@nuxt/content plugin turns Markdown/YAML files into a database:

<script setup>
const { data: post } = await useAsyncData(() =>
  queryContent('/blog').where({ _path: '/blog/my-post' }).findOne()
);
</script>

<template>
  <ContentRenderer :value="post" />
</template>

Perfect for documentation sites, blogs, content sites.

SEO and useHead

<script setup>
useHead({
  title: 'Page Title | Site',
  meta: [
    { name: 'description', content: 'Description' },
    { property: 'og:image', content: '/og.jpg' },
  ],
  link: [{ rel: 'canonical', href: 'https://example.com/page' }],
});
</script>

Or via useSeoMeta composable:

useSeoMeta({ title: 'Title', ogTitle: 'OG Title', description: 'Desc' });

Nuxt Modules

Ecosystem of ready-to-use modules:

• @nuxt/image — image optimization (analog of Next Image)
• @nuxtjs/tailwindcss — Tailwind CSS
• @pinia/nuxt — Pinia SSR-compatible
• nuxt-auth-utils — simplified authorization
• @nuxt/ui — UI components from Nuxt team

Deployment

nuxt build + node .output/server/index.mjs — Node.js server. nuxt generate — static site. Vercel/Netlify auto-detect Nuxt. Docker: standard Node.js image.

Timeline

Site on Nuxt.js with SSR/SSG, Nuxt Content, SEO: 1–3 weeks. SPA with backend integration, authorization, complex UI: 2–5 weeks.