script setup concept

In real Vite projects, most Vue 3 components use <script setup>—compile-time sugar over the Composition API. This playground uses object components with setup() + template strings, but the mental model maps directly.

What script setup gives you

• Top-level bindings automatically exposed to template—no return object
• defineProps and defineEmits for typed component API
• Less boilerplate than explicit export default { setup() { ... } }
• Better IDE inference for props and emits in .vue files

Equivalent ideas (conceptual)

<script setup lang="ts">
const message = ref('Hello');
const props = defineProps<{ title: string }>();
const emit = defineEmits<{ save: [] }>();
</script>

<template>
  <h1>{{ props.title }}</h1>
  <p>{{ message }}</p>
</template>

Maps to: refs in setup, props option, emits option, and template bindings you already practiced.

Next steps after this track

• Scaffold with npm create vue@latest or Nuxt for SSR
• Adopt Pinia for shared stores instead of ad-hoc provide/inject everywhere
• Explore Vue Router for client-side navigation

Important interview questions and answers

1. Q: script setup vs setup()?
   A: Same runtime; script setup is syntactic sugar compiled away with better DX in SFCs.
2. Q: Can you mix Options and Composition API?
   A: Yes in migrations, but pick one style per component for clarity in new code.

Self-check

1. What boilerplate does script setup remove?
2. How does defineProps relate to the props option?