Script setup vs setup function in Vue: Key Differences and Usage

In Vue, script setup is a simpler, compiler-based syntax that lets you write component logic directly without returning an object, while the setup function is the traditional way inside the script block where you explicitly return reactive data and methods. script setup reduces boilerplate and improves readability by using top-level declarations.

Quick Comparison

Here is a quick side-by-side comparison of script setup and the traditional setup function in Vue components.

Aspect	script setup	setup function
Syntax style	Top-level declarations inside <script setup>	Function inside <script> returning an object
Boilerplate	Minimal, no explicit return needed	More verbose, must return reactive data and methods
TypeScript support	Better with automatic inference	Requires explicit typing and return
Reactivity usage	Direct use of refs and reactive variables	Refs and reactive must be returned to template
Readability	Cleaner and concise	More structured but verbose
Compilation	Compiler macro, processed at build time	Runtime function executed when component setup runs

Key Differences

The script setup syntax is a compiler macro introduced in Vue 3.2 that allows you to write component logic using top-level variables and functions directly inside a <script setup> block. This means you don't need to explicitly return an object with reactive data or methods. The compiler automatically exposes these to the template, reducing boilerplate and improving readability.

In contrast, the traditional setup function is a normal JavaScript function inside a standard <script> block. You define reactive state and functions inside it and must return an object containing everything you want to expose to the template. This approach is more explicit but requires more code and can be less clean.

Additionally, script setup offers better TypeScript support with automatic type inference and simpler syntax. It also enables better tooling and faster compilation since the compiler processes it at build time. The traditional setup function runs at runtime, which can be less efficient.

Code Comparison

vue

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() {
      count.value++
    }
    return { count, increment }
  }
}
</script>

Output

A button labeled 'Count: 0' that increments the count each time it is clicked.

Script Setup Equivalent

vue

<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
function increment() {
  count.value++
}
</script>

Output

A button labeled 'Count: 0' that increments the count each time it is clicked.

When to Use Which

Choose script setup when you want cleaner, shorter code with less boilerplate and better TypeScript support. It is ideal for new Vue 3 projects and when you want to write components quickly and clearly.

Use the traditional setup function if you need explicit control over the component's returned properties or if you are maintaining legacy code that already uses this pattern. It can also be helpful when you want to organize logic inside a function scope explicitly.

Key Takeaways

script setup offers simpler syntax by removing the need to return an object explicitly.

The traditional setup function requires returning reactive data and methods for template use.

script setup improves readability and TypeScript support with compiler-level processing.

Use script setup for new projects and setup function for legacy or explicit control.

Both approaches produce the same component behavior but differ in code style and developer experience.