Install Vue.js

Linux Setup Mac Setup Windows Setup

Learn how to install Vue.js and set up your development environment. Vue.js offers multiple ways to get started, from simple CDN includes to full-featured build tools.

Quick Start with CDN

The fastest way to try Vue.js is by including it directly in your HTML file using a CDN. This is perfect for prototyping and small projects.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Vue App</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <button @click="count++">Clicked {{ count }} times</button>
    </div>

    <script>
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    message: 'Hello, Vue.js!',
                    count: 0
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

Using npm (Recommended)

For larger projects, installing Vue.js via npm gives you access to the full ecosystem and build tools.

Prerequisites

Make sure you have Node.js installed (version 16.0 or higher).

Create a Vue Project

The official Vue CLI makes it easy to create new projects:

npm create vue@latest

You’ll be prompted with several questions:

  • Project name: Enter a name for your project
  • Add TypeScript?: Choose based on your needs
  • Add JSX Support?: Optional for advanced use cases
  • Add Vue Router?: Recommended for multi-page applications
  • Add Pinia?: Recommended for state management
  • Add Vitest?: For testing
  • Add End-to-End Testing?: For comprehensive testing
  • Add ESLint?: Recommended for code quality

Navigate and Install 

cd your-project-name
npm install

Run Your Development Server 

npm run dev

Your Vue.js application is now running at http://localhost:5173 (or another port if 5173 is occupied).

Using Vite Directly

If you prefer more control, you can use Vite (the build tool Vue uses) directly:

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

Project Structure

A typical Vue.js project looks like this:

my-vue-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
└── vite.config.js
  • src/: Contains your application code
  • components/: Reusable Vue components
  • App.vue: The root component
  • main.js: Entry point of your application

IDE Setup

For the best development experience, use an editor with Vue.js support:

  • VS Code: Install the Volar extension
  • WebStorm: Built-in Vue.js support
  • Sublime Text: Use Vue Syntax Highlight

Browser DevTools

Install the Vue.js devtools browser extension to debug your Vue applications effectively.

Next Steps

Once you have Vue.js installed, you can start learning about Vue components and build your first interactive application.

External Resources

Last updated on