setup Function

The setup() Function

setup is the Composition API entry in Options/SFC without script setup sugar.

It receives props and context and returns bindings for the template.

export default {
  props: ['title'],
  setup(props, { emit }) {
    const open = () => emit('open')
    return { open }
  }
}

Classic setup returning template bindings.

script setup vs setup()

prefer script setup for less boilerplate

• Prefer Composition API + script setup.
• Use computed for derived UI.
• Keep side effects intentional.
• Practice in a small Vite app.

setup Function Cheatsheet

Quick reference for patterns covered in this lesson.

Migration

Move Options one section at a time into setup/script setup.

Common Mistakes

• Trying to use this inside setup.
• Returning nothing then expecting template access.

Key Takeaways

• setup Function is important in Vue apps.
• Practice in SFCs.
• Prefer clear naming.
• Check Vue docs for details.