Vue.js Setup
Before you write any Vue code, your computer or project needs Vue available. This page shows every way to set up Vue.js and explains when to use each method.
Two Ways to Use Vue.js
There are two main approaches to adding Vue to a project:
- CDN link — Add a single line to your HTML file. Best for learning and small projects.
- Build tool setup (Vite) — Create a full project with a terminal command. Best for real applications.
Diagram: CDN vs Build Tool Setup
┌──────────────────────────────────────────────────────┐ │ CDN Method │ │ │ │ index.html │ │ ├── <script src="vue CDN link"> │ │ └── Your Vue code inside <script> tag │ │ │ │ No terminal. No installation. Open in browser. │ └──────────────────────────────────────────────────────┘ ┌──────────────────────────────────────────────────────┐ │ Build Tool Method (Vite) │ │ │ │ my-project/ │ │ ├── src/ │ │ │ ├── App.vue │ │ │ └── main.js │ │ ├── index.html │ │ └── package.json │ │ │ │ Terminal commands required. More powerful. │ └──────────────────────────────────────────────────────┘
Method 1 — CDN (Recommended for Beginners)
The CDN method loads Vue directly from the internet using a single script tag. You do not install anything.
Step 1: Create an HTML File
Open any text editor (Notepad, VS Code, Sublime Text) and create a file named index.html.
Step 2: Add the Vue CDN Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Vue App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<!-- Vue 3 CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Vue is working!"
};
}
});
app.mount("#app");
</script>
</body>
</html>
Step 3: Open the File in a Browser
Double-click the HTML file. The browser loads it and Vue displays the message on the screen. You see: Vue is working!
What Each Part Does
<div id="app">— The container Vue controls. Vue only manages HTML inside this element.{{ message }}— A placeholder that Vue replaces with the actual value ofmessage.Vue.createApp({...})— Creates a new Vue application.data()— A function that returns your application's data.app.mount("#app")— Tells Vue to take control of the element withid="app".
Diagram: How Mount Works
HTML File Vue App
┌─────────────────────┐ ┌─────────────────────┐
│ <div id="app"> │◀───────│ app.mount("#app") │
│ {{ message }} │ │ │
│ </div> │ │ data: { │
└─────────────────────┘ │ message: "Vue is │
│ working!" │
│ } │
└─────────────────────┘
Result on screen:
┌─────────────────────┐
│ Vue is working! │
└─────────────────────┘
Method 2 — Build Tool Setup with Vite
For real projects, Vite is the standard tool to set up Vue. Vite creates a project folder with everything organized properly. You need Node.js installed first.
Step 1: Install Node.js
Go to nodejs.org and download the LTS version. Install it like any regular program. Node.js comes with npm, the tool that installs JavaScript packages.
Step 2: Verify Node.js Installation
Open your terminal (Command Prompt on Windows, Terminal on Mac/Linux) and type:
node --version npm --version
Both commands should print version numbers. If they do, Node.js is ready.
Step 3: Create a Vue Project
In your terminal, navigate to the folder where you want to create the project, then run:
npm create vue@latest
The installer asks several questions. For beginners, answer like this:
Project name: my-vue-app Add TypeScript? → No Add JSX Support? → No Add Vue Router? → No Add Pinia? → No Add Vitest? → No Add Cypress? → No Add ESLint? → No
Step 4: Install Dependencies and Start
cd my-vue-app npm install npm run dev
Open your browser and go to http://localhost:5173. You see the default Vue welcome page. Your Vue project is running.
Diagram: Project Folder Structure
my-vue-app/ │ ├── src/ ← Your source code lives here │ ├── App.vue ← Root component of your app │ ├── main.js ← Entry point — starts Vue │ ├── components/ ← Reusable components folder │ └── assets/ ← Images, fonts, etc. │ ├── public/ ← Files served as-is (favicon, etc.) ├── index.html ← The single HTML file ├── package.json ← Project info and dependencies └── vite.config.js ← Vite configuration
What Each Key File Does
- main.js — Creates the Vue app and mounts it. This is the starting point Vue runs first.
- App.vue — The root component. Everything visible on the page starts here.
- components/ — Where you store reusable UI pieces (buttons, cards, forms).
- index.html — The single HTML page. Vue injects your app into the
<div id="app">inside it.
Which Setup Should You Use?
Comparison Table
┌──────────────────┬─────────────────┬───────────────────┐ │ Feature │ CDN │ Vite Build Tool │ ├──────────────────┼─────────────────┼───────────────────┤ │ Installation │ None │ Node.js required │ │ File structure │ One HTML file │ Full project │ │ Best for │ Learning │ Real apps │ │ .vue files │ Not supported │ Fully supported │ │ Hot reload │ No │ Yes │ │ Production build │ Not suitable │ Yes │ └──────────────────┴─────────────────┴───────────────────┘
Start with the CDN method while you learn Vue concepts. Move to Vite when you build a real project.
Recommended Code Editor
Visual Studio Code (VS Code) is the most popular editor for Vue development. Download it free from code.visualstudio.com.
Install the Vue Extension
Inside VS Code, open the Extensions panel (Ctrl+Shift+X or Cmd+Shift+X), search for Volar, and install it. Volar gives you syntax highlighting, autocomplete, and error detection for Vue files.
Diagram: VS Code Setup for Vue
VS Code
└── Extensions
└── Volar (Vue Language Features)
├── Syntax highlighting for .vue files
├── Autocomplete for Vue directives
├── Error underlines in real time
└── Go-to-definition for components
Vue DevTools (Browser Extension)
Vue DevTools is a browser extension for Chrome and Firefox that lets you inspect your Vue app while it runs. Install it from the Chrome Web Store or Firefox Add-ons by searching Vue.js Devtools.
With Vue DevTools open in your browser's developer panel, you can:
- See every component in your app and its data
- Watch data change in real time as you interact with the page
- Track events that fire when users click or type
Summary
To get started with Vue.js, use the CDN method — add one script tag to an HTML file and open it in a browser. For larger projects, use Vite to create a proper project structure. Install VS Code with the Volar extension for the best coding experience, and add Vue DevTools to your browser to inspect your app while it runs.