Vue project structure walkthrough

Introduction

A Vue project has a folder setup that helps organize your code and files clearly. This makes it easier to build and maintain your app.

Starting a new Vue app and want to know where to put your files

Trying to find where components or styles are in a Vue project

Wanting to add new features without mixing up your code

Learning how Vue apps are organized for better teamwork

Debugging or improving your Vue app structure

Syntax

Vue

my-vue-project/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── index.html
├── package.json
└── vite.config.js

src/ is where most of your app code lives.

public/ holds static files like favicon.ico that are served as-is without processing.

Examples

Assets hold images or styles. Components are reusable parts. Views are pages or screens.

Vue

src/
├── assets/
│   └── logo.png
├── components/
│   └── HelloWorld.vue
├── views/
│   └── HomeView.vue
├── App.vue
└── main.js

This is the main HTML file (in the project root) loaded by the browser. Vite processes it and injects your app here.

Vue

index.html

These files manage dependencies and build settings for your Vue app.

Vue

package.json
vite.config.js

Sample Program

This is a simple Vue component using the project structure. It loads an image from assets and a component from components folder.

Vue

<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Vue!" />
  </div>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

Important Notes

Keep your components small and focused for easier reuse.

Use the views folder for main pages to keep routing clear.

Public folder files are not processed by the build tool, so put only static files there.

Summary

Vue projects have a clear folder structure to organize code and assets.

src/ holds your app code, index.html is in the root, public/ holds static files.

Following this structure helps keep your app clean and easy to work on.