Quick Vue 3 syntax for daily work with script setup and Composition API. This lesson covers practical patterns, syntax, and mistakes to avoid.
Quick Vue 3 syntax for daily work with script setup and Composition API.
Revisit deeper lessons for rationale.
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>Minimal reactive counter SFC.
npm create vue@latest
npm install
npm run devQuick reference for patterns covered in this lesson.
| Item | Example | Purpose |
|---|---|---|
| ref | ref(0) | State |
| computed | computed(() => ...) | Derived |
| watch | watch(src, cb) | Effects |
| v-model | forms | Bind |
| v-for | :key | Lists |
| defineProps | props | Inputs |
| defineEmits | events | Outputs |
| Pinia | defineStore | Store |
| Directive | Use |
|---|---|
| v-bind/: | attrs/props |
| v-on/@ | events |
| v-if | conditional |
| v-show | display toggle |
| v-for | lists |
| v-model | two-way |
Pro Tip
Remember storeToRefs when destructuring Pinia state.