I have enabled the Vue integration for Astro, and I am able to add simple static (e.g. Button) and reactive (e.g. Accordion) elements (including styling) into an Astro project.

However, when trying to add more complex ones, e.g. Menubar, this only results in an empty container without content (the red square is a screenshot annotation):

Here’s my setup:

• Added the vuejs integration in astro.config.mjs via vue({jsx: true, reactivityTransform: true,appEntrypoint: '/src/pages/app',}),
• Added a custom appEntrypoint for tailwind presets:

import PrimeVue from 'primevue/config';
import type { App } from 'vue';
import Aura from 'presets/aura'; //import preset

export default (app: App) => {
    app.use(PrimeVue, {
        unstyled: true,
        pt: Aura,
    });
};

• In index.astro:

---
import Accordion from 'primevue/accordion';
import Button from 'primevue/button';
import Menubar from 'primevue/menubar';
---

<Accordion client:visible />
<Menubar client:only="vue" :model="items" />
<Button client:only="vue" label="Submit" icon="pi pi-check" />

I’ve also played around with passing astro props as the model parameters for Menubar but I am not sure if this is actually needed as I would assume that the default component has some defaults included.