Learn Vue - Pre-Requisite Skills & Environment Setup

#Introduction

Welcome to the Learn Vue series! This series will help you master Vue.js — the progressive JavaScript framework for building reactive user interfaces — from core concepts to production readiness. There are 24 episodes total, arranged across six phases, starting with the foundation laid in this episode.

But before you touch create-vue, there are some basic skills and software you must have. Why are these prerequisites important? Because Vue is not a magic box. The templates you write become DOM operations, state changes become re-renders, and all of that runs on top of JavaScript. If your HTML, CSS, and JavaScript foundation isn't solid, this whole series will feel like reading a foreign language.

Episode 0 is your roadmap: we'll make sure your basic skills are solid, set up Node.js and an editor, then create your first Vue project with Vite. Once this episode is done, you'll be able to follow the entire series comfortably.

#Basic Skills You Must Master

#HTML, CSS, and Modern JavaScript

Vue renders templates that are mostly HTML, styles them with CSS, and controls everything with JavaScript. You must be comfortable with:

• HTML: element structure, attributes, forms, and semantic tags.
• CSS: selectors, the box model, flexbox, grid, and class styling.
• JavaScript ES6+: arrow functions, destructuring, the spread operator, promises, async/await, and modules.

Without these three foundations, directives like v-for and composables like ref won't make sense.

#DOM, Event Handling, and Reactive Concepts

Vue hides many DOM details from you, but a basic understanding is still required. Know what document.querySelector is, how events like click flow, and why full re-renders are expensive. Also understand the concept of reactive programming: data changes, and the UI adjusts itself automatically.

state berubah -> dependency tracking -> re-render bagian yang terdampak

#Command Line, Git, and Package Manager

Almost all Vue work starts from the terminal. You should be able to change directories, install dependencies, and run scripts:

cd my-app
npm install
npm run dev
git status

npm install pulls in dependencies, npm run dev starts the development server, and git status shows uncommitted changes. You'll use these habits in nearly every episode.

#Software to Prepare

#Node.js LTS and Package Manager

Vue 3 and its toolchain run on top of Node.js. Install the latest Node.js LTS from the official site or via a Node Version Manager. Once installed, verify it:

node --version
npm --version

The output of node --version should show version 18 or later, and npm --version version 9 or later. This entire series uses npm, but pnpm and yarn also work well.

#VS Code and Required Extensions

The recommended editor is VS Code with these three extensions:

• Vue - Official (Volar): syntax highlighting and IntelliSense for Single File Components.
• ESLint: surfaces errors and warnings as you type.
• Prettier: formats code consistently.

With Volar installed, you get type-checking, component auto-import, and smart refactoring for .vue files.

#Modern Browser and System Resources

Use a modern browser like Chrome, Firefox, or Edge along with Vue Devtools — a browser extension we'll use for debugging in episode 15. For operating systems, Windows, macOS, and Linux are all supported; at least 8GB of RAM is recommended so the dev server, browser, and editor run smoothly at the same time.

#Environment Setup and Your First Vue Project

#Creating a Project with Vite

Once Node.js is ready, create an official Vue project with the create-vue scaffolder. This command uses Vite as its modern build tool:

npm create vue@latest my-vue-app
cd my-vue-app
npm install

npm create vue@latest will ask about several options like TypeScript and ESLint. For now, just choose the default options; we'll cover the full combination in episodes 3 and 19.

#Running the Dev Server

Start the development server to make sure everything works:

npm run dev

The output will show a URL like http://localhost:5173. Open that URL in your browser and you'll see the Vue welcome page. Press Ctrl+C to stop the server. The hot module replacement feature, which we'll examine in episode 3, is active from the very start.

#Verifying Your Environment

Before moving on to episode 1, run a quick check that all prerequisites are in place:

node --version && npm --version && git --version

If all three versions appear without errors, your environment is ready. Add Git as a final step — initialize a repository in the project directory:

git init
git add .
git commit -m "chore: project Vue pertama"

The git init command initializes the repository, and the first commit git commit -m "chore: project Vue pertama" marks the start of the project. From here you can move on to the next episode with confidence.

#Summary

In this episode 0 you laid the foundation for the entire series: understanding the basic HTML, CSS, and modern JavaScript skills, setting up Node.js LTS and VS Code with Volar, creating your first Vue project with Vite, and verifying that the dev server runs.

Key takeaways:

• Vue is built on JavaScript: master HTML, CSS, and ES6+ first.
• Understand the reactivity flow: state changes, the UI adapts.
• Node.js LTS with npm version 9 or later is an absolute requirement.
• Install Volar, ESLint, and Prettier in VS Code.
• npm create vue@latest is the official way to start a Vue 3 project.
• Git and an initial commit ensure every experiment can be rolled back.

In the next episode 1, we'll discuss the history, background, and why you need Vue — from the birth of Vue 1 by Evan You, the incremental adoption approach of a progressive framework, to its comparison with React and other frontend frameworks. Make sure your environment is ready, because the Learn Vue journey is just getting started!