Official Vue docs (SFCs, reactivity, directives, composition API).

https://vuejs.org/guide/

npm create vue@latest my-vue
cd my-vue
npm install
npm run dev

<script setup>
// state + logic
</script>

<template>
  <!-- UI -->
</template>

<style scoped>
/* styles */
</style>

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

<template>
  <button @click="n++">{{ n }}</button>
</template>

<script setup lang="ts">
const items = [
  { id: "1", name: "A" },
  { id: "2", name: "B" },
];
</script>

<template>
  <ul>
    <li v-for="it in items" :key="it.id">{{ it.name }}</li>
  </ul>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
const xs = ref([1, 2, 3]);
const sum = computed(() => xs.value.reduce((a, b) => a + b, 0));
</script>

<template>
  <output>{{ sum }}</output>
</template>