How to Install Vue 3 on Windows and Mac*

Here’s the refined article without emoticons and with an added section to verify Vue is installed correctly:

---

Vue.js is a progressive JavaScript framework used to build modern user interfaces and single-page applications. Vue 3 brings improvements in performance, better TypeScript support, and the Composition API.

This article provides a step-by-step guide to installing Vue 3 on Windows and macOS, using two common approaches:

1. Vue CLI – the official command-line interface

2. Vite – a modern, fast build tool (recommended)

---

Prerequisites

Before installing Vue, make sure you have:

1. Node.js and npm

Download from:

https://nodejs.org

Choose the LTS version for stability.

After installation, verify with:

node -v
npm -v

Example output:

Node: v20.x.x
npm: v10.x.x

---

Method 1: Install Vue 3 Using Vue CLI

Step 1: Install Vue CLI globally

npm install -g @vue/cli

On macOS, you may need to use sudo if you encounter permission issues.

Step 2: Create a Vue 3 project

vue create my-vue3-app

• Choose “Manually select features”

• Select the features you need (e.g., Babel, Router)

• When prompted, select Vue version 3.x

Step 3: Run the development server

cd my-vue3-app
npm run serve

Visit http://localhost:8080 in your browser to view the running application.

Step 4: Verify Vue installation

You can also verify Vue CLI is installed correctly with:

vue --version

You should see the CLI version (e.g., @vue/cli 5.x.x).

---

Method 2: Install Vue 3 Using Vite (Recommended)

Vite is a fast and modern tool that works well with Vue 3.

Step 1: Create a new Vue project

npm create vite@latest

Follow the prompts:

• Project name: my-vue3-vite-app

• Framework: Vue

• Variant: Vue (JavaScript or TypeScript)

Step 2: Install dependencies

cd my-vue3-vite-app
npm install

Step 3: Start the development server

npm run dev

Expected output:

VITE v6.x.x  ready in 300ms

➜  Local:   http://localhost:5173/

Step 4: Verify Vue installation

Edit src/App.vue to confirm live updates work:

<template>
  <h1>Vue 3 is installed and running</h1>
</template>

Save the file and reload the browser. If the message changes, the setup is working correctly.

---

Works on Both Windows and Mac

The installation steps and commands are the same across Windows and macOS. On Windows, use Command Prompt or PowerShell; on macOS, use Terminal.

---

Optional Tools and Tips

• Use Visual Studio Code with the Volar extension for Vue 3.

• Install Vue Devtools in Chrome or Firefox for debugging.

• For TypeScript users, choose the Vue + TypeScript variant when creating the project.

---

Sum Up

Here is summary of setup command.

• Vue CLI :

  vue create my-vue3-app

• Vite:

  npm create vite@latest

Vue 3 is now ready to use on your system.