Suggest an edit

Improve this article

Refine the answer for “How do you declare props in setup?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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**:

```js
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):

```js
const { title } = props // no more reactivity
```

#### You need to use toRefs:

```js
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)

```js
setup(props) {
  props.title
}
```

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

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

```js
const props = defineProps({...})
```

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

Markdown · drag & drop images · ⌘B / ⌘I shortcuts347 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.