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.

Practice

1. In a typical Vue project, where do you place your main application code like components and views?

easy

A. Inside the public/ folder

B. In the root project folder

C. Inside the src/ folder

D. Inside the node_modules/ folder

Solution

1. Step 1: Understand folder roles in Vue projects

   The src/ folder is designed to hold your app's source code, including components and views.

2. Step 2: Identify correct folder for main code

   The public/ folder holds static files like index.html, not app code.

3. Final Answer:

   Inside the src/ folder -> Option C

4. Quick Check:

   App code = src/ folder [OK]

Hint: Remember: src/ is for source code, public/ for static files [OK]

Common Mistakes:

• Confusing public/ with src/ folder
• Putting components in public/ folder
• Placing code in node_modules/ folder

2. Which file in a Vue project typically serves as the entry point for the app?

easy

A. README.md in the root folder

B. index.html inside src/

C. package.json in the root folder

D. main.js or main.ts inside src/

Solution

1. Step 1: Identify entry point files in Vue

   The entry point is usually a JavaScript or TypeScript file named main.js or main.ts inside src/.

2. Step 2: Differentiate from other files

   index.html is a static file in public/, package.json manages dependencies, and README.md is documentation.

3. Final Answer:

   main.js or main.ts inside src/ -> Option D

4. Quick Check:

   Entry point = main.js/ts in src/ [OK]

Hint: Entry point is main.js or main.ts inside src/ [OK]

Common Mistakes:

• Choosing index.html as entry point
• Confusing package.json with entry point
• Selecting README.md as app start file

3. Given this Vue project structure snippet:

public/
  index.html
src/
  components/
    HelloWorld.vue
  App.vue
  main.js

Which file is responsible for mounting the Vue app to the HTML page?

medium

A. App.vue

B. main.js

C. index.html

D. HelloWorld.vue

Solution

1. Step 1: Understand mounting in Vue

   The main.js file usually creates the Vue app instance and mounts it to an element in index.html.

2. Step 2: Identify roles of other files

   App.vue is the root component, index.html is the static HTML, and HelloWorld.vue is a child component.

3. Final Answer:

   main.js -> Option B

4. Quick Check:

   Mounting happens in main.js [OK]

Hint: Mounting code is in main.js, not components or HTML [OK]

Common Mistakes:

• Thinking App.vue mounts the app
• Choosing index.html as mounting file
• Confusing child components with mounting logic

4. You see this error when running your Vue app:
Cannot find module './components/HelloWorld.vue'
What is the most likely cause related to project structure?

medium

A. The components folder is missing inside src/

B. The public/ folder is empty

C. The index.html file is inside src/

D. The main.js file is missing in the root folder

Solution

1. Step 1: Analyze the error message

   The error says it cannot find the module ./components/HelloWorld.vue, meaning the import path is broken.

2. Step 2: Check folder structure relevance

   If the components folder is missing inside src/, the import will fail. Other options do not affect this import.

3. Final Answer:

   The components folder is missing inside src/ -> Option A

4. Quick Check:

   Missing components folder breaks imports [OK]

Hint: Missing folder causes import errors, check src/components/ [OK]

Common Mistakes:

• Ignoring folder location for components
• Thinking public/ folder affects imports
• Assuming main.js must be in root folder

5. You want to add a global CSS file to your Vue project that should be included in every component. Where should you place this CSS file and how should you include it?

hard

A. Place it in src/assets/ and import it in main.js

B. Place it in public/ and link it in App.vue

C. Place it in src/components/ and import it in each component

D. Place it in the root folder and import it in index.html

Solution

1. Step 1: Identify best folder for global assets

   The src/assets/ folder is used for styles and images that are part of the app source.

2. Step 2: Include global CSS properly

   Importing the CSS file in main.js ensures it loads once and applies globally to all components.

3. Final Answer:

   Place it in src/assets/ and import it in main.js -> Option A

4. Quick Check:

   Global CSS in src/assets, imported in main.js [OK]

Hint: Global CSS goes in src/assets and imported in main.js [OK]

Common Mistakes:

• Linking CSS in App.vue instead of main.js
• Putting CSS in public/ folder without import
• Importing CSS separately in every component