VueHow-ToBeginner · 3 min read

How to Install Vue: Quick Setup Guide for Vue 3

To install Vue, use npm install vue@next for a project setup with Node.js or include Vue via CDN by adding a <script> tag with Vue's URL in your HTML. The npm method is best for modern development, while CDN is quick for simple demos.

📐

Syntax

There are two main ways to install Vue:

npm install vue@next: Installs Vue 3 in your Node.js project.
CDN script tag: Adds Vue directly in your HTML without setup.

Use npm for full projects with build tools. Use CDN for quick testing or demos.

bash

npm install vue@next

💻

Example

This example shows how to add Vue 3 via CDN in an HTML file and create a simple app that displays a message.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vue CDN Example</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          message: 'Hello from Vue 3!'
        };
      }
    }).mount('#app');
  </script>
</body>
</html>

Output

Hello from Vue 3!

⚠️

Common Pitfalls

Common mistakes when installing Vue include:

Using npm install vue without @next installs Vue 2, not Vue 3.
Forgetting to include the correct CDN URL for Vue 3.
Trying to use Vue 3 features with Vue 2 syntax or setup.
Not mounting the Vue app to an existing DOM element.

Always check your Vue version with npm list vue or inspect the CDN URL.

bash

/* Wrong: installs Vue 2 */
npm install vue

/* Right: installs Vue 3 */
npm install vue@next

📊

Quick Reference

Method	Command or URL	Use Case
npm	npm install vue@next	Full project with build tools
CDN		Quick demos or simple pages

✅

Key Takeaways

Use npm install vue@next to get Vue 3 in Node.js projects.

Include Vue 3 via CDN for fast testing without setup.

Check Vue version to avoid installing Vue 2 by mistake.

Mount your Vue app to an existing HTML element.

Use npm for development, CDN for simple demos.