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?
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...
- Type:
boolean | object
- Default:
false
Enables strict templates.When set to true, all
checkUnknown*
options will be enabled.
- Type:
boolean
Check unknown props. If not set, uses the
strictTemplates
value.
- Type:
boolean
Check unknown events. If not set, uses the
strictTemplates
value.
- Type:
boolean
Check unknown components. If not set, uses the
strictTemplates
value.
Also see https://github.com/vuejs/language-tools/issues/5142#issuecomment-2608798918