How to Install Vue.js: Easy Step-by-Step Tutorial

How to Install Vue.js: A Step-by-Step Guide

Vue.js is one of the most popular and flexible JavaScript frameworks for building user interfaces and single-page applications. Installing Vue.js can be done in several ways depending on your project needs and development environment. This tutorial will guide you through the prerequisites, multiple installation methods, troubleshooting tips, and a final checklist.

Prerequisites

Basic knowledge of JavaScript and HTML is recommended to understand Vue.js concepts effectively.
Node.js and npm installed: Many Vue.js installation options use Node.js and its package manager npm or yarn. Download it from the official Node.js site.
A development environment: A code editor like Visual Studio Code or any IDE of your choice.

Method 1: Installing Vue.js via CDN (Content Delivery Network)

This is the fastest way to get started with Vue.js for learning or simple projects. You simply add a script tag to your HTML.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Steps:

Create an HTML file.
Add the above script tag inside the <head> or at the end of the <body>.
Initialize Vue in a script block or an external JS file.

Example:

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

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const App = {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }
  Vue.createApp(App).mount('#app')
</script>

This method is great for demo projects or quick prototyping but not recommended for production apps.

Method 2: Installing Vue.js using npm and Vue CLI

The Vue CLI (Command Line Interface) provides a full-featured system for rapid Vue development with build tools and project scaffolding.

Step 1: Install Node.js and npm

If not already installed, download and install Node.js (which includes npm) from the official Node.js site.

Step 2: Install the Vue CLI globally

npm install -g @vue/cli

Step 3: Create a new Vue project

vue create my-vue-app

This command starts an interactive prompt where you can select presets or manually configure your project.

Step 4: Navigate to your project folder

cd my-vue-app

Step 5: Run the development server

npm run serve

Your app will now run on a local development server, usually accessible at http://localhost:8080.

Method 3: Installing Vue as a module in an existing project

For projects where you already use npm, you can install Vue as a dependency:

npm install vue@next

Then import Vue in your JavaScript files:

import { createApp } from 'vue'

const app = createApp({
  data() {
    return { message: 'Hello from Vue in a module!' }
  }
})

app.mount('#app')

Troubleshooting Common Installation Issues

npm command not recognized: Ensure that Node.js and npm are installed and added to your system PATH.
Permission errors when installing globally: Try running npm commands with elevated privileges (e.g., using sudo on Linux/macOS) or configure npm to use a different directory.
Port conflicts when running the development server: If localhost:8080 is busy, the CLI will suggest another port, or you can specify one manually.