vue

Vue.js

Vue is a progressive framework for building user interfaces, featuring the reactive Composition API and high-performance Vapor Mode compilation.

When to Use

• Progressive Full-Stack Web Applications: Vue 3.5+ with <script setup> and Composition API.
• Single Page Applications (SPAs): Building fast, reactive frontends with Vue Router and Pinia.
• Interactive Micro-Frontends & Widgets: Embedding reactive components into existing server-rendered templates.
• Design System Implementation: Building accessible, scoped component libraries with PrimeVue or Vuetify.

Quick Start

<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 with & TypeScript

Reactive primitives using ref, computed, and watch:

<!-- components/ProductCounter.vue -->
<script setup lang="ts">
import { ref, computed, watch } from "vue";

interface Props {
  initialCount?: number;
  unitPrice: number;
}

const props = withDefaults(defineProps<Props>(), {
  initialCount: 1,
});

const emit = defineEmits<{
  (e: "totalChanged", total: number): void;
}>();

const quantity = ref(props.initialCount);
const totalPrice = computed(() => quantity.value * props.unitPrice);

watch(totalPrice, (newTotal) => {
  emit("totalChanged", newTotal);
});

function increment() {
  quantity.value += 1;
}

function decrement() {
  if (quantity.value > 1) quantity.value -= 1;
}
</script>

<template>
  <div class="counter-box">
    <button @click="decrement">-</button>
    <span>{{ quantity }}</span>
    <button @click="increment">+</button>
    <p>Total: ${{ totalPrice.toFixed(2) }}</p>
  </div>
</template>

State Management with Pinia

Centralized reactive store with type inference: