Nuxt project structure in Vue - Step-by-Step Execution

Concept Flow - Nuxt project structure

Start: Create Nuxt Project

↓

Root Folder Created

↓

Add nuxt.config.ts

↓

Create /pages folder

↓

Create /components folder

↓

Create /layouts folder

↓

Create /assets folder

↓

Create /public folder

↓

Add optional folders: /plugins, /middleware, /stores

↓

Project ready for development

This flow shows how a Nuxt project folder is built step-by-step, starting from the root folder and adding key folders and config files.

Execution Sample

Vue

nuxt-project/
  nuxt.config.ts
  pages/
    index.vue
  components/
    HelloWorld.vue
  layouts/
    default.vue
  assets/
    logo.png
  public/
    favicon.ico

This shows the main folders and files in a Nuxt project after setup.

Execution Table

Step	Action	Folder/File Created	Purpose
1	Create root folder	nuxt-project/	Main project container
2	Add config file	nuxt.config.ts	Project settings and config
3	Create pages folder	pages/	Holds page components for routing
4	Add index page	pages/index.vue	Home page component
5	Create components folder	components/	Reusable UI components
6	Add sample component	components/HelloWorld.vue	Example UI component
7	Create layouts folder	layouts/	Page layout templates
8	Add default layout	layouts/default.vue	Default page wrapper
9	Create assets folder	assets/	Static assets like images, styles
10	Add image asset	assets/logo.png	Example image file
11	Create public folder	public/	Static files served as-is
12	Add favicon	public/favicon.ico	Browser tab icon
13	Optional: add plugins folder	plugins/	Third-party or custom plugins
14	Optional: add middleware folder	middleware/	Route middleware functions
15	Optional: add stores folder	stores/	Pinia modules for state management
16	Project ready	-	All main folders and files created

💡 All essential Nuxt folders and files are created for development.

Variable Tracker

Folder/File	Initial	Final
nuxt-project/	No	Yes
nuxt.config.ts	No	Yes
pages/	No	Yes
pages/index.vue	No	Yes
components/	No	Yes
components/HelloWorld.vue	No	Yes
layouts/	No	Yes
layouts/default.vue	No	Yes
assets/	No	Yes
assets/logo.png	No	Yes
public/	No	Yes
public/favicon.ico	No	Yes
plugins/	No	Yes (optional)
middleware/	No	Yes (optional)
stores/	No	Yes (optional)

Key Moments - 3 Insights

Why is the /pages folder important in Nuxt?

The /pages folder automatically creates routes based on its files, as shown in step 3 and 4 of the execution_table.

What is the difference between /assets and /public folders?

/assets holds files processed by build tools (like images or styles), while /public serves files directly without processing, as seen in steps 9-12.

Are /plugins, /middleware, and /store folders required?

No, they are optional and added only if your project needs plugins, route middleware, or Pinia store, as indicated in steps 13-15.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the home page component created?

A Step 3

B Step 4

C Step 6

D Step 8

💡 Hint

Check the 'Folder/File Created' column for 'pages/index.vue' in the execution_table.

According to variable_tracker, which folder is created last among the essential ones?

A public/

B layouts/

C components/

D assets/

💡 Hint

Look at the order of creation in the execution_table and match with variable_tracker.

If you remove the /layouts folder, what impact does it have on the project structure?

A No impact, layouts are optional

B Pages won't render at all

C You lose page templates and wrappers

D You cannot add components

💡 Hint

Refer to step 7 and 8 in execution_table about layouts purpose.

Concept Snapshot

Nuxt project structure:
- Root folder contains nuxt.config.ts
- /pages folder auto-generates routes
- /components for reusable UI parts
- /layouts for page templates
- /assets for processed static files
- /public for static files served directly
- Optional: /plugins, /middleware, /stores for advanced features

Full Transcript

This visual execution shows how a Nuxt project folder is built step-by-step. It starts with creating the root folder, then adding the nuxt.config.ts file for configuration. Next, the /pages folder is created to hold page components that automatically become routes. The /components folder stores reusable UI parts, while /layouts contains templates that wrap pages. The /assets folder holds images and styles processed by build tools, and /public serves static files directly like favicon.ico. Optional folders like /plugins, /middleware, and /stores can be added for plugins, route middleware, and state management. This structure helps organize your Nuxt app clearly and efficiently.

Practice

1. In a Nuxt project, which folder automatically generates routes based on its files?

easy

A. pages folder

B. components folder

C. layouts folder

D. plugins folder

Solution

1. Step 1: Understand Nuxt routing

   Nuxt uses the pages folder to create routes automatically from the files inside it.

2. Step 2: Identify folder roles

   components holds reusable UI parts, layouts define page wrappers, and plugins add extra functionality, but none auto-generate routes.

3. Final Answer:

   pages folder -> Option A

4. Quick Check:

   Routes come from pages folder [OK]

Hint: Routes come from the pages folder files [OK]

Common Mistakes:

• Confusing components folder with pages
• Thinking layouts create routes
• Assuming plugins handle routing

2. Which of the following is the correct way to define a layout in a Nuxt project?

easy

A. Add a Vue component inside pages/ folder named layout.vue

B. Create a file in layouts/ folder and export a Vue component

C. Place a JavaScript file in plugins/ folder named layout.js

D. Create a CSS file in assets/ folder named layout.css

Solution

1. Step 1: Know where layouts go

   Layouts in Nuxt are Vue components placed inside the layouts/ folder to wrap pages.

2. Step 2: Check other options

   Pages folder is for routes, plugins are for JS extensions, assets hold styles or images, so these are incorrect for layouts.

3. Final Answer:

   Create a file in layouts/ folder and export a Vue component -> Option B

4. Quick Check:

   Layouts live in layouts folder [OK]

Hint: Layouts are Vue files inside layouts folder [OK]

Common Mistakes:

• Putting layouts inside pages folder
• Confusing plugins with layouts
• Thinking CSS files define layouts

3. Given this Nuxt project structure:

layouts/default.vue
pages/index.vue
pages/about.vue

What happens when you visit the URL /about?

medium

A. The default.vue layout is shown alone without any page

B. The index.vue page is shown without any layout

C. A 404 error occurs because about.vue is not a layout

D. The about.vue page is shown wrapped by default.vue layout

Solution

1. Step 1: Understand routing and layouts

   Visiting /about loads pages/about.vue automatically as a route.

2. Step 2: Layout wrapping behavior

   By default, pages are wrapped inside the layouts/default.vue layout unless specified otherwise.

3. Final Answer:

   The about.vue page is shown wrapped by default.vue layout -> Option D

4. Quick Check:

   Page loads with default layout [OK]

Hint: Pages load inside default layout unless changed [OK]

Common Mistakes:

• Thinking about.vue is not a route
• Assuming layouts show alone
• Ignoring default layout wrapping

4. You created a file pages/contact.vue but visiting /contact shows a 404 error. What is the most likely cause?

medium

A. The plugins/ folder is empty

B. The layouts/default.vue file is missing

C. The contact.vue file is inside components/ folder instead of pages/

D. You forgot to import contact.vue in pages/index.vue

Solution

1. Step 1: Check file location for routing

   Nuxt auto-generates routes only from files inside the pages/ folder.

2. Step 2: Identify common mistakes

   If contact.vue is inside components/, it won't create a route, causing 404 on /contact.

3. Final Answer:

   The contact.vue file is inside components/ folder instead of pages/ -> Option C

4. Quick Check:

   Pages folder files create routes [OK]

Hint: Pages must be inside pages folder for routing [OK]

Common Mistakes:

• Placing pages in components folder
• Thinking layouts cause 404
• Assuming imports needed for pages

5. You want to create a Nuxt app with two different page layouts: one for public pages and one for admin pages. How should you organize your project structure to achieve this?

hard

A. Create layouts/public.vue and layouts/admin.vue, then specify layout in each page's definePageMeta

B. Put all pages in pages/ and import layouts manually inside each page component

C. Create two separate pages/ folders named public and admin without layouts

D. Use plugins/ to switch layouts dynamically based on route

Solution

1. Step 1: Understand layout usage in Nuxt

   You can create multiple layouts inside layouts/ folder, each as a Vue component.

2. Step 2: Assign layouts per page

   Use definePageMeta in each page to specify which layout to use, e.g., layout: 'admin' or layout: 'public'.

3. Step 3: Evaluate other options

   Importing layouts manually or using plugins for layout switching is not the recommended Nuxt pattern.

4. Final Answer:

   Create layouts/public.vue and layouts/admin.vue, then specify layout in each page's definePageMeta -> Option A

5. Quick Check:

   Multiple layouts + definePageMeta = correct [OK]

Hint: Use multiple layouts and definePageMeta per page [OK]

Common Mistakes:

• Trying to import layouts manually in pages
• Not using definePageMeta for layout selection
• Misusing plugins for layout switching