Faisal Khalid

Beginner’s Guide: How to Build Your First Nuxt.js App Like a Pro (Step-by-Step Setup)

Illustration showing how to build a Nuxt.js app step-by-step

​Creating your first Nuxt.js application is a straightforward process that leverages the power of Vue.js while providing an enhanced development experience. Nuxt.js simplifies the creation of universal or single-page Vue applications by offering a robust structure and a set of features designed to optimize development. In this guide, we’ll walk through the steps to install Nuxt.js and create your inaugural application.​

✅ What You Need Before Starting

Before we begin, make sure you have the following:

1. Node.js installed

2. A code editor

  • We recommend Visual Studio Code
  • Also install the Vue.js extension from the VS Code marketplace (optional, but helpful)

🛠️ Step-by-Step: Make a New Nuxt App

1. Open Your Terminal or Command Prompt
If you’re on Windows, open Command Prompt or PowerShell. On Mac, use Terminal.

2. Run this command to create a new Nuxt project:

npx nuxi init my-nuxt-app

Replace my-nuxt-app with any name you like for your project.

3. Go into your project folder:

cd my-nuxt-app

4. Install the necessary packages:

npm install

5. Start your development server:

npm run dev

Now open your browser and go to:
👉 http://localhost:3000
You’ll see your brand new Nuxt.js app running!

📁 Understanding the Project Folders

Here are some folders you’ll see in your project:

  • nuxt.config.ts — Main settings for your app (don’t worry about this now).
  • pages/ — Create pages here. Each .vue file becomes a webpage! Example: pages/about.vue = /about route in browser.
  • components/ — Reusable parts like headers, footers, cards go here.
  • layouts/ — Set custom layouts for different pages (optional but useful).
  • static/ — Add images or files you want to use directly in your site.

✨ Let’s Make Your First Page!

  1. Go to the pages/ folder.
  2. Create a new file called: about.vue
  3. Add this code to it:
<template>
  <div>
    <h1>About Us</h1>
    <p>Welcome to the about page of our Nuxt.js application!</p>
  </div>
</template>
  1. Save the file.

Now go to your browser and open:
👉 http://localhost:3000/about
You’ll see your new page!

🎉 You Did It!

Congrats! You just created your first Nuxt.js website.
It’s fast, simple, and built on top of Vue.js.

Nuxt gives you a lot of tools to build modern websites — you’ll learn more as you go!

For more learning, check out the official docs:
👉 https://nuxt.com