Vue

Vue is a JavaScript framework for building user interfaces, created in 2014 by Evan You. Like React, it builds UIs out of reusable components and keeps the page in sync with your data automatically. Unlike React, it keeps HTML, JavaScript, and CSS in familiar, separate blocks inside a single .vue file — which is a big part of why it's widely considered the friendliest framework for beginners.

Vue calls itself "progressive" because you can adopt it gradually: sprinkle it onto one widget of an existing page, or build an entire app with it.

Vue shines when you want a gentle learning curve without giving up power — its official documentation is written specifically with newcomers in mind, and its template syntax reads almost like plain HTML. It's a great fit for solo developers and small teams building interactive apps. If your priority is the job market, React has more listings; if you're building a simple content site, plain HTML/CSS/JS may be all you need.

• Single-file components — a .vue file holds a <template> (HTML), a <script> (logic), and a <style> (CSS) for one component.
• Reactivity — wrap data in ref() and Vue tracks it. Change the value, and every part of the page using it updates automatically.
• Directives — small attributes that add behavior to plain HTML: v-if to show/hide, v-for to repeat, v-model to bind a form input to data, @click to handle events.
• Props and events — parents pass data down as props; children signal back up by emitting events.
• Computed properties — values derived from other data that recalculate themselves when their inputs change.

<script setup>
import { ref } from "vue";
const count = ref(0);
</script>

<template>
  <button @click="count++">
    Clicked {{ count }} times
  </button>
</template>

The template is just HTML with a couple of extras. Increment count and the button text updates by itself — that's Vue's reactivity doing the work.

1. Get comfortable with HTML, CSS, and JavaScript basics first — Vue builds directly on them.
2. Install Node.js, then scaffold a project with npm create vue@latest (answer "No" to the optional extras for now).
3. Run npm install and npm run dev, then edit src/App.vue and watch the browser update live.
4. Build a todo list using ref(), v-for, and v-model — it covers most of what you'll use daily.
5. Split your app into two or three components and pass data between them with props.