Creating a project

A Vue project is created with the official create-vue tool. It sets up a project on Vite — a tool that runs the development server and builds the files for deployment.

Creating

Open a terminal in the folder where you keep projects and run:

npm create vue@latest

The tool asks a few questions. Enter the project name todo-app. In the list of optional features (TypeScript, Router, Pinia, Vitest and others) leave everything unchecked for now — the course adds each of them later with a separate command.

cd todo-app
npm install
npm run dev

npm install downloads the dependencies into node_modules, npm run dev starts the development server. The terminal prints the address http://localhost:5173 — open it and you see the starter page with the Vue logo.

Project structure

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

The entry point

// src/main.js
import './assets/main.css'
 
import { createApp } from 'vue'
import App from './App.vue'
 
createApp(App).mount('#app')

createApp creates an application from the root component, and mount('#app') renders it into the block with id="app" from index.html. You will change this file when you add the router and the store.

A clean slate

The starter components are no longer needed. Delete the contents of src/components/ and replace src/App.vue:

<!-- src/App.vue -->
<template>
  <h1>My tasks</h1>
</template>

Save the file — the browser page refreshes itself and shows the heading "My tasks". There is no need to restart the server.

Project commands

Common mistake

Opening index.html with a double click is pointless — you get an empty page. The browser cannot read .vue files; the Vite server turns them into plain JavaScript on the fly. Always work through npm run dev and the address from the terminal, and stop the server with Ctrl+C.