Nuxt 3 Introduction and Installation — Vue.js Full-Stack Framework

In this tutorial, you will learn about Nuxt 3 Introduction and Installation. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Nuxt 3: understand the Vue.js full-stack framework, install it, create a project, and explore the file structure for building universal applications.

In this lesson, you'll install Nuxt 3, create a new project, understand the directory conventions, and run the development server.

What You'll Learn

How to create a Nuxt 3 project, understand the app directory structure, configure the dev server, and recognize Nuxt's auto-import and file-based routing.

Why It Matters

Nuxt 3 combines Vue 3 with server-side rendering, static generation, and full-stack capabilities out of the box. It simplifies building Vue applications with conventions.

Real-World Use

DodaTech's tutorial platform uses Nuxt 3 for the interactive code sandbox because its server routes handle code execution without exposing backend logic.

flowchart LR
    A[Install Node.js] --> B[Create Nuxt Project]
    B --> C[Explore Structure]
    C --> D[Run Dev Server]
    D --> E[Build for Production]
    style B fill:#00dc82,color:#fff

Installation

npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
npm install
npm run dev

Output: The dev server starts at http://localhost:3000. Nuxt auto-imports components, composables, and utilities without manual imports.

Project Structure

my-nuxt-app/
├── app.vue           # Root component
├── pages/             # File-based routes
├── components/        # Auto-imported components
├── composables/       # Auto-imported composables
├── layouts/           # Layout components
├── middleware/         # Route middleware
├── server/            # Server routes and API
├── public/            # Static assets
├── nuxt.config.ts     # Nuxt configuration
└── package.json       # Dependencies

First Page

Create pages/index.vue:

<template>
  <div>
    <h1>Welcome to Nuxt 3</h1>
    <p>This page is auto-routed from pages/index.vue</p>
  </div>
</template>

Output: Visit http://localhost:3000. The page renders with automatic code-splitting and SSR support.

Common Mistakes

1. Using npm instead of npx nuxi: The nuxi CLI scaffolds Nuxt 3 projects. npx nuxi@latest init is the correct command.
2. Forgetting app.vue: Nuxt 3 requires app.vue as the root component. Without it, the app shows a blank page.
3. Editing nuxt.config.ts without restarting: Config changes require restarting the dev server.
4. Using Vue 2 syntax: Nuxt 3 uses Vue 3 Composition API. Options API works but Composition API is recommended.
5. Putting components in pages/: Only page files go in pages/. Reusable components go in components/.

Practice Questions

1. What command creates a new Nuxt 3 project? Answer: npx nuxi@latest init my-nuxt-app. It scaffolds a project with the latest Nuxt 3 template.

2. What file is the root component in Nuxt 3? Answer: app.vue. It wraps all pages and layouts.

3. Where do page components live? Answer: In the pages/ directory. Each .vue file becomes a route based on its filename and path.

4. What is auto-imported in Nuxt 3? Answer: Components from components/, composables from composables/, and built-in utilities like useState, useFetch, useHead.

Challenge

Create a Nuxt 3 project with three pages (/, /about, /contact). Add a navigation component in components/NavBar.vue and use it in app.vue or a layout.

Mini Project

Scaffold a Nuxt 3 project, explore the default template, create a home page with a hero section using a component from components/, and run both dev and production builds.

FAQ

What's Next

Learn about Nuxt Pages and Routing to understand file-based routing and page conventions in Nuxt 3.