Vue 3 Reactivity and the Composition API

# Create a new Vue 3 project
npm create vite@latest my-app -- --template vue

cd my-app
npm install
npm run dev

my-app/
├── src/
│   ├── App.vue          ← root component
│   ├── main.js          ← app entry point
│   ├── components/      ← your components go here
│   └── assets/          ← images, css
├── index.html
└── vite.config.js

<script setup>
import { ref } from 'vue'

// ref() creates a reactive variable
const name = ref('World')
const count = ref(0)

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

<template>
  <div class="greeting">
    <h1>Hello, {{ name }}!</h1>
    
    <!-- v-model creates two-way binding -->
    <input v-model="name" placeholder="Enter your name" />
    
    <p>Count: {{ count }}</p>
    <button @click="increment">Add One</button>
  </div>
</template>

<style scoped>
.greeting {
  padding: 24px;
  font-family: sans-serif;
}
button {
  margin-top: 8px;
  padding: 8px 16px;
  cursor: pointer;
}
</style>

<script setup>
import { ref } from 'vue'

const show = ref(true)
const items = ref(['Apples', 'Bananas', 'Cherries'])
const selectedColor = ref('blue')
</script>

<template>
  <!-- v-if / v-else: conditional rendering -->
  <p v-if="show">Visible</p>
  <p v-else>Hidden</p>
  
  <!-- v-for: list rendering -->
  <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
  
  <!-- :attr (v-bind shorthand): dynamic attribute -->
  <div :class="selectedColor">Colored box</div>
  
  <!-- @event (v-on shorthand): event listener -->
  <button @click="show = !show">Toggle</button>
  
  <!-- v-model: two-way binding on input -->
  <select v-model="selectedColor">
    <option value="blue">Blue</option>
    <option value="red">Red</option>
  </select>
</template>

<script setup>
import Greeting from './components/Greeting.vue'
</script>

<template>
  <main>
    <Greeting />
  </main>
</template>

<script setup>
// defineProps: declare what data the parent can pass in
const props = defineProps({
  username: String,
  score: {
    type: Number,
    default: 0
  }
})

// defineEmits: declare events this component can fire
const emit = defineEmits(['delete'])
</script>

<template>
  <div class="card">
    <h3>{{ username }}</h3>
    <p>Score: {{ score }}</p>
    <button @click="emit('delete', username)">Remove</button>
  </div>
</template>

<script setup>
import UserCard from './components/UserCard.vue'
import { ref } from 'vue'

const users = ref([
  { username: 'alice', score: 42 },
  { username: 'bob', score: 17 }
])

function removeUser(name) {
  users.value = users.value.filter(u => u.username !== name)
}
</script>

<template>
  <UserCard
    v-for="user in users"
    :key="user.username"
    :username="user.username"
    :score="user.score"
    @delete="removeUser"
  />
</template>