Nuxt project structure in Vue - Mini Project: Build & Apply

Understanding Nuxt Project Structure

📖 Scenario: You are starting a new Nuxt 3 project to build a simple blog website. To organize your work, you need to set up the basic project structure with the main folders and files Nuxt uses.

🎯 Goal: Build the initial Nuxt project structure by creating the pages folder with a homepage file, add a components folder for reusable parts, and set up the nuxt.config.ts file for configuration.

📋 What You'll Learn

Create a pages folder with an index.vue file containing a basic template

Create a components folder with a Header.vue component file

Add a nuxt.config.ts file with the default export of a Nuxt config object

Use the Nuxt 3 recommended file and folder names exactly

💡 Why This Matters

🌍 Real World

Nuxt is used to build fast, SEO-friendly Vue websites and apps with automatic routing and server-side rendering.

💼 Career

Understanding the Nuxt project structure is essential for frontend developers working with Vue and Nuxt to build modern web applications.

1

Create the pages folder and homepage

Create a folder named pages and inside it create a file named index.vue with a <template> containing a <h1> with the text Welcome to Nuxt.

Vue

# Create the pages folder and index.vue file with a template
# Your code here

Hint

Remember, the pages/index.vue file is the homepage in Nuxt.

2

Add the components folder and Header component

Create a folder named components and inside it create a file named Header.vue with a <template> containing a <header> element with the text My Blog Header.

Vue

  Welcome to Nuxt


# Create components/Header.vue with a header element
# Your code here

Hint

The components folder holds reusable Vue components.

3

Create the nuxt.config.ts file

Create a file named nuxt.config.ts in the root folder with a default export of a Nuxt config object using defineNuxtConfig({}).

Vue

  Welcome to Nuxt




  My Blog Header


# Create nuxt.config.ts with default export
# Your code here

Hint

The nuxt.config.ts file configures your Nuxt app globally.

4

Use the Header component in the homepage

In pages/index.vue, import the Header component from ~/components/Header.vue in a <script setup> block and add it inside the <template> above the <h1>.

Vue

  
  Welcome to Nuxt



// Import Header component
// Your code here

Hint

Use import and include the component tag in the template.

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