🐛 BUG: Using Vue component with optional properties in Astro file cause type error

[jerry84]

Describe the Bug

When I import a Vue component in an Astro file, it complains on optional properties when running astro check

This seems to happen from astrojs/[email protected]

Steps to Reproduce

1. add a optional property to a Vue component

<script setup lang="ts">
const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
});
</script>

2. import the component in .astro file without defining a value for the optional property

---
import Example from '../components/Example.vue';
---
<Example  client:visible />

3. run astro check

Link to an reproducible example

[jerry84]

@Princesseuh Is this a known issue? Any idea on how to deal with this?

[Princesseuh]

I don't know, seems like a bug. I haven't investigated yet

[skfoo]

This may be related to #782. In VS Code I'm getting the 'no default export' error when I use defineProps with a default array, which led me to find that ticket and then this one. If you modify this ticket's sample code's Counter.vue's defineProps to add an array,

const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
  tags: {
    type: Array,
    default(raw) {
      return []
    }
  }
});

Instead of getting the original error from this bug you get the 'no default export' error instead. Also if you use the unmodifed example in #782 and run 'npx astro check' you also get the 'no default export' error (after removing the unused import FormattedDate line in index.astro because that trips up astro check first).

[jerry84]

I manage to solve this issue by using type-based declaration instead of runtime. I guess it is the best practice when using Vue component in Astro. In addition the typing is also better by doing that in the Astro file :)