nuxt

Nuxt

Nuxt is an intuitive full-stack framework for Vue.js, providing automatic routing, server-side rendering, static site generation, and optimized Nitro server engine performance.

When to Use

• Full-Stack Vue 3 Web Applications: Nuxt 3/4 with universal SSR, static generation (SSG), and auto-imports.
• Enterprise SEO & Fast Loading Pages: Marketing sites and e-commerce stores requiring dynamic meta tags and instant rendering.
• Edge-Ready Server Engine (Nitro): Deploying serverless functions seamlessly across Cloudflare, Vercel, Netlify, and Node.
• Modular Frontend Architecture: Utilizing first-party modules (@nuxtjs/tailwindcss, @pinia/nuxt, @vueuse/nuxt).

Quick Start

Nuxt auto-imports components and composables.

<script setup>
// useFetch is auto-imported
const { data: quote } = await useFetch("/api/quote");
</script>

<template>
  <blockquote>{{ quote.text }}</blockquote>
</template>

Core Concepts

Universal Data Fetching with useFetch & useAsyncData

SSR-friendly data fetching with automated deduplication:

<!-- pages/products/[id].vue -->
<script setup lang="ts">
interface Product {
  id: number;
  title: string;
  price: number;
}

const route = useRoute();
const productId = route.params.id;

const {
  data: product,
  pending,
  error,
} = await useFetch<Product>(`/api/products/${productId}`, {
  key: `product-${productId}`,
  lazy: false,
});

useSeoMeta({
  title: () =>
    product.value?.title ? `${product.value.title} - Store` : "Loading...",
  description: () => `Buy ${product.value?.title} online now.`,
});
</script>

<template>
  <div class="product-page">
    <div v-if="pending">Loading product details...</div>
    <div v-else-if="error">Error loading product: {{ error.message }}</div>
    <div v-else-if="product">
      <h1>{{ product.title }}</h1>
      <p class="price">${{ product.price }}</p>
    </div>
  </div>
</template>

Nitro Server Engine API Routes

Creating backend API endpoints directly inside server/api: