Vue project structure walkthrough - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the role of the 'src' folder in a Vue project

In a typical Vue 3 project, what is the main purpose of the 'src' folder?

A It contains the source code files like components, views, and main app setup.

B It stores the compiled production files ready for deployment.

C It holds configuration files like package.json and vite.config.js.

D It contains static assets like images and fonts only.

💡 Hint

Think about where you write your Vue components and main app logic.

The 'src' folder is where you write your Vue components, views, and main app setup files like main.js or main.ts. It is the core source code folder.

❓ component_behavior

intermediate

Behavior of components inside the 'components' folder

What is the typical use of the 'components' folder inside the 'src' directory in a Vue project?

A It holds configuration files for Vue Router.

B It stores reusable Vue components that can be used across multiple views.

C It is used to store CSS stylesheets only.

D It contains only the root App.vue file.

💡 Hint

Think about components you want to reuse in different parts of your app.

The 'components' folder is for reusable Vue components that can be imported and used in different views or other components.

📝 Syntax

advanced

Correct import path for a component in Vue 3

Given a Vue project structure where src/components/Button.vue exists, which import statement correctly imports this Button component into src/views/Home.vue?

A import Button from '../components/Button.vue';

B import Button from './components/Button.vue';

C import Button from '../../components/Button.vue';

D import Button from '/components/Button.vue';

💡 Hint

Consider the relative path from 'views' folder to 'components' folder.

The 'views' folder is inside 'src', so to reach 'components' from 'views', you go up one level with .. then into 'components'.

🔧 Debug

advanced

Identifying the cause of a missing component error

You see the error 'Failed to resolve component: Navbar' when running your Vue app. Your project structure has src/components/Navbar.vue and you imported it in src/App.vue with import Navbar from './components/Navbar.vue'. What is the most likely cause?

A The import path should be './component/Navbar.vue' (missing 's').

B The Navbar.vue file must be inside the 'views' folder, not 'components'.

C You forgot to register the Navbar component in the components option or script setup.

D Vue does not support importing components with .vue extension.

💡 Hint

Check if you declared the component properly after importing.

Importing a component is not enough; you must also register it in the components option or use <script setup> to make it available in the template.

❓ lifecycle

expert

Order of lifecycle hooks in a Vue 3 component

What is the correct order of these Vue 3 lifecycle hooks when a component is created and mounted? Options list the hooks in order.

A 3, 1, 2, 4

B 2, 1, 3, 4

C 1, 3, 2, 4

D 1, 2, 3, 4

💡 Hint

Remember the lifecycle starts before creation and ends after mounting.

The Vue 3 lifecycle order is: beforeCreate, created, beforeMount, then mounted.