How to define props in Vue

Vue guide logo

Defining Props in Vue 3

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

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

                                
                                        <script setup>
const props = defineProps(['data']);
<script>
                                    
                            
Previous postHow to set lang attribute on html in Nuxt
Next postHow to get query parameters in Vue