Creating a project

A Nuxt project is created with the official tool. It downloads a starter, installs the dependencies and sets up TypeScript, so you do not write the configuration from scratch.

Creating

Open a terminal in your projects folder and run:

npm create nuxt@latest blog

The tool asks a few questions: which package manager to use (choose npm), whether to create a git repository and which official modules to install. Do not pick any modules yet; the course adds the ones it needs later. Then start the development server:

cd blog
npm run dev

The terminal prints the address http://localhost:3000. Open it and you see the Nuxt welcome page. At the bottom of the page there is a Nuxt DevTools button, a panel that shows the app's pages, components and data.

Project structure

blog/
├── app/
│   └── app.vue
├── public/
│   ├── favicon.ico
│   └── robots.txt
├── nuxt.config.ts
├── package.json
└── tsconfig.json

In Nuxt 4 all interface code lives in the app/ folder. In Nuxt 3 the same folders sat directly in the project root; this is the main difference you will meet in older articles.

Folders that appear later

Folder	What it holds
`app/pages/`	Pages, each with its own address
`app/components/`	Components
`app/layouts/`	Layouts, the shared wrapper of pages
`app/composables/`	Composables, imported automatically
`app/middleware/`	Checks that run before opening a page
`app/plugins/`	Code that runs when the app starts
`app/assets/`	Styles and images processed by the bundler
`server/`	Server code: the API and handlers
`public/`	Files served as they are

Nuxt creates the service folders .nuxt/ (generated types) and .output/ (the build result) itself. Do not edit them or add them to git.

The config file

// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true }
})

compatibilityDate is the date whose behaviour the framework follows; yours will be the day you created the project. devtools turns on the developer panel. You will add modules and settings to this file.

Shortcuts

Alias	Points to
`~`	The `app/` folder
`~~`	The project root

For example, ~/components/PostCard.vue is app/components/PostCard.vue.

Project commands

Command	What it does
`npm run dev`	Development server with live reload
`npm run build`	Build for production into `.output/`
`npm run preview`	Run the built version
`npm run generate`	Build a static site

Common mistake

If you create a pages or components folder in the project root, as Nuxt 3 articles suggest, Nuxt 4 does not see it: pages do not open and components are not found. Put interface code in app/ and keep only server/, public/ and config files in the root.

Thanks for reading!