Nuxt

Expert Nuxt.js development for automated server-side rendering and seamless Vue ecosystem integration

Category: development Source: antfu/skills

Nuxt is a community skill for building full-stack Vue.js applications using the Nuxt framework, covering file-based routing, server engine, auto-imports, composables, and deployment configuration for production Vue projects.

What Is This?

Overview

Nuxt provides patterns for developing production Vue.js applications with the Nuxt framework. It covers file-based routing with dynamic parameters, nested layouts, and middleware for page navigation control, Nitro server engine for API routes, server middleware, and server-side utilities, auto-import system that resolves components, composables, and utility functions without explicit import statements across the entire project, data fetching with useFetch and useAsyncData composables for SSR-compatible requests, and hybrid rendering modes including SSR, SSG, and ISR per route. The skill enables Vue developers to build applications with minimal configuration while maintaining full control over rendering and deployment strategies.

Who Should Use This

This skill serves Vue.js developers building full-stack applications with server-side rendering, teams creating content sites that benefit from static generation and hybrid rendering, and engineers deploying Vue applications to serverless platforms.

Why Use It?

Problems It Solves

Configuring Vue applications for server-side rendering requires complex webpack and Vite setup along with careful hydration management. Managing imports across hundreds of components and composables creates verbose boilerplate. Building API endpoints alongside the frontend needs a separate server framework. Deploying to different hosting platforms requires adapter-specific build configuration.

Core Highlights

Auto-imports resolve components and composables without manual import statements. Nitro server engine handles API routes and middleware with cross-platform deployment. Hybrid rendering configures SSR, SSG, or CSR per route for optimal performance. Module ecosystem extends functionality with over 200 pre-built integrations for common requirements such as authentication, CMS, and analytics.

How to Use It?

Basic Usage

<!-- pages/index.vue -->
<script setup lang="ts">
const { data: posts } = await useFetch(
  '/api/posts'
);
</script>

<template>
  <div>
    <h1>Latest Posts</h1>
    <ul>
      <li
        v-for="post in posts"
        :key="post.id">
        <NuxtLink
          :to="`/posts/${post.slug}`">
          {{ post.title }}
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

<!-- server/api/posts.get.ts -->

Real-World Examples

// server/api/posts.get.ts
export default defineEventHandler(
  async (event) => {
    const posts = await $fetch(
      'https://api.example.com/posts'
    );
    return posts.map(
      (p: Record<string, string>) => ({
        id: p.id,
        title: p.title,
        slug: p.slug,
      })
    );
  }
);

// server/api/posts/[slug].get.ts
export default defineEventHandler(
  async (event) => {
    const slug = getRouterParam(
      event, 'slug');
    const post = await $fetch(
      `https://api.example.com/posts`
      + `/${slug}`
    );
    if (!post) {
      throw createError({
        statusCode: 404,
        message: 'Post not found',
      });
    }
    return post;
  }
);

Advanced Tips

Use route rules in nuxt.config to configure rendering mode per route, enabling static generation for marketing pages and SSR for dynamic dashboards within the same application. Create custom composables in the composables directory for shared logic that auto-imports across components. Use Nuxt DevTools for inspecting component trees, API calls, and route configurations during development.

When to Use It?

Use Cases

Build a content-driven website with static generation for blog pages and SSR for user dashboards. Create a full-stack application with Nitro API routes and Vue frontend in a single codebase. Implement an e-commerce storefront with hybrid rendering and ISR for product catalog pages.

Important Notes

Requirements

Node.js 18 or later with Nuxt 3 installed via nuxi CLI. Vue 3 Composition API knowledge for component development. TypeScript support is built in and recommended for type safety. A deployment platform supporting Node.js or serverless runtimes.

Usage Recommendations

Do: use useFetch instead of raw fetch calls to ensure SSR compatibility and automatic request deduplication. Define server routes with method suffixes like posts.get.ts for clear HTTP method handling. Use runtime config for environment variables that need to differ between server and client.

Don't: import Vue or Nuxt composables manually when auto-import handles resolution automatically. Use window or document objects in composables without checking for server-side context. Skip error handling in useFetch calls that may fail on SSR.

Limitations

Nuxt auto-import magic can make it harder for new developers to understand where functions originate. Some Vue 3 ecosystem plugins may not be fully compatible with Nuxt SSR hydration. Build times increase with route count for fully static generated sites. Some Node.js native modules may not work in all deployment targets.