Vue Academy · Lesson

Generated Project Structure

Tour the files and folders a Vue project generates.

Lesson 2 of 313 steps

Generated Project Structure is a free Vue Academy lesson on CoddyKit. This is lesson 2 of 3. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 3 lessons in total.

A Tour of the Project

A scaffolded Vue project has a predictable folder layout.

src/ your application source code
public/ static assets served as-is
package.json dependencies and scripts
index.html the page Vue mounts into

Knowing where things live helps you navigate quickly.

The src Folder

The src/ folder holds everything you write.

src/
  assets/        # images, fonts, global CSS
  components/    # reusable .vue components
  App.vue        # root component
  main.js        # application entry point

main.js Entry Point

main.js is where the app boots. It creates the app and mounts it.

import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"

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

App.vue Root Component

App.vue is the root component. Every other component lives inside it.

<template>
  <header>
    <h1>My App</h1>
  </header>
  <main>
    <HelloWorld msg="Welcome" />
  </main>
</template>

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

The components Folder

The components/ folder holds reusable Single-File Components.

Each .vue file is one component
Import them where you need them
Organize into subfolders as the app grows

The public Folder

The public/ folder holds static files copied verbatim into the build output.

Files here are not processed by the bundler
Use it for favicons, robots.txt, or fixed assets
Reference them with absolute paths from the root

index.html Mount Point

index.html is the single HTML page. It contains the mount target.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

package.json

package.json describes your project and its dependencies.

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

package.json Scripts

The scripts section defines commands you run with npm run.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

assets vs public

Two ways to store static files:

src/assets/ processed by the bundler, hashed for caching, imported in code
public/ copied as-is, referenced by fixed path

Use assets for things you import, public for things that must keep a stable URL.

How It Fits Together

The flow when the app loads:

Browser loads index.html
It runs main.js via a module script tag
main.js mounts App.vue into #app
App.vue renders child components

Quick Check

Test your knowledge of the project structure.

Answer it in the interactive lesson

Recap: Project Structure

You explored a Vue project layout:

src/ holds your code
main.js boots the app
App.vue is the root component
components/ holds reusable parts
public/ and index.html serve static content
package.json defines deps and scripts

Next: configuring the CLI and adding plugins.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

Is the “Generated Project Structure” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “Generated Project Structure”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 3 lessons in total.

What will I learn in “Generated Project Structure”?

Tour the files and folders a Vue project generates. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 3.

How long does the “Generated Project Structure” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy