Search code examples
visual-studio-codevuejs3volarvue-typescript

Missing component in Vue does not show type error


Coming back to vue after mostly in react, I setup a basic app with typescript and I found that vue/typescript ignores missing components from the template.

For example take the file below...

<script setup lang="ts">
  import { RouterLink, RouterView } from 'vue-router'
  // import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

The HelloWorld component is used in the template but I commented out the import in the script. But VSCode shows no type error for the missing component, nor does vite complain during compilation. The app renders fine but the missing component is just rendered as a generic HTML element.

If I replace the import, I get full prop type checking.

I haven't seen any docs or issues on this. Is this just unavoidable given the nature of the template? Or is there a configuration/setting/extension I'm missing?


Solution

  • This feature will be available in the latest version of the Vue - Official VSCode extension (aka Vue.volar).

    This is enabled using the checkUnknownComponents option but see all pertinent options below as defined in the wiki...

    stricttemplates

    • Type: boolean | object
    • Default: false Enables strict templates.

    When set to true, all checkUnknown* options will be enabled.


    checkUnknownProps

    • Type: boolean

    Check unknown props. If not set, uses the strictTemplates value.


    checkUnknownEvents

    • Type: boolean

    Check unknown events. If not set, uses the strictTemplates value.


    checkUnknownComponents

    • Type: boolean

    Check unknown components. If not set, uses the strictTemplates value.

    Also see https://github.com/vuejs/language-tools/issues/5142#issuecomment-2608798918