New option to detect unresolved components in template

[nickofthyme]

What problem does this feature solve?

Coming back to vue after a long time in the react world, I setup a basic app with typescript and I found that vue/typescript ignores missing components from the <template>. Or more specifically does not detect unresolved components in 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.

What does the proposed solution look like?

I would like a new option in vueCompilerOptions to enforce PascalCase components in the <template> to be resolved.

See original discussion here #3479

[KazariEX]

See https://github.com/vuejs/language-tools/wiki/Vue-Compiler-Options#stricttemplates.

The checkUnknown* options will be released in the next version, you can use strictTemplates first.