Having recently made the switch from Vue2 to Vue3, I find myself a bit perplexed about the best approach for sharing props among multiple components. My goal is to create input components that can share common props such as "type", "name", and so on. Previously, I achieved this using mixins, but I'm unsure if this method is still considered the most effective.
Allow me to illustrate an attempt I made utilizing the options-api:
// Home.vue
<template>
<p>Home</p>
<p>{{ type }}</p>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { sharedInputProps } from '../admin/composables/sharedInputProps'
export default defineComponent({
props: {
...sharedInputProps,
},
setup() {
return {
}
},
})
</script>
// sharedInputProps.ts
import { ComponentPropsOptions } from 'vue'
export const sharedInputProps: ComponentPropsOptions = {
type: {
type: String,
required: true,
default: 'text',
}
}
This implementation works, but unfortunately, I do not receive any typehinting or autocompletion in my IDE regarding the props in Home.vue (in this particular case <p>{{ type }}</p>.
If we look at how I approached it with mixins:
// Home.vue
<template>
<p>Home</p>
<p>{{ type }}</p>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import InputProps from '../admin/mixins/InputProps.vue'
export default defineComponent({
mixins:[
InputProps,
],
setup() {
return {
}
},
})
</script>
// InputProps.vue
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
props: {
type: {
type: String,
required: true,
default: 'text',
}
},
})
</script>
This method functions as intended and provides accurate typehinting and autocompletion.
However, I am curious about how one would achieve this using the composition-api and the defineProps method. I managed to directly define the props in Home.vue with typehinting and autocompletion, demonstrated below:
// Home.vue
<template>
<p>Home</p>
<p>{{ type }}</p>
</template>
<script setup lang="ts">
import { defineProps, withDefaults } from 'vue'
interface Props {
type?: string
}
const props = withDefaults(defineProps<Props>(), {
type: 'text',
})
</script>
As stated in the documentation (https://vuejs.org/guide/typescript/composition-api.html#typing-component-props), loading from an external file is not supported.
Therefore, my question arises - given that using an external file with the composition-api is not yet supported and typehinting/autocompletion are absent when utilizing an external file with the options-api and the spread operator to destructure an object, is mixins still the preferred practice for prop sharing? Or could there be a misconfiguration in my sharedProps.ts file (or elsewhere)?
I am currently running Vue 3 version 3.2.47 and leveraging PHPStorm version 2023.1 as my IDE.