Vue Academy · Lesson

Generated Project Structure

Tour the files and folders a Vue project generates.

Generated Project Structure is a free Vue Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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.

Frequently asked questions

Is the “Generated Project Structure” lesson free?

Yes — the full text of “Generated Project Structure” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.

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