Features
- Auto-imports for components, composables, and utilities
- File-based routing with dynamic routes
- Hybrid rendering (SSR, SSG, SWR, ISR per route)
- Server engine (Nitro) with API routes
- Rich module ecosystem with 200+ modules
Pros
- Convention-over-configuration reduces boilerplate
- Excellent developer experience with auto-imports
- Flexible deployment to any hosting platform via Nitro
- Strong Vue ecosystem integration
Cons
- Auto-import magic can confuse newcomers
- Debugging server-side issues can be tricky
- Smaller community than Next.js
Overview
Nuxt is the intuitive Vue framework that makes web development simple and powerful. Built on Vue 3 and Nitro (a universal server engine), Nuxt provides a convention-over-configuration approach that handles routing, state management, data fetching, and deployment configuration automatically.
Nuxt’s auto-import system eliminates manual import statements for Vue APIs, components, and composables. Its hybrid rendering engine lets you configure different rendering strategies per route — some pages can be server-rendered, others statically generated, and others rendered on the client — all in the same application.
When to Use
Nuxt is the default choice for Vue projects that need server-side rendering, static generation, or a full-stack framework. It’s ideal when you want a batteries-included experience with minimal configuration, strong conventions, and the flexibility to deploy anywhere.
Getting Started
npx nuxi@latest init my-app
cd my-app && npm install && npm run dev<!-- pages/index.vue -->
<script setup lang="ts">
const { data } = await useFetch("/api/hello");
</script>
<template>
<h1>{{ data?.message }}</h1>
</template>