#Vue 3 - components inside components don't ork

40 messages · Page 1 of 1 (latest)

amber mesa
#

Hey, client directives can only be used inside Astro components

sturdy ravine
#

Yes, I thought so @amber mesa but my issue is that I can't use Vue components inside another Vue component.

Is this a bug in Astro, or do I need to only use Vue components inside .astro files? (And not in .vue components)

#

This is not an issue in normal Vue 3

amber mesa
#

Have you tried without the client:visible?

sturdy ravine
#

Yes, I tried that first

amber mesa
#

Do you get any error ?

sturdy ravine
#

No, no error, just that nothing happens

amber mesa
#

Hmm I don't see any reason why simply importing components would not work, would you create a minimal repro so I can take a look?

sturdy ravine
#

Hmm, I'll do some more testing just to make sure I haven't missed anything, if I still encounter issues, I'll make a repro.

Is codesandbox the best, or do you have a better suggestion for a repro?

amber mesa
#

Stackblitz has been more snappy in my experience

amber mesa
sturdy ravine
#

@amber mesa

I have narrowed it down to the following line:

`
<script setup>

const product = await getSingleProduct(props.id) // <- If I uncomment this, it works

</script>
`

This seems to work fine in an .astro page, but not inside a Vue component

#

It's a simple Graphql fetch function

amber mesa
#

I tried to but I couldn't reproduce, if you could create a reproduction it would be much easier to find if it's a bug or a usage issue

amber mesa
#

Nice I'll take a look!

tight gorge
#

Your problem seems to be:

[Vue warn]: Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered. 
  at <MainButton > 
  at <App>
#

See the console of the component

#

BTW: You dont have a slot in the vue file but try to pass something into the component

drowsy loom
#

I have a similar issue

#

I am using a main vue component in my astro app and I would like to break it down into smaller components by importing them into the main component. This doesn't seem to work. as it "can't be found". Is this possible? What is the Astro way to achieve this?

example:

# pages/about.astro
---
import MyVueComponent from '../components/MyVueComponent.vue';
---
<html>
  <body>
    <h1 class="editable">Use Vue components directly in Astro!</h1>
    <MyVueComponent />
  </body>
</html>

# components/MyVueComponent.vue

... Can't find SubComponent error

<script lang="ts">
import SubComponent from '../components/shared/SubComponent.vue'
export default {
  components: {
    SubComponent
  }
}
</script>
amber mesa
#

Asking because Astro doesn't support vue 2

drowsy loom
#

No. This is just local component registration

#

Vue 3

drowsy loom
#

Update here

#

It appears to not like that its inside a directory i.e components/test/test.vue in the components folder

#

But linking to other components directly within the components/ directory works

#

Organizing components seems important. Not sure if this is a known bug

#

(perhaps a bug with the astro/vue plugin?)

drowsy loom
#

Should I direct this towards that team?

amber mesa
#

Probably. Not sure what's happening here

drowsy loom
#

Is there a channel for that? Sorry I am new to the discord

#

Or you think I should open an issue on the repo?

amber mesa
#

Probably an issue

#

!issue

lean skyBOT
drowsy loom
#

thank you

drowsy loom
#

oh you know what. I think you were right about vue 2 and 3. You have to use the composition API for it to work