Nuxt project structure in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the role of the pages directory in a Nuxt project?

In a Nuxt project, the pages directory is special. What does Nuxt do with the files inside this folder?

A It contains server middleware functions for API handling.

B It automatically generates routes based on the file names inside <code>pages</code>.

C It holds configuration files for Nuxt plugins.

D It stores global CSS styles for the entire project.

💡 Hint

Think about how Nuxt creates URLs for your app automatically.

The pages directory is used by Nuxt to create routes automatically. Each Vue file inside pages becomes a route in the app.

📝 Syntax

intermediate

Which folder in Nuxt is used to store reusable Vue components?

In a Nuxt project, where should you place Vue components that you want to reuse across pages?

A <code>plugins</code> directory

B <code>layouts</code> directory

C <code>pages</code> directory

D <code>components</code> directory

💡 Hint

Think about where you keep small building blocks used in many places.

The components directory is for reusable Vue components that can be used inside pages or layouts.

🔧 Debug

advanced

Why does placing a Vue file inside layouts affect the app's appearance?

Consider this: You add a new Vue file inside the layouts folder and set it as default layout. What effect does this have?

A It replaces the <code>components</code> folder content with the layout content.

B It automatically registers new routes for each layout file.

C It changes the overall page structure by wrapping pages with the layout's template.

D It disables the <code>pages</code> directory routing.

💡 Hint

Think about how layouts work in websites to keep a consistent look.

Layouts in Nuxt wrap around page content to provide consistent headers, footers, or sidebars. Changing the default layout changes the app's overall look.

❓ state_output

advanced

What happens if you place a file named index.vue inside pages/blog?

In a Nuxt project, you add pages/blog/index.vue. What URL path will this file correspond to?

A /blog

B /blog/index

C /index/blog

D /

💡 Hint

Remember how index.vue files map to folder root paths.

In Nuxt, index.vue inside a folder maps to the folder's root path. So pages/blog/index.vue maps to /blog.

🧠 Conceptual

expert

Which Nuxt directory is best suited for placing server-side API route handlers?

You want to add backend API routes inside your Nuxt project. Which directory should you use to place these server-side handlers?

A server/api

B pages/api

C plugins/api

D components/api

💡 Hint

Think about where Nuxt expects server code separate from frontend pages.

Nuxt uses the server/api directory to define backend API routes that run on the server side.

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