LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 713 min read

Understanding Project Structure

Tour the folders and files a Vue 3 + Vite project generates, and what each one is responsible for.

Top-Level Layout

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

Unlike a typical React project, index.html lives at the project root, not inside public/ — Vite treats it as the actual entry point it processes and injects your bundled script into.

Inside src/

FilePurpose
main.jsThe JavaScript entry point — creates the Vue app and mounts it to the DOM.
App.vueThe root component, rendered inside the mounted element.
components/Reusable components you build and import into App.vue or elsewhere.
assets/Images, fonts, and other static files imported directly into components.
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';


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

The .vue Single-File Component

Every Vue component typically lives in its own .vue file — called a Single-File Component (SFC) — containing three blocks: <template> for markup, <script> for logic, and <style> for CSS, all scoped to that one component.

<template>
  <h1>{{ message }}</h1>
</template>


<script setup>
const message = 'Hello, Vue!';
</script>


<style scoped>
h1 { color: #42b883; }
</style>
One File, Three Concerns

Keeping template, script, and style together in one file — rather than splitting them across separate files like some other frameworks — is one of Vue's most distinctive design choices.

Common Beginner Mistakes

Forgetting the scoped attribute on <style>

Without scoped, styles apply globally to the whole page, not just this component — often causing unintended style leaks.

Putting large images inside src/components instead of src/assets or public/

Keep static assets organized in assets/ (processed by Vite) or public/ (served as-is) rather than mixed in with component code.

FAQs

No — Vue also supports defining components in plain JavaScript, but .vue files are the standard, recommended approach for nearly all projects.

Files in assets/ are imported and processed (optimized, hashed) by Vite; files in public/ are copied as-is and referenced by absolute path.

Summary

The .vue Single-File Component is the core building block of a Vue project, combining template, logic, and style in one place. Next, you'll dig into the template syntax itself.

Next Lesson →

Template Syntax