Issue with script setup and in-dom templates

[cschra]

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-rsn38e?file=index.html

Steps to reproduce

I am using vite in combination with laravel and so my HTML is partly generated by php, hence I am using in-dom-templates for the vue instance. For the logic I would like to use the composition API with script setup. However when setting this up, the variables and functions are not scoped correctly/not working properly. Strangely tho, the mounted hook of the component gets executed.

I recreated the issue inside stackblitz for you to have a look on.
https://stackblitz.com/edit/vitejs-vite-uetc6h?file=index.html -> composition API standard export works
https://stackblitz.com/edit/vitejs-vite-rsn38e?file=index.html -> composition API script setup does not work

What is expected?

I expect the in-dom template to be correctly rendered and responsive, when using script setup composition API. Or at least a console note that script setup is incompatible with in-dom templates.

What is actually happening?

Reactivity is not working. Furthermore, when using npm run build to get a production build, the app will be rendered as a blank page (mounted/lifecycle hooks will be called) - replacing the in-dom template completely (in development mode it works fine tho). I have created a stackblitz example for this aswell.

And lastly, what also is unfortunate, that neither with development nor production build the console does not even give a warning. (because the code runs flawless I assume - note: mounted hook is executed, but dom-template is either replaced or not reactive)

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

I initially though this might be an issue of the bundler (vite) and created already an issue there. However, this problem persists also with laravel-mix, hence I assume the problem is more generic and could be inside vue itself, hence I am "reposting" it here.

[baiwusanyu-c]

I think this is all in line with expectations, because your html code is written directly in index.html, not in the .vue file, which makes them not recognized by the vue compiler and compiled into rendering functions, and because createApp (App).mount('#vue-app'), then onMounted will naturally execute.

[cschra]

Thank you for your answer, but the 'in-dom-template' is a viable feature as per the official Documentation

Vue will automatically use the container's innerHTML as the template if the root component does not already have a template option.

Also, if it is in line with expectations, why does it behave differently with and without script setup. Please see the provided examples, where the standard export syntax with composition or options API works, but with script setup it does not.
This breaks consistency and at least for me is confusing, because vue does not provide a reason, why it works with the one syntax, but not with the other one (when in fact they should be interchangeable).

[baiwusanyu-c]

You are right, the script setup does behave differently

[cschra]

Hey @baiwusanyu-c , thank you for your time and effort, creating a PR to fix this issue!

I already had a look at the vue-core code, but couldn't figure it out - just out of curiosity, with my limited understanding the snap/test changes related to this issue were just wrong before/should have expose this bug, right?

Also, is there a possibility to test your solution by myself? (other than applying your changes locally in my node_modules folder?)

PS: do you have somewhat of an estimate how long it takes for such fixes to get merged in?

[baiwusanyu-c]

I think this may be because the script setup compiler ignored this scenario during the implementation process, which caused problems in using the script setup. Therefore, the relevant test snapshots before may be meaningless, so I updated the snapshots in pr.
But I think the possibility of this change being merged is relatively low, because it will be a somewhat breaking change to script setup. If it can be merged, then everyone is happy, but I still recommend that you don't use setup script in this scenario for now

[cschra]

Mh, this sounds a bit sobering.
In my opinion this is a bug with VueJS and I was hoping that it gets attention and I think it deserves a fix, as a part of the community, who uses vue with serverside languages, relies heavily on the in-dom-template functionality and script setup is much cleaner.

Thanks for your efforts, anyway!

[cschra]

Furthermore, when using npm run build to get a production build, the app will be rendered as a blank page (mounted/lifecycle hooks will be called) - replacing the in-dom template completely. I have created a stackblitz example for this aswell.

Ah, what I just noticed: will this fix the blank page in production mode as well?
I don't know if this is the same issue or if it is related, but could you test in-dom-template with script setup and production mode as well? Or is this rather a compiler/bundler issue?

[yyx990803]

Maybe the doc could be more explicit about this, but <script setup> requires template to be in the same SFC. It cannot work with in-DOM templates.

In short, this was never an intended use case.

[cschra]

@yyx990803 sorry to bring this up again, but with composition API export it is working and shouldn't those 2 be feature equal?
As far as I understand, the script setup is just syntactic sugar for the standard composition API, but maybe I am wrong here...

[yyx990803]

<script setup> requires cross-script-template static analysis. The compilation of the script relies on information about the template.

[cschra]

okay... thanks for the clarification!