Learn Nuxt - Starting a Nuxt Project

#Introduction

Enough architecture theory. Episode 3 is the point where you start building something real: your first Nuxt project. The goal of this episode is simple but crucial — you must feel comfortable with the project creation flow, understand which files exist, and know how to run the dev server along with the hot reload feature.

In this episode we also set up the quality foundations: TypeScript enabled, ESLint to enforce rules, and Prettier to keep formatting tidy. Getting the setup right from the start is much cheaper than fixing it halfway through.

#Creating an Application with npx nuxi init

#The Project Creation Command

Nuxi is Nuxt's official command line interface. To create a new project, run:

npx nuxi@latest init belajar-shop
cd belajar-shop

Nuxi will ask a few questions, such as which package manager to use. Once it finishes, install all dependencies:

npm install

The npx nuxi init belajar-shop command creates a belajar-shop folder containing a complete project template. Throughout this series we will develop the belajar-shop project into a real online store application.

#Alternative: Nuxt Starters

Besides the basic template, you can use a more complete starter such as nuxt/starter or nuxt/starter-v4. For learning, the basic template is the best fit because we build every feature ourselves step by step.

#Folder Structure and Main Files

Once the installation finishes, open the project in your editor and observe its contents:

app/
  app.vue
  assets/
  components/
  composables/
  layouts/
  pages/
  public/
  server/
nuxt.config.ts
package.json
tsconfig.json

A few key files you should get to know from now on:

• app/app.vue: the root component that loads <NuxtPage />.
• app/pages/index.vue: the project's first page.
• nuxt.config.ts: Nuxt's main configuration.
• package.json: the list of dependencies and scripts such as dev, build, and preview.

Open app/app.vue and replace its contents with a simple version:

app.vue sederhana

<template>
  <div>
    <NuxtPage />
  </div>
</template>

<NuxtPage /> is a Nuxt-specific component that renders the currently active page according to the route. Without this component, pages will never appear.

#Running the Dev Server and Hot Reload

#Starting the Dev Server

Run the dev server from the project folder:

npm run dev

The dev server runs at http://localhost:3000. Open that URL in your browser and you will see the Nuxt welcome page. The server status also appears in the terminal, complete with port and version information.

#Hot Module Replacement

The main advantage of dev mode is hot module replacement. Change text in app/pages/index.vue, save it, and watch: the change appears in the browser instantly without a manual reload. State that hasn't changed in components is preserved too. Try it now by replacing the content of the main page.

#Nuxi DevTools

Nuxt DevTools is integrated with the dev server. Open http://localhost:3000/_nuxt/ or click the icon that appears in the corner of the browser while the dev server is running. DevTools shows components, state, routes, and payloads — we'll use it for profiling in episode 15.

#Configuring TypeScript, ESLint, and Prettier

#TypeScript Enabled from the Start

Nuxt ships with TypeScript by default. To check the types across the whole project, run:

npx nuxi typecheck

npx nuxi typecheck runs vue-tsc and reports all type errors. Keep strict enabled in tsconfig.json — Nuxt manages this file and adds aliases such as #imports and @.

#ESLint with the Official Module

Install Nuxt's official ESLint module for the best integration:

npm install --save-dev @nuxt/eslint

Add the module to nuxt.config.ts:

Aktifkan ESLint

export default defineNuxtConfig({
  modules: ["@nuxt/eslint"],
})

After that, the .eslintrc or eslint.config.mjs file is generated automatically, and you can run linting:

npx eslint .

#Prettier for Consistent Formatting

Install Prettier and run it to tidy up all files:

npm install --save-dev prettier
npx prettier --write .

The combination of npx eslint . and npx prettier --write . keeps the codebase uniform. Episode 19 will add pre-commit hooks so these rules are enforced automatically.

#Conclusion

Episode 3 moves you from theory to practice: the belajar-shop project now exists, you understand the folder structure and the role of app.vue, the dev server runs with hot reload, and TypeScript, ESLint, and Prettier are active as a quality safety net.

Key takeaways:

• Create a new project with npx nuxi init followed by npm install.
• app.vue is the root component; <NuxtPage /> renders the active page.
• npm run dev runs the dev server with hot module replacement.
• Nuxt DevTools is available during development for inspecting components and state.
• TypeScript is already enabled; use npx nuxi typecheck to check types.
• Integrate ESLint via @nuxt/eslint and tidy up formatting with Prettier.

In the next episode, episode 4, we will discuss routing and navigation — file-based routing in the pages folder, dynamic and nested routes, navigation with <NuxtLink>, and middleware to guard routes. Your belajar-shop project will start having several pages.