#How to get primevue (Vue Plugin) working with theming?

5 messages · Page 1 of 1 (latest)

polar rose
#

Hi there, I don't know much about vuejs itself, but I wanted to use some components of primevue. Unfortunately I was unable to get the theming feature working...

I added vuejs following integrations docs

import { defineConfig } from 'astro/config';
import vue from '@astrojs/vue'
export default defineConfig({
    output: 'server',
    integrations: [
        vue({appEntrypoint:'/src/pages/_app'}),
    ]
});

I created the _app.ts like this:

import { type App } from 'vue';
import PrimeVueStyled from 'primevue/config'
import Aura from '@primevue/themes/aura'
import Button from 'primevue/button';

export default (app: App) => {
    app.use(PrimeVueStyled,{
        theme: {
            preset: Aura
        }
    }),
    app.component('Button', Button)
};

I was unsure where the app.component part belonged so i added it in the _app and the actual page itself

---
import Layout from "../layouts/Layout.astro";
import Button from "primevue/button";
import App from './_app'
import { createApp } from "vue";
const app = createApp(App);
app.component('Button',Button)

---
<Layout title="test">
    <div>
        <Button icon="pi pi-home" aria-label="Save" severity="success" label="Submit"></Button>
    </div>
</Layout>

this creates a button, but styling is non-existent (see screenshot)
I think this issue is related to Vite but I'm unsure.

I had my brother who knows vue way better than me look over it but he was also unable to get it to work.

I would appreciate any help

screen.png
tiny harbor
#

Hey! Hmm you shouldn't need to call createApp in your code when you're using the Astro Vue integration.

Does this work if you remove that from your component?

---
import Layout from "../layouts/Layout.astro";
import Button from "primevue/button";

// Remove these lines
// import App from './_app'
// import { createApp } from "vue";
// const app = createApp(App);
// app.component('Button',Button)
---
<Layout title="test">
    <div>
        <Button icon="pi pi-home" aria-label="Save" severity="success" label="Submit"></Button>
    </div>
</Layout>
polar rose
#

Hi @tiny harbor sry for the late response, I was on vacation and didn't notice your response

I literally copied your code into an empty file and got the same unstyled button.

I even updated all packages using npm-check-updates, including Astro to the latest 4.14 that just released but this yields the same result

❯ ~/.bun/bin/ncu -u
Using bun
Upgrading /mnt/ssd/Code/Workspaces/[redacted]/astro/package.json
[====================] 18/18 100%

 @astrojs/node                    ^8.3.2  →   ^8.3.3
 @primevue/auto-import-resolver   ^4.0.0  →   ^4.0.4
 @primevue/themes                 ^4.0.0  →   ^4.0.4
 astro                           ^4.11.5  →  ^4.14.2
 mysql2                          ^3.10.2  →  ^3.11.0
 primevue                         ^4.0.0  →   ^4.0.4
 unplugin-vue-components         ^0.27.2  →  ^0.27.4
 vite-plugin-vuetify              ^2.0.3  →   ^2.0.4
 vue                             ^3.4.31  →  ^3.4.38

Run bun install to install new versions.

(yes i did bun install afterwards, just forgot to copy that in here too)

gilded raptor
gilded raptor