Vue.js

<script setup lang="ts">
import { ref, reactive, computed, watch } from "vue";

// ref: for primitives
const count = ref(0);
const name = ref("Alice");
count.value++;  // Access with .value in script

// reactive: for objects
const user = reactive({ name: "Alice", age: 30 });
user.age++;  // No .value needed

// computed
const doubled = computed(() => count.value * 2);
const fullName = computed(() => `${user.name} ${user.last}`);

// watch
watch(count, (newVal, oldVal) => {
  console.log(`${oldVal} → ${newVal}`);
});

// watchEffect (auto-tracks dependencies)
watchEffect(() => {
  document.title = `Count: ${count.value}`;
});
</script>

<template>
  <!-- Bind value -->
  <input :value="name" />
  <img :src="imgUrl" :alt="imgAlt" />

  <!-- Two-way bind -->
  <input v-model="name" />

  <!-- Conditional -->
  <div v-if="isAdmin">Admin panel</div>
  <div v-else-if="isUser">User view</div>
  <div v-else>Guest</div>

  <!-- Show/hide (keeps DOM) -->
  <div v-show="isVisible">Content</div>

  <!-- List rendering -->
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>

  <!-- Event handling -->
  <button @click="handleClick">Click</button>
  <form @submit.prevent="handleSubmit">...</form>
</template>