Getting Started with Nuxt.js 3: A Complete Beginner’s Guide

Introduction

Nuxt 3 is a modern, lightning-fast framework built on top of Vue 3. It’s designed to make web development easier, more organized, and more powerful—especially when building production-ready applications. With features like file-based routing, server-side rendering (SSR), server functions, and automatic optimisation, Nuxt handles the setup and configuration, allowing you to focus on creating great user experiences.

Whether you’re a new Vue developer or trying Nuxt for the first time, this beginner’s guide will walk you through everything you need to get started with Nuxt 3—installation, project structure, key features, and how to build your first page.

What is Nuxt 3?

Nuxt 3 is the latest version of the Nuxt framework, powered by Vue. It combines the simplicity of Vue with the flexibility of server-side rendering and full-stack capabilities.

Why developers love Nuxt 3

•  Blazing-fast performance thanks to Vite and Nitro
•  File-based routing — no need to configure routes manually
•  Zero-config setup for quick productivity
•  Vue 3 features like Composition API, script setup, Suspense
• Hybrid rendering (SSG, SSR, ISR, Edge, and more)
• Built-in server routes with Nitro
• Massive module ecosystem

If you want a framework that works for both small and enterprise projects, Nuxt 3 is a great choice.

Installation

Getting started with Nuxt.js 3 is simple. If you’re ready to build a real project, follow the steps below to create a fresh Nuxt 3 application.

Open your terminal and run the command for your preferred package manager.
(Replace <project-name> with your actual project folder name.)

npx create-nuxt@latest <project-name> 
cd my-nuxt-app
npm install
npm run dev

You can now open your project at:  http://localhost:3000

Nuxt automatically creates the folder structure, dev server, and routing for you.

File-Based Routing in Nuxt 3

Nuxt uses file-based routing, meaning the structure of your /pages folder automatically becomes your app’s routes. This eliminates the need for manual router configuration, keeping projects clean and organised.

Examples

• pages/index.vue → /
• pages/about/index.vue → /about
• pages/about.vue → /about (not recommended for larger projects)

Using folders helps keep your structure clean and scalable.

Handling 404 Pages

Nuxt makes it simple to create a custom 404 page. Just create an error.vue file in the root of your project:

<template>
  <div>
    <p>This is the 404 page</p>
  </div>
</template>

Whenever a user visits a route that doesn't exist, this page will be displayed.

Auto Imports in Nuxt 3

One of the most exciting features of Nuxt 3 is auto imports.

Nuxt automatically imports:

• Components in the /components folder
• Composables in the /composables folder
• Vue Composition API functions (like ref, computed, etc.)

This means no more messy import statements:

import something from "../../something"
import component from "@/components/component"

Instead, you can use your components or composables directly in your Vue files.

Example component:

~/components/ChildComponent.vue
<template>
  <p>This is the Child Component</p>
</template>

Used in a page without any imports:

<template>
  <childComponent />
</template>

Composition API functions are also auto-imported:

<script setup>
const count = ref(3)
const double = computed(() => count.value * 2)
</script>
 
<template>
  <p>Double: {{ double }}</p>
</template>

Using Layouts in Nuxt

Layouts help you define different structures for different parts of your app—perfect for dashboards, marketing pages, or sections that need a unique design.

Create layouts inside the /layouts folder.

Default Layout

layouts/default.vue:

<template>
  <div>
    <p>This is our default layout</p>
    <slot />
  </div> 
</template>

Nuxt automatically wraps all pages with this layout.

Custom Layout

Create a second layout:

layouts/custom.vue

<template>
  <div>
    <p>This is our custom layout</p>
    <slot />
  </div>
</template>

Use it inside a page:

<script setup>
definePageMeta({
  layout: 'custom'
})
</script>
<template>
  <p>About page</p>
</template>

This tells Nuxt to render the page using the custom layout.
Creating Your First Page

Create a file inside pages/hello.vue:

<script setup>
const message = "Welcome to your first Nuxt 3 page!"
</script>
 
<template>
  <h1>{{ message }}</h1>
  <p>This page is powered by Nuxt's file-based routing.</p>
</template>

Now navigate to: /hello

You just built your first Nuxt 3 page.

Using Data Fetching in Nuxt 3

Nuxt offers two main composables:

1. useFetch() – Fetch data on the client or server

<script setup>
const { data, pending, error } = await useFetch("https://api.example.com/posts")
</script>

2. useAsyncData() – Ideal for complex async logic

<script setup>
const { data: posts } = await useAsyncData("posts", () => $fetch("/api/posts"))
</script>

These integrate perfectly with SSR and caching.

Assets & Styling in Nuxt 3

Nuxt provides a flexible system for managing CSS, images, fonts, global styles, and static files.

Here’s how everything works:

1. The /assets Directo   ry (Recommended for Styling)

This folder is for compiled assets—things processed by Vite, such as:

• CSS / SCSS / SASS
• Tailwind config files
• Images used inside components
• Fonts
• Icons

Example:
assets/styles/main.css

You can load it globally inside nuxt.config.ts:

export default defineNuxtConfig({
  css: [
    '@/assets/styles/main.css'
  ]
})

These styles will be included in every page.

2. Adding Global CSS

If you’re using Tailwind, SCSS, or custom utility classes, place them in /assets and register them via nuxt.config.ts.

Example with SCSS:

export default defineNuxtConfig({
  css: ['@/assets/styles/global.scss']
})

You can also import styles inside app.vue:

<script setup>
import '@/assets/styles/global.css'
</script>

3. Using the /public Directory

Files inside /public are served as-is with no processing.

Perfect for:

• Static images
• Favicons
• Robots.txt
• Large assets
• Downloadable files

Example:
A file placed in /public/logo.png can be used like this:

<img src="/logo.png" alt="Logo">

4. Module-Based Styling

Nuxt also supports external styling through modules such as:

• Tailwind CSS
• UnoCSS
• Sass / Less
• PostCSS
• DaisyUI
• PrimeVue stylesheet
• Bootstrap

Tailwind example:

npx nuxi@latest module add tailwindcss

Nuxt automatically configures everything for you.

5. Component-Level Styling

Inside Vue Single File Components (SFCs):

<style scoped>
.button {
  background: #4f46e5;
  color: #fff;
}
</style>

Use scoped to avoid global leakage.

For global classes inside a component:

<style global>
 
body {
  background: #f9fafb;
}
</style>

6. Using Images & Assets Inside Components

For images inside components, use the assets folder:

<template>
  <img src="@/assets/images/hero.jpg" />
</template>

Nuxt handles optimization and bundling automatically.

7. Using CSS Libraries

You can install any CSS framework:

Example:

installing Bootstrap

npm install bootstrap

In nuxt.config.ts:

export default defineNuxtConfig({
  css: ['bootstrap/dist/css/bootstrap.min.css']
})

8. Adding Fonts

Put your fonts inside:

/assets/fonts/myFont.woff2

Import in your CSS:

@font-face {
  font-family: 'MyFont';
  src: url('/assets/fonts/myFont.woff2') format('woff2');
}

Conclusion

Getting started with Nuxt.js 3 opens up a world of possibilities for building scalable, fast, and SEO-optimized web applications. With its seamless integration of Vue 3, powerful configuration options, and a rich ecosystem of modules, Nuxt 3 makes development both efficient and enjoyable. By following this guide, you now have the foundational knowledge to start creating your own Nuxt 3 projects and explore more advanced features like server-side rendering, static site generation, and dynamic routing. The best way to master Nuxt 3 is to experiment and build real-world applications continually.

Want to create a Nuxt project? Contact us today, and let’s build something great together.