0Pricing
Vue Academy · Lesson

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 — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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 defineProps are available without imports.

Frequently asked questions

Is the “Introduction to script setup” lesson free?

Yes — the full text of “Introduction to script setup” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

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

  1. Introduction to script setup
  2. defineProps and defineEmits
  3. defineExpose and useAttrs
  4. Importing and Using Composables in script setup
← Back to Vue Academy