[Vuejs]-Vue get props into component in typescript setup unused

by

1👍

✅

defineProps can only be used inside <script setup> (ts or js).
In the example you posted, you’re trying to use it inside a <script> tag’s root (does not have the setup attribute!), where it won’t work.

To clarify:

  • <script setup lang="ts"> syntax:
<script setup lang="ts">
defineProps({
  foo: Number
})
</script>
<template>
  <div>{{ foo }}</div>
</template>
  • <script lang="ts"> syntax:
<script lang="ts">
export default {
  props: {
    foo: Number
  }
}
</script>
<template>
  <div>{{ foo }}</div>
</template>

See them working here.

0👍

It seems to me that you have mixed the two ways.

Have you tried to do as below?

import { defineComponent } from 'vue'

export default defineComponent({
  // type inference enabled
  props: {
    label: String,
    href: String,
    icon: any[]
  },
  setup(props) {
    props.label // ...
    // ...
  }
})

See the link.

Leave a comment