Donn Labs
Back to Blog

Getting Started with Nuxt 3

Nuxt 3 is a powerful framework for building modern web applications with Vue.js. In this guide, we'll walk through the basics of getting started with Nuxt 3.

Why Nuxt 3?

Nuxt 3 brings several improvements over Nuxt 2:

  • Better Performance: Improved server-side rendering and static site generation
  • TypeScript Support: Built-in TypeScript support
  • Composition API: Full support for Vue 3's Composition API
  • Better Developer Experience: Improved tooling and faster development

Installation

To create a new Nuxt 3 project, run:

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

Project Structure

A typical Nuxt 3 project has the following structure:

my-project/
├── pages/          # File-based routing
├── components/      # Vue components
├── layouts/        # Layout components
├── assets/         # Static assets
├── public/         # Public files
└── nuxt.config.ts  # Nuxt configuration

Creating Your First Page

Create a file in the pages directory:

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello Nuxt 3!</h1>
  </div>
</template>

This automatically creates a route at /.

Next Steps

Happy coding!

Back to all posts