Introduction to script setup
How compiles to setup(), auto-imports, top-level bindings available in template.
A Cleaner Composition API
<script setup> is compile-time syntactic sugar for the Composition API. It removes boilerplate so your single-file components read like plain JavaScript with reactive variables.
From setup() to script setup
The classic form needs an export default, a setup() function, and an explicit return. Compare it with the <script setup> version.
<!-- classic -->
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
</script>All lessons in this course
- Introduction to script setup
- defineProps and defineEmits
- defineExpose and useAttrs
- Importing and Using Composables in script setup