script setup

Using script setup

script setup is the recommended SFC syntax: top-level bindings auto-expose to the template.

Compiler macros like defineProps, defineEmits, defineModel work here.

<script setup>
import Hello from './Hello.vue'
const msg = 'hi'
</script>
<template>
  <Hello />
  <p>{{ msg }}</p>
</template>

Imports and bindings are template-ready.

Macros

defineProps defineEmits defineExpose defineModel defineOptions

• Prefer Composition API + script setup.
• Use computed for derived UI.
• Keep side effects intentional.
• Practice in a small Vite app.

script setup Cheatsheet

Quick reference for patterns covered in this lesson.

defineExpose

Needed when parents access child via template refs.

Common Mistakes

• Expecting privacy for all top-level bindings.
• Using Options methods thinking.

Key Takeaways

• script setup is important in Vue apps.
• Practice in SFCs.
• Prefer clear naming.
• Check Vue docs for details.