Nuxt project structure in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define the main folder where pages are stored in a Nuxt project.

Vue

The main folder for pages in Nuxt is called '[1]'.

Drag options to blanks, or click blank then click option'

Aassets

Bcomponents

Cpages

Dlayouts

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'components' instead of 'pages' because both hold Vue files.

In Nuxt, the pages folder holds all the page components that define routes automatically.

2fill in blank

medium

Complete the code to specify the folder where reusable UI parts are stored in Nuxt.

Vue

Reusable UI parts like buttons or headers go inside the '[1]' folder.

Drag options to blanks, or click blank then click option'

Acomponents

Bplugins

Cstatic

Dpages

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'components' with 'pages' or 'plugins' folders.

The components folder contains reusable Vue components used across pages.

3fill in blank

hard

Fix the error in the folder name that holds static files like images or favicon in Nuxt.

Vue

Static files are placed in the '[1]' folder.

Drag options to blanks, or click blank then click option'

Aassets

Bstatic

Cpublic

Dstatics

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'statics' or 'public' which are incorrect folder names in Nuxt.

The correct folder name for static files in Nuxt is static. It serves files directly without processing.

4fill in blank

hard

Fill both blanks to complete the Nuxt folder names for global styles and layout templates.

Vue

Global CSS files go in the '[1]' folder, and layout templates go in the '[2]' folder.

Drag options to blanks, or click blank then click option'

Aassets

Bcomponents

Clayouts

Dpages

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'components' with 'layouts' or 'assets'.

Global styles are stored in assets, while reusable page structures are in layouts.

5fill in blank

hard

Fill all three blanks to complete the Nuxt folder names for plugins, middleware, and server API routes.

Vue

Custom plugins go in '[1]', middleware files go in '[2]', and server API routes go in '[3]'.

Drag options to blanks, or click blank then click option'

Aplugins

Bmiddleware

Cserver

Dapi

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'api' with 'server' folder for backend routes.

Plugins extend app features, middleware runs before pages, and server folder holds backend API routes in Nuxt 3.

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