Introduction to script setup
How compiles to setup(), auto-imports, top-level bindings available in template.
Introduction to script setup is a free Vue Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.
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>The script setup Version
With <script setup> there is no wrapper object and no return statement. Top-level variables are exposed to the template automatically.
<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>No Explicit Return Needed
The compiler treats every top-level binding — variables, functions, imports — as available in the template. You write less and there is no risk of forgetting to return something.
Top-Level Functions Are Available Too
Define a function at the top level and bind it directly in the template. No need to return it.
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Imported Components Auto-Register
In the classic API you had to list components in a components option. With <script setup>, simply importing a component makes it usable in the template.
<script setup>
import BaseButton from './BaseButton.vue'
</script>
<template>
<BaseButton />
</template>It Still Compiles to setup()
Under the hood, the compiler transforms <script setup> into a regular setup() function. You get all the same behavior and performance, just with cleaner authoring.
Adding TypeScript with lang ts
Enable TypeScript by adding lang="ts" to the tag. You can then type variables, use generics on compiler macros, and get full type inference.
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>Compiler Macros
Inside <script setup> you get special compiler macros like defineProps, defineEmits, and defineExpose. They are not imported — the compiler recognizes them. You will explore each in upcoming lessons.
Mixing with a Normal script Block
Sometimes you need options that run once at module scope, like a custom component name. You can add a regular <script> block alongside <script setup>.
<script>
export default { name: 'MyComponent' }
</script>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>Why Teams Prefer script setup
- Less boilerplate — no wrapper object or return.
- Auto component registration.
- Better runtime performance from compile-time analysis.
- Excellent TypeScript support.
It is the recommended style for Vue 3 single-file components.
Quick Check
Confirm your understanding of script setup.
Recap
You learned the essentials of <script setup>:
- It is compile-time sugar over
setup(). - No explicit return — top-level bindings are auto-exposed.
- Imported components register automatically.
- Add
lang="ts"for TypeScript. - Compiler macros like
definePropsare available without imports.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 42
- Lessons
- 156
Frequently Asked Questions
Is the “Introduction to script setup” lesson free?
Yes — any 3 lessons of the Vue Academy learning path, including “Introduction to script setup”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.
What will I learn in “Introduction to script setup”?
How compiles to setup(), auto-imports, top-level bindings available in template. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Vue Academy?
No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
How long does the “Introduction to script setup” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Vue Academy lesson?
Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Introduction to script setup
- defineProps and defineEmits
- defineExpose and useAttrs
- Importing and Using Composables in script setup