Why doesn't vue-tsc disallow unknown tags/components?

[Doeke]

<script setup>
</script>
<template>
  <FooBar />
</template>

This is of course a runtime error, but vue-tsc does not raise an error even though it knows the component is not defined (it has type unknown when I hover it).

I found the eslint rule vue/no-undef-components but it is pretty limited and doesn't work with global components

Why doesn't vue-tsc disallow unknown tags/components? Is there an option that I'm missing?

[so1ve]

It's vue's behavior - if the component is not resolved, it will render a FooBar tag directly.

[Doeke]

I think Vue will not render it, the runtime error is like

Failed to resolve component: FooBar
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

In my projects it's always indicative of a missing component or a typo and I think it would be really helpful if vue-tsc could detect these mistakes too

[so1ve]

Actually, Vue will render them.

You expect a new option to detect these unresolved components?

[Doeke]

Yes such an option would be great to have in vueCompilerOptions. I can't think of actual use cases for rendering unresolved components anyway so I think the option could be opt-out rather than opt-in too

[nickofthyme]

Yes I raised a similar question here in SO. Coming from a react background this is strange behavior.

I think it should be practical for any PascalCase components to trigger a resolve requirement. But for any other case it renders as-is. This should not conflict with native html tags as they are all flatcase.

But I think this should probably be opt-in at least at first.

[nickofthyme]

I believe this is answered by #5142 (comment).

@KazariEX Do you mind marking this as answered?