Transitioning from React to a Nuxt project, I've encountered an issue with setting up autocompletion for props in VSCode (Vetur is installed). Let me illustrate with an example using a prop named 'alignment':
ComponentA:
<template>
<div :class="styles[alignment]">
/* Some Content */
</div>
</template>
<script lang="ts">
import Vue, { PropType } from "vue";
import styles from "./styles.module.scss?module";
type AlignmentOptions = "left" | "right" | "center";
export default Vue.extend({
props: {
alignment: {
type: String as PropType<AlignmentOptions>,
default: "left"
}
},
data() {
return {
styles
}
}
});
</script>
ComponentB:
<template>
<ComponentA /> // Expected VC Code suggestions on props here, but no luck
</template>
<script lang="ts">
import Vue from "vue";
import ComponentA from "@/components/ComponentA"
export default Vue.extend({
components: {
ComponentA
}
});
</script>
Check out this Screenshot for reference:
Any advice or ideas on how to resolve this issue? Thank you!