Nuxt / Vue 2 + Typescript – VS Code props Autocomplete

Question

Coming from React I've recently started to work on a Nuxt project. Unfortunately I was not able to set up the autocompletion/suggestion for props in VSCode (Vetur is installed). Let me show you an example for a prop called '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 /> // I expected VSCode to give me suggestions about the props I can pass to ComponentA here but nothing is showing up unfortunately
</template>

<script lang="ts">
import Vue from "vue";
import ComponentA from "@/components/ComponentA"

export default Vue.extend({
  components: {
    ComponentA
  }
});
</script>

Here is one more Screenshot of what I am trying to achieve:

VSCode Props Autocompletion

Any suggestions? Thanks in advance!

Answer 1

I ran into the same problem when switching from WebStorm to VS Code. The props autocompletion is an intellisense feature, after some research I manage to find a solution for it on VS Code.

Install vetur and vue-intellisense and follow the instructions on https://github.com/CyCraft/vue-intellisense#readme