Vue.js

When to Use

• Progressive Adoption: Drop it into an existing HTML page or build a full SPA.
• Developer Experience: Often cited as having the best balance of simplicity and power.
• Performance: With Vapor Mode, it rivals the fastest signals-based frameworks.

Quick Start (Composition API)

<script setup>
import { ref, computed } from "vue";

const count = ref(0);
const double = computed(() => count.value * 2);

function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">
    Count is: {{ count }}, Double is: {{ double }}
  </button>
</template>

Core Concepts

Composition API (

<script setup>

)

Reactivity System (Signals)

ref()

reactive()

Vapor Mode (Opt-in)

Best Practices (2025)

• Use

  <script setup>

  : It is less verbose and provides better TypeScript support.
• Use

  defineModel

  : The new standard for two-way binding props (Vue 3.4+).
• Use Composables: Extract logic into reusable

  useFeature()

  functions (Vue's version of Hooks).

• Don't mix Options and Composition API: Stick to Composition API for new projects.
• Don't destructure

  props

  : You lose reactivity (unless using

  toRefs

  or Vue 3.5 reactive destructuring).

References

• Vue.js Documentation
• Vue Vapor Mode