Last Updated: November 21, 2025
Nuxt.js
The intuitive Vue framework
Core Features
| Item | Description |
|---|---|
Auto-imports
|
Components and composables |
File-based Routing
|
Pages directory routing |
Server Routes
|
API endpoints in server/ |
Layouts
|
Reusable page layouts |
Middleware
|
Route middleware |
Modules
|
Extend functionality |
Common Commands
npx nuxi init myapp
Create new Nuxt app
npm run dev
Start development server
npm run build
Build for production
npm run generate
Generate static site
Page Component
<!-- pages/index.vue -->
<script setup>
const { data: posts } = await useFetch('/api/posts')
const route = useRoute()
const router = useRouter()
definePageMeta({
middleware: 'auth'
})
</script>
<template>
<div>
<h1>Blog Posts</h1>
<article v-for="post in posts" :key="post.id">
<NuxtLink :to="`/posts/${post.id}`">
{{ post.title }}
</NuxtLink>
</article>
</div>
</template>Best Practices
- Use composables for reusable logic
- Leverage auto-imports for cleaner code
- Use useFetch for data fetching
- Add middleware for auth and guards
💡 Pro Tips
Quick Reference
Use useAsyncData with $fetch for server-side data