Nuxt 3 Overview

🚀 What is Nuxt 3?

Nuxt 3 is a powerful Vue framework that simplifies building full-stack web applications with server-side rendering, automatic routing, and optimized performance. It provides an intuitive development experience with built-in features for modern web development.


<!-- app.vue - Your first Nuxt 3 app -->
<template>
  <div>
    <h1>Welcome to Nuxt 3!</h1>
    <p>Building modern apps made easy.</p>
  </div>
</template>

Key Nuxt 3 Features

📁

File-Based Routing

Automatic routes from file structure

pages/
  index.vue      → /
  about.vue      → /about
  users/[id].vue → /users/:id

⚡

Server-Side Rendering

Fast initial page loads with SSR

<script setup>
const data = await useFetch('/api/data')
</script>

🔌

Auto Imports

No need to import components

<!-- No imports needed! -->
<template>
  <NuxtLink to="/about">About</NuxtLink>
</template>

🛠️

API Routes

Built-in backend functionality

// server/api/hello.js
export default defineEventHandler(() => {
  return { message: 'Hello!' }
})

🔹 Creating a Nuxt 3 Project

Get started with Nuxt 3 in seconds:

# Create a new Nuxt 3 project
npx nuxi@latest init my-app

# Navigate to project
cd my-app

# Install dependencies
npm install

# Start development server
npm run dev

Project Structure:

pages/ - Your application routes
components/ - Reusable Vue components
layouts/ - Page layouts
server/ - Backend API routes
public/ - Static assets

🔹 Basic Page Example

Create a simple page with data fetching:

<!-- pages/index.vue -->
<script setup>
const { data: posts } = await useFetch('/api/posts')
const count = ref(0)
</script>

<template>
  <div>
    <h1>My Blog</h1>
    <p>Counter: {{ count }}</p>
    <button @click="count++">Increment</button>
    
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title }}</h2>
    </div>
  </div>
</template>

🔹 Layouts in Nuxt 3

Create reusable layouts for your pages:

<!-- layouts/default.vue -->
<template>
  <div>
    <header>
      <nav>
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/about">About</NuxtLink>
      </nav>
    </header>
    
    <main>
      <slot /> <!-- Page content goes here -->
    </main>
    
    <footer>
      <p>© 2025 My App</p>
    </footer>
  </div>
</template>

🔹 Nuxt 3 Composables

Built-in composables for common tasks:

<script setup>
// Data fetching
const { data } = await useFetch('/api/users')

// Navigation
const router = useRouter()
const route = useRoute()

// State management
const state = useState('counter', () => 0)

// SEO
useHead({
  title: 'My Page',
  meta: [{ name: 'description', content: 'Page description' }]
})
</script>