Setting Up a Vue Project — Vue Tutorial

Almost every modern Vue project starts with Vite, a build tool that gives you fast startup and instant hot-module reloading during development. The official way to scaffold a project uses create-vue:

npm create vue@latest

This launches an interactive prompt asking which extras you want — TypeScript, Vue Router, Pinia, ESLint, and so on. For following along with this course, it's enough to accept the defaults and skip the extras for now; later lessons on Vue Router and Pinia will show you how to add them to an existing project anyway.

Once it finishes, install dependencies and start the dev server:

cd my-vue-app
npm install
npm run dev

Vite prints a local URL (usually http://localhost:5173) with your app already running.

What got generated

A default project looks roughly like this:

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

index.html is the real entry point of the page — not a template Vue generates, but an actual HTML file with a <div id="app"> and a <script type="module" src="/src/main.js"> tag. Vite serves it directly.
src/main.js creates the Vue application and mounts it onto that div.
src/App.vue is the root component — a .vue file, called a Single-File Component (SFC), which bundles a component's template, script, and styles in one file.
src/components/ is where you'll add the rest of your components as the app grows.

The entry point

// src/main.js
import { createApp } from "vue";
import App from "./App.vue";

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

createApp takes your root component and returns an application instance; .mount("#app") tells Vue to take over the <div id="app"> element in index.html and render App.vue (and everything it contains) inside it. This is the one place in a typical project where Vue talks directly to the raw DOM — everything else is templates and components.

Why Vite, specifically

Vite serves your source files over native ES modules during development instead of bundling everything upfront, which is why the dev server starts almost instantly even on large projects. For production, npm run build still bundles and optimizes everything with Rollup under the hood, so you get fast builds without sacrificing a tuned production bundle.

The rest of this course works inside App.vue and new files under src/components/, so keep this dev server running as you go.

What got generated

A default project looks roughly like this:

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

index.html is the real entry point of the page — not a template Vue generates, but an actual HTML file with a <div id="app"> and a <script type="module" src="/src/main.js"> tag. Vite serves it directly.

src/main.js creates the Vue application and mounts it onto that div.

src/App.vue is the root component — a .vue file, called a Single-File Component (SFC), which bundles a component's template, script, and styles in one file.

src/components/ is where you'll add the rest of your components as the app grows.

The entry point

// src/main.js
import { createApp } from "vue";
import App from "./App.vue";

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

Why Vite, specifically

The rest of this course works inside App.vue and new files under src/components/, so keep this dev server running as you go.