Vue 3 Composition API Setup in Vue.js
From the Vue.js cheat sheet · Getting Started · verified Jul 2026
Vue 3 Composition API Setup
Script setup syntax (Vue 3 recommended way)
vue
<template>
<div>{{ message }}</div>
<button @click="increment">{{ count }}</button>
</template>
<script setup>
import { ref, computed } from 'vue'
const message = ref('Hello')
const count = ref(0)
const doubled = computed(() => count.value * 2)
function increment() {
count.value++
}
</script>💡 Script setup is the recommended syntax for Vue 3 Composition API
⚡ No need to return variables from setup() with script setup
📌 defineProps and defineEmits are compiler macros, no import needed
🔥 Vue 3 allows multiple root elements in templates