Nuxt project structure in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the pages/ directory in a Nuxt project?

The pages/ directory holds Vue components that automatically become routes in the app. Each file corresponds to a URL path, making navigation simple without manual route setup.

beginner

What role does the components/ folder play in a Nuxt project?

The components/ folder stores reusable Vue components like buttons or headers. These components can be used inside pages or other components to keep code organized and avoid repetition.

intermediate

What is the nuxt.config.ts file used for?

This file configures the Nuxt app settings like plugins, modules, global CSS, and build options. It controls how the app behaves and what features are enabled.

intermediate

Explain the purpose of the store/ directory in Nuxt.

The store/ directory contains Vuex store files for managing app-wide state. It helps keep data consistent across pages and components.

intermediate

What is the difference between layouts/ and pages/ directories?

layouts/ holds Vue components that define the common structure (like header, footer) shared by multiple pages. pages/ contains components that represent individual pages or routes.

Which folder in a Nuxt project automatically creates routes based on its files?

A pages/

B components/

C layouts/

D store/

The pages/ folder files become routes automatically in Nuxt.

Where would you place a reusable button component in a Nuxt project?

A store/

B pages/

C layouts/

D components/

Reusable UI parts go inside the components/ folder.

What file controls global settings like plugins and CSS in Nuxt?

A index.vue

B nuxt.config.ts

C main.js

D package.json

nuxt.config.ts is the main configuration file for Nuxt.

Which directory manages shared app state in Nuxt?

A store/

B pages/

C layouts/

D components/

The store/ directory contains Vuex files for state management.

What is the main difference between layouts/ and pages/ folders?

A layouts/ holds routes, pages/ holds components

B layouts/ holds reusable UI parts, pages/ holds state files

C layouts/ defines common page structure, pages/ defines individual pages

D layouts/ holds config files, pages/ holds plugins

layouts/ defines common structure like headers, pages/ defines each page.

Describe the main folders in a Nuxt project and their roles.

Think about where you put pages, buttons, headers, app state, and settings.

Explain how Nuxt uses the pages/ directory to simplify routing.

Imagine creating a new page just by adding a file.