Vue Get Started

The official way to start a Vue 3 project is the create-vue tool, which sets up Vite for you.

Step 1: Install Node.js

Vue projects need Node.js and npm. Download the LTS version from the official Node.js website, install it, and check it in a terminal:

Example

bash

node -v
npm -v

Output

v24.11.0
11.6.1

Step 2: Create the Project

Run this in the folder where you keep your projects:

Example

bash

npm create vue@latest

The tool asks a few questions. For learning, you can answer like this:

Example

text

Project name: student-portal
Add TypeScript? No
Add JSX Support? No
Add Vue Router for Single Page Application development? No
Add Pinia for state management? No
Add Vitest for Unit Testing? No
Add ESLint for code quality? Yes

You can add Router and Pinia later when you need them.

Step 3: Install and Run

Example

bash

cd student-portal
npm install
npm run dev

Output

  VITE ready in 380 ms

  ➜  Local:   http://localhost:5173/

Open the address in your browser. Each time you save a file, the page updates straight away. Press Ctrl + C in the terminal to stop the server.

The Project Files

File or folder	What it is for
`index.html`	The only HTML page, with `<div id="app">`
`src/main.js`	Creates the Vue app and mounts it on `#app`
`src/App.vue`	The root component
`src/components/`	Your other components
`src/assets/`	CSS files and images used by components
`public/`	Files copied as they are
`package.json`	Scripts and installed packages

How the App Starts

src/main.js is short:

Example

import "./assets/main.css";

import { createApp } from "vue";
import App from "./App.vue";

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

createApp(App) creates an app with App.vue as the root component, and .mount("#app") shows it inside the <div id="app">.

Your First Change

Replace the content of src/App.vue:

Example

vue

<script setup>
const student = "Ayesha";
const course = "Web Development";
</script>

<template>
  <h1>Student Portal</h1>
  <p>Welcome {{ student }}, you are enrolled in {{ course }}.</p>
</template>

Output

Student Portal
Welcome Ayesha, you are enrolled in Web Development.

Install the Vue (Official) extension in VS Code. It gives colours, auto-complete and error checking for .vue files.

Vue Without a Build Step

For a quick test, you can also load Vue from a CDN in a plain HTML file. This is useful for adding Vue to an old website:

Example

html

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

  createApp({
    setup() {
      const message = ref("Hello from a CDN!");
      return { message };
    },
  }).mount("#app");
</script>

For real projects, use create-vue as shown above.

Building for Production

Example

bash

npm run build

This creates a dist folder with optimized files that you can upload to any hosting service.

Exercise

Which file creates the Vue app and mounts it on the page?

index.htmlsrc/main.jssrc/App.vuepackage.json