Overview

Before building with Vue.js, you need a development environment for writing code, installing packages, running the application, and seeing changes instantly. A standard Vue setup uses Node.js, npm, create-vue, Vite, and a code editor such as Visual Studio Code.

Key concepts

• Install the current Node.js LTS release
• Create projects with npm create vue@latest
• Install dependencies with npm install
• Run the Vite development server with npm run dev

Prerequisites

• A Windows, macOS, or Linux computer
• A stable internet connection
• Basic HTML, CSS, and JavaScript knowledge
• A code editor such as Visual Studio Code
• Basic familiarity with a terminal

Install Node.js

Vue's development tools use Node.js and npm. Install the current Long-Term Support release of Node.js because it prioritizes stability and broad package compatibility. npm is included with Node.js.

Verify the installation

node -v
npm -v

If both commands print version numbers, Node.js and npm are available. Close and reopen the terminal if the commands are not recognized immediately after installation.

What is npm?

npm stands for Node Package Manager. It is installed with Node.js and downloads, installs, and tracks the libraries a project depends on.

Install Visual Studio Code

Any editor can be used, but Visual Studio Code is a popular option because it includes syntax highlighting, completion, an integrated terminal, extensions, and Git support.

Vue editor support

Install the official Vue language tooling extension for Single-File Component syntax, completion, type checking, and navigation. Avoid enabling multiple competing Vue language extensions at the same time.

Create your first Vue.js project

Open a terminal in the parent folder where the project should be created and run the official project generator.

npm create vue@latest

The setup asks for a project name and optional features such as TypeScript, JSX, Vue Router, Pinia, testing, ESLint, and formatting. Beginners can start with JavaScript and add only the tools they intend to learn immediately.

Enter the project folder

cd my-vue-app

Replace my-vue-app with the name selected during project creation. Future project commands should normally be run from this folder.

Install project dependencies

npm install

npm reads package.json, downloads the required packages, and places them in node_modules. Run this after creating a project or after downloading an existing project whose dependencies are not installed.

Start the development server

npm run dev

Vite prints a local address, commonly similar to http://localhost:5173. Open it in a browser to view the application. Keep the terminal process running while developing.

Local: http://localhost:5173/

Hot Module Replacement

When a source file is saved, Vite applies the change in the browser without requiring a full manual refresh. This development feature is called Hot Module Replacement (HMR).

Understanding the generated project

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
└── vite.config.js

How main.js starts Vue

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

This creates the Vue application from App.vue and mounts it inside the HTML element whose id is app.

Make your first change

Open src/App.vue and replace its content with a simple template.

<template>
  <h1>Welcome to Vue.js!</h1>
</template>

Save the file. The browser should update automatically, confirming that the editor, development server, and Vue application are working together.

Common Vue.js commands

Common beginner mistakes

• Trying to create a project before installing Node.js
• Running commands outside the project folder
• Closing the development-server terminal
• Editing a different project directory
• Forgetting npm install after downloading a project
• Using an unsupported or outdated Node.js version

Quick troubleshooting

• Check the current folder with the terminal prompt
• Verify node -v and npm -v
• Read the first meaningful error message in the terminal
• Confirm package.json exists before running project scripts
• Stop the server with Ctrl+C before restarting it
• Check whether another application is already using the requested port

Best practices

• Use a supported Node.js LTS release
• Keep projects in a dedicated workspace folder
• Choose meaningful project names
• Learn basic terminal navigation
• Test the application after each setup step
• Commit source files but not node_modules
• Keep development tools and dependencies maintained

Key takeaways

• Vue development requires Node.js, npm, and a code editor
• create-vue generates a modern Vite-based project
• npm install downloads dependencies
• npm run dev starts local development
• src contains the application code
• App.vue is the root component
• HMR displays saved changes quickly
• npm run build creates production assets