Local registered components are not "recognized" if script content is in a separate file

[gertqin]

In our apps we currently have the script part in a different file using the src attribute (as ts support in .vue files were lacking back then). Unfortunately volar doesn't register the locally registered components in this case, and therefore we don't get all the great component type checks.

[johnsoncodehk]

We can't support this for now, because vue have not export components types by registered, see: https://github.com/vuejs/vue-next/blob/e3568bae276889cee60f4e84321a287125014e86/packages/runtime-core/src/componentOptions.ts#L127

So I'm doing some hacking to get components types (export defineComponent args additional), but this hacking is only working for SFC.

[gertqin]

I see, maybe we should create a issue in the vue repo then (if you haven't already). I think they are working to improve the typings a lot for vue 3.1.

[johnsoncodehk]

Closed for now because I want to focus on what problems I can handle.

If vue 3.1 has updates for this just let this issue reopen.

[gertqin]

I just had a thought - could a work around be to have an option to just register all .vue files as global components? That could be very useful in our case as the current "any" type is completely useless.

[johnsoncodehk]

This method is not feasible. I have to make sure that the component name and template tag are mapped correctly. The names of locally registered components may be different.

If you really need to use <script src>, you can return components in setup():

import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  setup() {
    return { HelloWorld } // equal `components: { HelloWorld }`
  },
})

[gertqin]

I see. My problem is that we have a large app with this setup, and I would really like to avoid having modify all existing components to get typechecking - especially doing something like returning the component from setup, which potentially could lead to strange bugs.

I could autogenerate a file myself registering all components as globals, but then we have to update that whenever we create a new components. :/

[johnsoncodehk]

If you want to avoid really return component from setup, we also has a types only way:

export default defineComponent({
  components: {
    HelloWorld
  },
  setup() {
    const returns = { /* ... original returns ... */ }
    return returns as typeof returns & {
      HelloWorld: typeof HelloWorld,
    }
  },
})

If you want to avoid modify all existing components, we must wait for defineComponent types update (or you can improve it you self).

I think the registering all components as globals way not a really good idea... you will see all components is exposed.

[gertqin]

Aha, this is actually not too bad

  const components = {
    HelloWorld
  };
export default defineComponent({
  components,
  setup() {
    const returns = { /* ... original returns ... */ }
    return returns as typeof returns & typeof components
  },
})

I'll experiment a bit more with it. Thanks!