Vue <script setup> not working

[DerYeger]

What version of astro are you using?

1.0.5

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

Importing a Vue component "B" in a Vue component "A" breaks the build, if the import happens in a <script setup> block as seen below. This should be working as described here.

<script setup lang="ts">
import B from './B.vue'
</script>

The following method works, but is cumbersome.

<script lang="ts">
import { defineComponent } from 'vue'
import B from './B.vue'

export default defineComponent({
  components: {
    B,
  },
})
</script>

Link to Minimal Reproducible Example

https://github.com/DerYeger/astro-vue-import-reproduction

Participation

• I am willing to submit a pull request for this issue.

[darusk]

This also might be some form of clash in the way Vue and/or [p]react components are rendered. If preact and react are removed from the astro.config.mjs file, the example seems to build ok.

If either react or preact integrations are enabled, and the Vue component uses the <script setup> composition API you get the following error during build which was what was originally shown on the support thread:

 generating static routes 
▶ src/pages/index.astro
 error   Unable to render A!

  This component likely uses @astrojs/react, @astrojs/preact, @astrojs/vue or @astrojs/svelte,
  but Astro encountered an error during server-side rendering.

  Please ensure that A:
  1. Does not unconditionally access browser-specific globals like `window` or `document`.
     If this is unavoidable, use the `client:only` hydration directive.
  2. Does not conditionally return `null` or `undefined` when rendered on the server.

  If you're still stuck, please open an issue on GitHub or join us at https://astro.build/chat.

It however runs fine on the dev server

[natemoo-re]

Thanks for digging in, @bluwy! I'll take a look at this.

[Satont]

Same here, by the way.

[darusk]

Was looking at this a little more. If you render component 'A' with the client:only="vue" directive it seems to build ok. However the components are literally only templates, so I imagine Vue must hit one of the conditions the error mentions when using the composition API.

[diegoleme]

Same here. Version 1.1.3

[alexbruno]

It works for me!
I'm using just Astro + Vue in 3 projects. Every Vue component is using script setup and everything is working and building ok.
So I guess this happens only if you have other front-end integrations running in the same project like @darusk already suggested.
Astro and Vue versions: latest, ever!