🐛 BUG: Can't use <script setup> with Vue 3

[Miguelklappes]

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

I can't use the <script setup> syntax with Vue 3, therefore I am not able to take advantage of some features of this framework.

Steps to Reproduce

1. yarn create astro -- --template framework-vue
2. yarn && yarn dev
3. Edit Vue component and use <script setup> syntax
4. Wait for it to work and it doesn't
5. The errors are the usual Vue warn that happens when you forgot to return something in the setup() function, but here I am using <script setup>, thus properties are always exposed. I expected <script setup> to work as usual.

[Vue warn]: Property "count" was accessed during render but is not defined on instance.

Link to Minimal Reproducible Example (Optional)

https://github.com/Miguelklappes/astro-test

[itday]

The example is reproducible.

In Astro, Vue is supported trough Vue Loader. Unfortunately, this "new" feature is not supported in the Vue loader. There is an open issue in the Vue loader project: vuejs/vue-loader#1804

Currently supported in Astro:

<script>
import {ref} from 'vue';

export default {
  setup() {
    const count = ref(0)
    const add = () => count.value = count.value + 1;
    const subtract = () => count.value = count.value - 1;

    return {
      count,
      add,
      subtract
    }
  }
}
</script>

Supported in native Vue with less boilerplate code:

<script setup>
import { ref } from 'vue';

const count = ref(10);
const add = () => (count.value = count.value + 1);
const subtract = () => (count.value = count.value - 1);
</script>

@matthewp

[matthewp]

Are you sure that we use Vue Loader? I don't see a reference to it. Anyways, thanks for confirming the bug!

[matthewp]

I guess the fix is to use the Vue compiler directly.

[Igloczek]

It's a sugar syntax that vue-loader, and for example Vue plugin for Vite, have implemented and works fine, despite the previous comments. It's not going to be part of the Vue compiler.

So in my opinion, there is no point to wait for anything else than Vite, because otherwise we will have to add support for it to Snowpack Vue plugin.

[FredKSchott]

Thanks for the report! We believe that this has been fixed in astro v0.21, going out today. Let us know if you can still reproduce the issue after updating to v0.21 and we'll be happy to take a look.