Using "script setup" in VueJS 2.x

Question

<script setup> is a compile-time syntactic sugar for using Composition API inside Single File Components (SFCs) used in VueJS 3.x. I'm trying to get it to work in VueJS 2.x. Composition API is available as a separate module that can be installed in Vue 2.x projects. I installed the package and it compiles and runs, but my bindings do not show anything in the output. Even the simplest ones like:

<script setup>
const msg = 'Hello!'
</script>

<template>
  <div>{{ msg }}</div>
</template>

do not show anything on the webpage. Am I missing something or does it not support Vue 2.x projects?

I only know it with Vue 3. Is there a reason why you don't want to upgrade? — wittgenstein
– wittgenstein, Commented Oct 16, 2021 at 17:19
@wittgenstein: While I so desperately want to switch to Vue 3, the fact that Vuetify (the UI library I have been using) is still stuck in Vue 2.x and the Vue 3 version will not be available for at least 4 months (beta is slated for December though). — dotNET
– dotNET, Commented Oct 17, 2021 at 4:17
@tony19: Yeah, but with 169 items on their todo list, it is a bit too early to use it. — dotNET
– dotNET, Commented Oct 17, 2021 at 9:14
Anyone landing here in 2024, Vue 2.x is no more relevant for new projects. At the time of this post, Vuetify was still stuck in Vue 2.x, which is no longer the case. Vuetify 3.x is already out and fully functional and supports setup script lang="ts" plus much more. — dotNET
– dotNET, Commented Apr 2, 2024 at 10:34

Ohgodwhy · Accepted Answer · 2021-10-16 17:19:55Z

5

According to the github repo, script setup is not part of the composition api and it's the compiler's job to implement this. You can read more in this Git Issue

There's a package that was created to implement this which you can find here, however it doesn't fully implement the spec and also seems to have some functional issues outside of that if you browse the repo.

In short, it doesn't seem worth it to use this in a production environment.

answered Oct 16, 2021 at 17:19

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mhjb · Accepted Answer · 2024-04-01 22:14:57Z

2

Vue 2.7 supports <script setup>; see launch blog post

answered Apr 1, 2024 at 22:14

mhjb

1611 silver badge6 bronze badges

Collectives™ on Stack Overflow

Using "script setup" in VueJS 2.x

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related