How to Use Script Setup in Vue: Simple Guide with Examples

Use <script setup> in Vue 3 to write component logic more simply and concisely by combining script and setup function in one block. It automatically exposes variables and functions to the template without needing return. Just place your reactive state, imports, and methods inside <script setup> tags.

Syntax

The <script setup> tag is a special script block in Vue 3 Single File Components that combines the component's setup function and script into one. Inside it, you can declare reactive variables, import dependencies, and define functions directly. Variables and functions declared here are automatically available in the template without needing to return them.

Key parts:

• <script setup>: Declares the setup block.
• Reactive state: Use ref() or reactive() to create reactive data.
• Functions: Define methods normally; they are exposed to the template.
• Imports: Import other modules or components as usual.

vue

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

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

Output

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

Example

This example shows a simple counter component using <script setup>. It demonstrates reactive state with ref, a method to update state, and how these are used directly in the template without extra boilerplate.

vue

<template>
  <div>
    <p>Clicks: {{ clicks }}</p>
    <button @click="increment">Click me</button>
  </div>
</template>

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

const clicks = ref(0)

function increment() {
  clicks.value++
}
</script>

Output

Text showing 'Clicks: 0' and a button labeled 'Click me'. Each click increases the number.

Common Pitfalls

Common mistakes when using <script setup> include:

• Trying to use this inside <script setup> — it does not work because there is no component instance context.
• Not importing ref or other Vue APIs before using them.
• Declaring variables but forgetting they must be reactive (using ref or reactive) to update the template.
• Trying to return variables from <script setup> — it is automatic, so return is not needed and causes errors.

vue

/* Wrong: Using this inside script setup */
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  this.count++ // ❌ this is undefined here
}
</script>

/* Right: Use count.value directly */
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++ // ✅ correct
}
</script>

Quick Reference

Feature	Usage	Notes
Declare reactive variable	const count = ref(0)	Use .value to access or update
Define method	function increment() { count.value++ }	Methods are auto-exposed to template
Import Vue APIs	import { ref, reactive } from 'vue'	Must import before use
Expose to template	No return needed	Variables and functions are auto available
No this context	Avoid using this	Use variables directly

Key Takeaways

Use