How do you declare props in setup?

VueJunior~1 min read

In setup() (or <script setup>), props are declared differently than in the Options API. Vue 3 has two approaches, and it is important to understand both for interviews.

1. The regular way inside setup()

In a component with setup(), props are received as the first argument:

export default {
  props: {
    title: String,
    count: Number
  },

  setup(props) {
    console.log(props.title)
    console.log(props.count)

    return {}
  }
}

Features:

props is a reactive object, but NOT reactive(): it cannot be modified inside the component (it is read-only).
You can use it as props.title, props.count.
You cannot destructure it directly (reactivity would be lost!).

You cannot do this (reactivity is lost):

const { title } = props // no more reactivity

You need to use toRefs:

import { toRefs } from 'vue'

setup(props) {
  const { title, count } = toRefs(props)

  return { title, count }
}

Now title.value is reactive.

2. The `<script setup>` way (recommended)

In <script setup>, props are declared via defineProps():

vue

<script setup>
const props = defineProps({
  title: String,
  count: Number,
})
</script>

Usage:

vue

<template>
  <h1>{{ props.title }}</h1>
</template>

You can destructure it right away, but carefully:

vue

<script setup>
const { title, count } = defineProps({
  title: String,
  count: Number
})
</script>

In <script setup>, destructuring preserves reactivity, because the Vue compiler wraps it in toRefs for you.

This is officially supported.

Example of a complete component

vue

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

const { price, quantity } = defineProps({
  price: Number,
  quantity: Number
})

const total = computed(() => price * quantity)
</script>

<template>
  <p>Total: {{ total }}</p>
</template>

Summary (perfect for an interview)

Option 1: setup(props)

setup(props) {
  props.title
}

props are available via the first argument
cannot be destructured without toRefs

Option 2: `<script setup>` + defineProps()

const props = defineProps({...})

automatic typing
can be destructured (Vue does the same thing as toRefs)

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.