Vue Structure

Understand the folders and files generated by a Vite-powered Vue project.

Overview

A Vue project separates source code, static files, dependencies, and tooling configuration into purposeful locations. Understanding this structure helps you find the right place for components, images, styles, and application logic while keeping the project maintainable as it grows.

Key concepts

  • src contains the application source
  • App.vue is the root component
  • main.js creates and mounts Vue
  • components contains reusable interface pieces

Why is project structure important?

A house separates rooms according to their purpose. A Vue project similarly separates source code, static files, dependencies, and configuration so development and teamwork remain organized.

Typical Vue project structure

Output
my-vue-app/
├── node_modules/
├── public/
├── src/
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
└── README.md

The node_modules folder

node_modules contains Vue and all other packages installed by npm. Do not edit or commit its contents manually. If it is removed, recreate it from package.json and the lock file.

Output
npm install

The public folder

public stores static files that should be copied to the production build without Vite processing them, such as a robots.txt file, fixed-name icons, PDFs, or other externally referenced assets.

The src folder

src is the heart of the application and contains most files you edit during development.

Output
src/
├── assets/
├── components/
├── App.vue
└── main.js

assets

assets stores imported CSS, images, fonts, and SVG files. Because these files pass through Vite, they can be transformed, hashed, and optimized during the build.

components

components contains reusable Vue Single-File Components. Splitting the interface into focused pieces avoids one large, difficult-to-maintain file.

Output
components/
├── Header.vue
├── Footer.vue
├── ProductCard.vue
└── BaseButton.vue

The App.vue file

App.vue is the root component. It usually assembles the main layout and renders other components or the current routed view.

Vue SFC
<template>
  <h1>Welcome to Vue.js</h1>
</template>

The main.js file

main.js is the application entry point. It imports the root component, creates the Vue app, installs global plugins when needed, and mounts the app.

JavaScript
import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

The index.html file

A client-side Vue application normally starts from one index.html file containing the element where Vue mounts.

HTML
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

The package.json file

package.json records project metadata, npm scripts, and dependencies. It enables commands such as npm run dev and npm run build.

The package-lock.json file

The lock file records the exact dependency versions installed so developers and automated builds can reproduce the same dependency tree. It should normally be committed to version control.

The vite.config.js file

vite.config.js customizes the development server and production build. Beginners often leave it unchanged; larger projects may add aliases, plugins, proxies, or build options.

How everything works together

Output
Browser
   ↓
index.html
   ↓
main.js
   ↓
App.vue
   ↓
Child components

Growing the src structure

Projects commonly add views, router, stores, composables, services, and test folders as features require them.

Output
src/
├── assets/
├── components/
├── composables/
├── router/
├── services/
├── stores/
├── views/
├── App.vue
└── main.js

Real-life example

An online store can use separate navigation, product list, product card, cart, and footer components. Each piece stays focused and can be reused wherever the interface needs it.

Best practices

  • Use meaningful file and component names
  • Keep components small and focused
  • Store assets in the appropriate folder
  • Group related features together as the application grows
  • Do not modify node_modules
  • Avoid placing the entire application in App.vue
  • Commit package-lock.json

Tips for beginners

  • Explore the generated files before deleting them
  • Trace index.html → main.js → App.vue
  • Practice importing one child component
  • Learn the difference between public and assets
  • Start simple and add folders only when needed

Key takeaways

  • Each project folder has a focused purpose
  • src contains application code
  • components stores reusable UI
  • App.vue is the root component
  • main.js starts and mounts Vue
  • public bypasses asset processing
  • package.json manages scripts and dependencies
  • Clear structure supports scalable and maintainable applications
Let's learn with DevBrainBox AI