Skip to content

Issue with script setup and in-dom templates #8391

Closed
@cschra

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions