Styling problem with Primevue with dialog component

Question

Im trying to implement a simple dialog, but the styles dont apply like it would do This is the component

    <template>
    <div class="card flex justify-center">
        <Dialog v-model:visible="dialogVisible" modal header="Register Accountant" :style="{ width: '25rem'}">
            <div class="flex items-center gap-4 mb-4">
                <label for="name" class="font-semibold w-24">Name</label>
                <InputText v-model="name" required id="name" class="flex-auto" autocomplete="off"></InputText>
            </div>
            <div class="flex items-center gap-4 mb-4">
                <label for="birthDate" class="font-semibold w-24">Birth date</label>
                <DatePicker v-model="birthDate" name="birthDate" fluid/>
            </div>
            <div class="flex justify-end gap-4">
                <Button label="Save" @click="saveAccountant" />
            </div>
        </Dialog>
    </div>
</template>

In main.ts I only implement primevue, because it throws error when I tried to import any css from Primevue

import './assets/main.css'
import PrimeVue from 'primevue/config'
import { createApp } from 'vue'
import App from './App.vue'
import '/node_modules/primeflex/primeflex.css';
import "primeicons/primeicons.css";


const app = createApp(App)
app.use(PrimeVue)
app.mount('#app')

I have installed: @primeuix/themes, @primevue/themes, primevue, primeflex and prime

Here is an example how look the dialog:

I think you must set the theme. Look the docs: primevue.org/vite — Flo
– Flo, Commented Jun 27 at 9:37
Try importing a theme; see docs as @Flo suggested. Like this: import Aura from '@primeuix/themes/aura' — Kalnode
– Kalnode, Commented Jun 27 at 11:44

AMIRKIAN · Accepted Answer · 2025-08-19 13:46:47Z

0

import './assets/main.css'
import PrimeVue from 'primevue/config'
import Aura from '@primeuix/themes/aura';
import Dialog from 'primevue/dialog';
import Button from "primevue/button"
import { createApp } from 'vue'
import App from './App.vue'
import '/node_modules/primeflex/primeflex.css';
import "primeicons/primeicons.css";

const app = createApp(App)

app.component('Button', Button);
app.component('Dialog', Dialog);
app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
});
app.mount('#app')

From version 4 onwards, you must import one of the themes.

answered Aug 19 at 13:46

AMIRKIAN

122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Styling problem with Primevue with dialog component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related