Vue.js Installation
Now that you have a clear idea of what Vue.js is and why it is popular, the next step in your journey is to learn how to install it. Vue is extremely flexible when it comes to setup—you can start with just a single <script> tag in an HTML file, or you can create a full-featured development environment with build tools, hot reloading, and code splitting. This chapter will cover all major installation methods in detail, so you can pick the one that best fits your project's needs.
Different Ways to Install Vue.js
There are four main ways to get started with Vue.js:
- Using a CDN (Content Delivery Network)
- Installing via NPM (Node Package Manager)
- Using Vue CLI (Command-Line Interface)
- Using Vite (modern build tool, highly recommended)
Each method has its own advantages and use cases. Let's break them down one by one.
1. Installing Vue.js via CDN
The easiest way to start with Vue.js is by including it directly in your HTML using a CDN link. This method requires no build setup or configuration and is perfect for beginners or when you just want to test Vue quickly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue CDN Example</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<h4 className="my-3">{{ message }}</h4>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello Vue via CDN!"
};
}
});
app.mount("#app");
</script>
</body>
</html>
In this example, we simply load Vue.js from unpkg, a CDN that hosts JavaScript libraries. You don't need Node.js or npm for this. However, this method is not suitable for large production applications because it lacks advanced tooling like hot reloading, code-splitting, or dependency management.
2. Installing Vue.js via NPM
If you are working with Node.js projects or bundlers like Webpack, Rollup, or Parcel, it is better to install Vue via NPM. This gives you more control and allows you to integrate Vue with other dependencies.
Steps:
- Make sure you have Node.js installed. You can check with:
node -v
- Initialize a new project (if not already done):
npm init -y
- Install Vue:
npm install vue
After installation, you can import Vue in your JavaScript code:
import { createApp } from "vue";
const app = createApp({
data() {
return {
message: "Hello from Vue via NPM!"
};
}
});
app.mount("#app");
This approach is great for developers who want to integrate Vue into existing Node projects or custom bundler setups.
3. Installing Vue.js with Vue CLI
Vue CLI (Command-Line Interface) is an official tool for quickly scaffolding Vue projects. It creates a ready-to-use project with a full build system, webpack configuration, and sensible defaults.
Steps:
- Install Vue CLI globally:
npm install -g @vue/cli
- Create a new project:
vue create my-vue-app
- During setup, Vue CLI will ask you to choose features (like Router, Vuex, TypeScript, Linter). You can select manually or go with the default preset.
- Navigate into your project and run:
cd my-vue-app npm run serve
This will start a local development server at http://localhost:8080 with hot reloading enabled. Any change you make in your source code will immediately reflect in the browser without refreshing.
Advantages of Vue CLI:
- Comes with built-in webpack configuration.
- Supports advanced features like TypeScript, unit testing, and PWA setup.
- Customizable configuration via
vue.config.js.
Limitations:
- Heavier and slower compared to modern alternatives like Vite.
- Vue CLI is now considered legacy—Vite is the recommended option for new projects.
4. Installing Vue.js with Vite (Recommended)
Vite is a next-generation frontend build tool that is lightning fast. It leverages ES modules and provides near-instant hot module replacement (HMR). The Vue team now officially recommends Vite for new Vue 3 projects.
Steps:
- Create a new Vite project:
npm create vite@latest my-vue-app
- Choose
VueorVue + TypeScriptwhen prompted. - Navigate into your project folder:
cd my-vue-app
- Install dependencies:
npm install
- Start the development server:
npm run dev
Vite provides an incredibly fast dev server and optimized build output. It is widely used with modern Vue projects and integrates well with libraries like Vue Router and Pinia.
Which Installation Method Should You Choose?
The right installation method depends on your project needs:
- CDN: Best for learning, small projects, or embedding Vue into existing HTML pages.
- NPM: Best when integrating Vue into custom bundler setups or Node.js applications.
- Vue CLI: Still useful for older Vue 2 projects, but less recommended for new apps.
- Vite: The recommended choice for new Vue 3 projects due to speed and simplicity.
Example: Creating a Project with Vite
Let’s walk through a quick example using Vite, since it's the modern standard.
// main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
// App.vue
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue with Vite!"
};
}
}
</script>
With just these two files, you already have a working Vue application running on a lightning fast dev server.
Key Takeaways
- Vue.js can be installed in multiple ways depending on your needs.
- CDN setup is the fastest but not suitable for large applications.
- NPM setup gives more control in modern JavaScript projects.
- Vue CLI was once the standard but is now considered legacy.
- Vite is the new recommended approach for Vue 3 projects.
Next Steps
Once you have Vue installed, the next step is to understand how a Vue application actually works. We will explore the Vue Instance in the next chapter, where you will learn about data, methods, computed properties, and the lifecycle of a Vue app.
