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?

Answer 1

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.

Answer 2

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