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.