How to define props in Vue

Seno

Updated: Jan 31, 2025

Defining Props in Vue 3

With Vue and Typescript there are three ways you can declare a props.

typescript

<script lang="ts" setup>
const props = defineProps<{
  data: Object
}>();

// Or

const props = defineProps({
  data: {
    type: Object,
    required: true // if you removed this become false
  }
});

// Or

type Props = {
  data: object
}

const props = defineProps<Props>();

<script>

Without Typescript.

typescript

<script setup>
const props = defineProps(['data']);
<script>

Tags: Vue