Vue Project Structure

Ye Min Ko
Learn Vue
Published in
3 min readDec 6, 2024
Photo by Bradley Pritchard Jones on Unsplash

Prerequisites

  • Make sure you have installed Node.js version 18.3+
  • You need to create a Vue app by following this article.

Project Structure

When you create a Vue app, you will get a folder that includes files and folders similar to the ones below:

Vue project folder

Let’s Explore!

Not all files and folders require constant interaction, but here is a list of those you need to know when developing a Vue app:

src folder

The src folder is the main folder where all the application logic is implemented. You'll primarily interact with this folder throughout the entire Vue app development process.

src folder

main.ts

This is the starting point when you run a Vue app. It includes a function that initializes the application.

App.vue

This is the main component that sits on top of other components.

assets folder

This folder stores resources like images, styles, and fonts used in the project, processed by the build tool before inclusion in the final build.

components folder

All application logic components are stored in this folder.

router folder

Routes for the entire app are set up in this folder. (Vue Router Folder)

stores folder

All of the application state management is stored in this folder. (Pinia Folder)

views folder

This folder holds components for different pages, usually mapped to routes.

Other files

The following files do not need to be touched frequently unless you need to configure or add new plugins to your application.

Other project files

index.html

The main HTML template where the Vue app is mounted.

vite.config.ts

This file configures Vite with project settings, plugins, and optimizations.

tsconfig.json

This file configures the TypeScript compiler options for the project.

package.json

This file manages project dependencies, scripts, and metadata.

Other Folders

There are a few things left. They are the following folders.

Other project folders

public folder

Contains static files (like icons, and other resources) that are directly served by the server without processing.

dist folder

This folder contains the final, bundled, and optimized output of the project, ready for deployment.

.vscode folder

This folder stores project-specific settings for Visual Studio Code.

node_modules folder

This folder contains all the installed dependencies for the project.

Conclusion

This is a brief explanation of the project structure. You should start developing the application with what you know and explore more as you need to learn more.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Ye Min Ko
Ye Min Ko

Written by Ye Min Ko

Dedicated to crafting digital experiences, always learning, and thriving in peaceful, focused spaces.

No responses yet

Write a response