How to Start with Nuxt.js 3 (Complete Beginner’s Guide)

Introduction

Why are so many modern websites switching to frameworks like Nuxt 3 for production apps? Performance, developer experience, and SEO are no longer optional. According to Google, 53% of users abandon a site if it takes longer than three seconds to load, and Core Web Vitals now directly influence search rankings (Google Search Central, 2024). That reality has pushed developers toward frameworks that are fast by default and scalable by design.

Nuxt 3 is a modern, high-performance framework built on Vue 3 that addresses these demands head-on. With features like file-based routing, server-side rendering, server functions, and automatic optimization, Nuxt removes boilerplate and lets developers focus on building real-world applications. Whether you are new to Vue or exploring Nuxt for the first time, this guide will help you get started with confidence.

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

Nuxt 3 simplifies modern web development by combining the power of Vue 3 with built-in performance, SEO readiness, and full-stack capabilities. From file-based routing and auto imports to server-side rendering, layouts, and flexible styling options, Nuxt removes much of the configuration overhead that slows teams down. This allows developers to focus on building fast, scalable, and maintainable applications that perform well in both search engines and real-world usage.

However, choosing the right framework is only the first step. Implementing Nuxt 3 effectively, following best practices for performance, SEO, and architecture, is what truly determines long-term success.

At StaticMania, we specialize in building production-ready Nuxt and JAMstack applications for startups and growing businesses. Our expert developer team combines deep technical expertise with proven SEO and UX strategies to deliver websites that are fast, secure, and built to scale. If you’re planning to launch or migrate a Nuxt 3 project and want expert guidance from day one, contact StaticMania and let us help you turn your ideas into a high-performing digital product.

Content Assurance

1. Google Search Central, 2024
2. Creating a Custom 404 Page in Next.js
3. What is Vue.js?

This article was written & reviewed by Md. Saad, as the website front-end developer of StaticMania, has been working since 2018.