Allow src in <script setup>

[customautosys]

Hi, I don't understand the rationale for disallowing scripts to be placed in an external file for <script setup>. Even normal scripts depend on the component's context and yet there is no such restriction. I like to separate my css, html & js by using vue-builder-webpack-plugin. Why can't you allow <script setup> to have an src attribute?

[yoyo930021]

Hi, I don't understand the rationale for disallowing scripts to be placed in an external file for <script setup>. Even normal scripts depend on the component's context and yet there is no such restriction. I like to separate my css, html & js by using vue-builder-webpack-plugin. Why can't you allow <script setup> to have an src attribute?

If you put code outside Vue SFC file, we can't provide any development experience.
Like ref-sugar #222, You will get many error in IDE.

[yyx990803]

Aside from IDE support, <script setup> content is not actually module scope. It is compiled to be wrapped into a function and re-invoked per component instance. The semantics would be incorrect in a standalone js file - e.g. you can't use ES module import/export from it.

If you simply like having the parts in different editor tabs, you can open the same file in different tabs and scroll to different parts (not sure about other IDEs but VSCode can do that just fine)

[jods4]

I wanted to support this issue at one point, then changed my mind back and forth a few time.

If you simply like having the parts in different editor tabs, you can open the same file in different tabs and scroll to different parts (not sure about other IDEs but VSCode can do that just fine)

To me it wasn't about having two views in the IDE. It was more about splitting large components into smaller parts. With other frameworks I was used to having the code and the template in two files next to each other (it was the only way).

I saw the problems though, and came to the conclusion that you can always put code in separate files and import it into your <script setup>. You still benefit from variables export, automatic component and directive registration, nice TS props typing.

👉 To me that suggests that "code writing" improvements shouldn't be limited to <script setup>. Splitting large components into files shouldn't mean giving up on potential auto unref'ing or auto async context flow.