The Project, File by File

A generated project has more files than you will ever edit. Knowing which is which keeps you from changing a file that is rewritten on every build.

The entry point is index.html

It sits in the project root, not in public/. Vite treats it as source: it reads the file, follows <script type="module" src="/src/main.ts"> and serves whatever that import graph needs. The file holds one empty element, usually <div id="app"></div>. You edit it to change the page title, the language attribute or a meta tag.

main.ts starts the application

createApp(App) creates an application instance from the root component and .mount('#app') renders it into that empty element. Global CSS is imported at the top. Plugins such as a router are registered here with app.use(), which Stage 3 covers.

src, public and the generated rest

src/App.vue is the root component and src/components/ holds the others. src/assets/ holds files you import from code: Vite processes them, adds a content hash and rewrites the URL. public/ holds files served unchanged at the site root, for a favicon.ico or a robots.txt. vite.config.ts configures the build, including the Vue plugin that compiles .vue files and the @ alias for src. The tsconfig files and env.d.ts exist for type checking. node_modules/ and dist/ are generated; leave them alone and keep both out of version control.

<script setup lang="ts">
const appName = 'Dashboard'
</script>

<template>
  <header>
    <img src="./assets/logo.svg" width="48" height="48" alt="" />
    <img src="/favicon.ico" width="16" height="16" alt="" />
    <h1>{{ appName }}</h1>
  </header>
</template>

<style scoped>
header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
</style>

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dashboard</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

// src/main.ts
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

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

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})