Vue Academy · Lesson

setup() Function and Reactive Variables

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

setup() Function and Reactive Variables is a free Vue Academy lesson on CoddyKit — lesson 2 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.

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 }
  }
}

Creating Reactive Objects with reactive

reactive() takes a plain object and returns a deeply reactive proxy. You access its properties directly — there is no .value.

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

Returning State to the Template

Everything returned from setup() as an object becomes a template binding. Here both count and user are exposed.

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

Auto-Unwrapping in the Template

In JavaScript you wrote count.value. In the template you write just count. Vue automatically unwraps top-level refs, so you never type .value in the template.

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

Adding Functions

Functions defined in setup() can read and change reactive state. Remember: inside JavaScript you still use .value for refs.

import { ref } from 'vue'

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

Wiring It Up in the Template

Return the function and bind it to an event. Clicking the button calls increment, which mutates the ref, and Vue re-renders.

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

No this Keyword Needed

Inside setup() there is no this. You work with the variables you declared directly. This makes the code easier to reason about and friendlier to TypeScript.

Trying to use this in setup() will not give you the component instance.

setup Runs Before Creation

setup() executes very early — before created and before the component instance is fully set up. That is why this is unavailable and why you cannot access the DOM here yet.

setup Arguments: props and context

setup(props, context) receives the resolved props as the first argument and a context object as the second. The context exposes attrs, slots, emit, and expose.

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

A Complete Mini Component

Here is everything together: a ref, a reactive object, a function, and the returned bindings.

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

Quick Check

Make sure you understand setup() and reactive variables.

Recap

You learned the foundations of the Composition API:

setup() runs once before creation and returns template bindings.
ref() wraps a value — use .value in JS.
reactive() wraps an object — access properties directly.
Templates auto-unwrap refs, so you skip .value there.
There is no this inside setup().

Frequently asked questions

Is the “setup() Function and Reactive Variables” lesson free?

Yes — the full text of “setup() Function and Reactive Variables” 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 “setup() Function and Reactive Variables”?

The setup() entry point, ref() for primitives, reactive() for objects, returning values. 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 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “setup() Function and Reactive Variables” 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

← Back to Vue Academy