Vue project structure walkthrough - Deep Dive

Overview - Vue project structure walkthrough

What is it?

A Vue project structure is the organized way files and folders are arranged in a Vue.js application. It helps developers find, manage, and update code easily. This structure includes folders for components, assets, views, and configuration files. Understanding it makes building and scaling Vue apps simpler.

Why it matters

Without a clear project structure, code becomes messy and hard to maintain, especially as the app grows. Developers waste time searching for files or fixing bugs caused by confusion. A good structure saves time, reduces errors, and helps teams work together smoothly.

Where it fits

Before learning Vue project structure, you should know basic JavaScript and Vue component concepts. After this, you can learn about Vue Router for navigation and Vuex or Pinia for state management, which fit into the project structure.

Mental Model

Core Idea

A Vue project structure is like a well-organized toolbox where every tool has its place, making building and fixing things faster and easier.

Think of it like...

Imagine a kitchen where utensils, ingredients, and appliances are stored in labeled drawers and shelves. When cooking, you quickly find what you need without searching everywhere. A Vue project structure works the same way for code.

┌─────────────────────────────┐
│ Vue Project Root            │
├───────────────┬─────────────┤
│ src           │ public      │
│ ├─ assets     │ ├─ index.html│
│ ├─ components│             │
│ ├─ views     │             │
│ ├─ router    │             │
│ ├─ store     │             │
│ └─ App.vue   │             │
├───────────────┴─────────────┤
│ package.json               │
│ vite.config.js             │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding the Project Root

Concept: Learn what the main folders and files at the root of a Vue project are for.

The project root is the main folder containing everything. It usually has a 'src' folder for source code, a 'public' folder for static files like the main HTML page, and configuration files like 'package.json' which lists dependencies and scripts. This root is the starting point for the app.

Result

You can identify where the main code lives and where static files are placed.

Knowing the root layout helps you quickly find where to add or change code and understand how the app is built.

2

Foundation

Exploring the src Folder

Concept: Discover the purpose of the 'src' folder and its common subfolders.

Inside 'src', you find the heart of the app: 'components' for reusable UI parts, 'views' for pages or screens, 'assets' for images and styles, 'router' for navigation setup, and 'store' for state management. The main App.vue file is also here, acting as the root component.

Result

You understand where to put new UI parts, pages, and resources.

Recognizing these folders helps organize code logically and supports teamwork by clear separation of concerns.

3

Intermediate

Role of the public Folder

Concept: Learn how the 'public' folder serves static files and its difference from 'src/assets'.

The 'public' folder holds files that do not get processed by Vue or build tools, like 'index.html' which is the main HTML page. Files here are copied as-is to the final build. In contrast, 'src/assets' files are processed and can be imported in code.

Result

You know where to place static files that must remain unchanged.

Understanding this separation prevents mistakes like putting dynamic files in 'public' where they won't update.

4

Intermediate

Config Files and Their Purpose

Concept: Identify key configuration files and what they control in the project.

Files like 'package.json' manage dependencies and scripts, 'vite.config.js' or 'vue.config.js' configure the build tool, and '.env' files hold environment variables. These files control how the app builds, runs, and connects to services.

Result

You can customize and troubleshoot the app setup.

Knowing config files empowers you to adapt the project to different needs and environments.

5

Intermediate

Organizing Components and Views

🤔Before reading on: Do you think components and views are the same or different? Commit to your answer.

Concept: Understand the difference between components and views and how to organize them.

Components are small, reusable UI pieces like buttons or cards. Views are larger, page-level components representing screens or routes. Keeping them separate helps clarity and reuse. Components go in 'components', views in 'views'.

Result

You can structure UI code for better reuse and navigation.

Separating components and views reduces duplication and makes the app easier to scale.

6

Advanced

Integrating Router and Store Folders

🤔Before reading on: Do you think router and store code belongs inside components or separate folders? Commit to your answer.

Concept: Learn how routing and state management fit into the project structure.

The 'router' folder holds files that define app navigation paths and link views to URLs. The 'store' folder contains state management logic to share data across components. Keeping these separate from UI code keeps concerns clear.

Result

You can manage navigation and shared data cleanly.

Isolating router and store code prevents tangled logic and eases maintenance.

7

Expert

Customizing and Scaling Project Structure

🤔Before reading on: Do you think the default Vue structure fits all projects perfectly? Commit to your answer.

Concept: Explore how to adapt the structure for large or complex projects.

As projects grow, you might split 'components' into subfolders by feature, add 'composables' for reusable logic, or separate 'services' for API calls. You can also customize config files for different environments. This flexibility helps keep code manageable.

Result

You can design a project structure that fits your app's size and team.

Knowing when and how to customize structure avoids chaos in big projects and supports team collaboration.

Under the Hood

When you run a Vue app, the build tool (like Vite) reads the project structure to find source files, process them, and bundle them into optimized code for the browser. The 'src' folder files are compiled from Vue components and JavaScript into browser-ready code. Static files in 'public' are copied directly. The router and store files configure navigation and shared data at runtime.

Why designed this way?

Vue's structure is designed to separate concerns clearly: UI parts, pages, assets, and logic live in distinct places. This modularity supports maintainability and scalability. The separation between 'src' and 'public' ensures build tools can optimize code while preserving static assets. This design evolved from community best practices and aims to balance simplicity and flexibility.

┌─────────────────────────────┐
│        Vue Project          │
├─────────────┬───────────────┤
│ Build Tool  │               │
│ (Vite/Webpack)              │
│  ├─ Reads src folder        │
│  │   ├─ Compiles components │
│  │   ├─ Bundles JS & CSS    │
│  ├─ Copies public folder    │
│  │   └─ Static files        │
│  └─ Uses config files       │
│      └─ Controls build      │
└─────────────┴───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Is the 'public' folder processed by Vue's build tool? Commit yes or no.

Common Belief: The 'public' folder files are processed and optimized by Vue's build tool like other source files.

Reality: Files in 'public' are copied as-is without processing or optimization.

Why it matters: Putting dynamic or import-needed files in 'public' means they won't update or be optimized, causing bugs or performance issues.

Quick: Are components and views interchangeable in Vue projects? Commit yes or no.

Common Belief: Components and views are the same and can be placed anywhere in the project.

Reality: Components are reusable UI pieces, while views represent pages or routes; they should be organized separately.

Why it matters: Mixing them causes confusion, harder navigation setup, and less reusable code.

Quick: Does the default Vue project structure fit all project sizes perfectly? Commit yes or no.

Common Belief: The default Vue structure is perfect for every project and should never be changed.

Reality: Large or complex projects often need customized structures with subfolders and added layers.

Why it matters: Sticking rigidly to defaults can lead to messy code and slow development as the app grows.

Quick: Should configuration files be edited only by build tools? Commit yes or no.

Common Belief: Developers should never touch config files like 'vite.config.js' or 'package.json'.

Reality: Developers often customize these files to add features, fix bugs, or adapt to environments.

Why it matters: Avoiding config files limits the app's flexibility and can block needed customizations.

Expert Zone

1

Some teams organize components by feature rather than type, grouping all files related to a feature together for better modularity.

2

Using a 'composables' folder for reusable logic functions (composables) helps separate UI from business logic cleanly.

3

Config files can be extended with plugins and environment-specific settings to optimize builds for production or development.

When NOT to use

The default Vue project structure is not ideal for very large enterprise apps with hundreds of components; in such cases, a domain-driven or feature-based folder structure is better. Also, for simple static sites, a full Vue structure might be overkill; plain HTML/CSS or simpler frameworks could be better.

Production Patterns

In real projects, teams often create subfolders inside 'components' by feature or UI type, use 'views' strictly for route components, keep 'router' and 'store' logic modularized, and maintain separate config files for staging and production environments. CI/CD pipelines use these structures to automate builds and deployments.

Connections

Modular Programming

Vue project structure applies modular programming principles by separating code into reusable, independent parts.

Understanding modular programming helps grasp why Vue encourages components and views separation, improving maintainability.

File System Organization

Both Vue project structure and general file system organization rely on clear hierarchy and naming for easy navigation.

Good file organization skills outside programming translate directly to better project structures and developer productivity.

Urban City Planning

Like city planning zones (residential, commercial, industrial), Vue project folders separate concerns for efficient function.

Seeing project structure as city zoning helps appreciate the need for clear boundaries and roles to avoid chaos.

Common Pitfalls

#1 Placing dynamic Vue components inside the public folder.

Wrong approach:

public/MyComponent.vue

Correct approach:

src/components/MyComponent.vue

Root cause:

Misunderstanding that 'public' is only for static files, not processed by Vue or build tools.

#2 Mixing views and components in the same folder without distinction.

Wrong approach:

src/components/Header.vue, src/components/HomeView.vue, src/components/Footer.vue

Correct approach:

src/components/Header.vue, src/views/HomeView.vue, src/components/Footer.vue

Root cause:

Not recognizing the different roles of reusable UI parts (components) versus page-level views.

#3 Editing config files without understanding their purpose, causing build errors.

Wrong approach:

Random changes in vite.config.js without backup or knowledge.

Correct approach:

Careful, documented edits to vite.config.js with testing after changes.

Root cause:

Lack of knowledge about build tool configuration and its impact.

Key Takeaways

A clear Vue project structure organizes code into folders like src, public, components, and views for easy navigation and maintenance.

The src folder holds all source code, while public contains static files copied directly to the build output.

Separating components (reusable UI parts) from views (pages) helps keep the app modular and scalable.

Config files control how the app builds and runs, and understanding them allows customization and troubleshooting.

As projects grow, adapting the structure with subfolders and new layers keeps code manageable and supports teamwork.

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