0Pricing
Vue Academy · Lesson

setup() Function and Reactive Variables

The setup() entry point, ref() for primitives, reactive() for objects, returning values.

The setup() Entry Point

The Composition API lives inside a special component option called setup(). It runs once, before the component is created, and is where you declare reactive state and functions.

Whatever you return from setup() becomes available in the template.

Creating Reactive State with ref

ref() wraps a single value (number, string, boolean, or even an object) into a reactive container. The actual value lives on the .value property.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

All lessons in this course

  1. Why Composition API?
  2. setup() Function and Reactive Variables
  3. ref vs reactive: When to Use Each
  4. Computed and Watch in Composition API
← Back to Vue Academy