Auto-import when template and script are in different files

[customautosys]

Dear Razvan,

I like to separate my code into scss, html and ts files like this in my Vue files:

<style src="./component/component.scoped.vue.scss" lang="scss" scoped></style>
<template src="./component/component.vue.html" lang="html"></template>
<script src="./component/component.vue.ts" lang="ts"></script>

Previously, I used importStrategy: 'all', but I notice this has been removed. Auto-import doesn't work when I do this.

Is there any way to get the auto-import working when my styles, templates and scripts are separated in this way?

Thanks a lot!

Cheers,
Wilson

[customautosys]

Hi, any help on this? The tree shaking is not working when referencing external files.

[customautosys]

Hi as mentioned by @yusufkandemir, I am willing to give a try at doing the PR. However, please give me the go-ahead as I am given to understand that not all PRs will be accepted as it may be complex. Personally I think it will probably be just an issue of modifying the regex for the Vue transform.

[rstoenescu]

Hi @siauderman
Unfortunately, it's not a matter of improving a regex. This would require a lot of work. A LOT. And let's say that for q/app-webpack it takes X amount of time. For q/app-vite it would take 3X. The runtime overhead would increase a lot too, and this for a piece of code that needs to run as fast as possible otherwise the DX decreases exponentially. Regardless if devs would use SFCs in this way or not, the code would still need to run extra things just to make sure it doesn't misses anything. It just doesn't makes sense and enough value to do it.
Furthermore, this kind of usage of SFCs is not really recommended by the Vue team either (it's not "banned" just not recommended). We really recommend sticking with one file which is also the main point with SFCs. If the SFCs grow large, then you're doing it wrong. More granularity is needed as Vue components should in theory do one thing and one thing only (for perf too).
Sorry if this is not what you'd like to hear, but it is what it is.

[customautosys]

Ok, very well then.

My idea was just to use specific extensions *. vue.html, *.vue.ts and *.vue.scss (because I used to use https://github.com/pksunkara/vue-builder-webpack-plugin but now it doesn't work so I created a simple command line tool with the same functionality that can be run in either webpack or Vite with the appropriate plugin https://github.com/siauderman/vue-file-generator) so I felt that it was just a matter of changing the regex.

But never mind if it's not allowed.