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.