I'm trying to get the Dialog component of the Primevue library to work. I copied and pasted the example from the documentation and the rendering is nothing like it. It seems that CSS file imports are missing, but I can't find anything to help me in the documentation.
Here's my App.vue file (example from the documentation) :
<script lang="ts" setup>
import { ref } from 'vue';
import { Button } from 'primevue';
const visible = ref(false)
</script>
<template>
<Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
<span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
<div class="flex items-center gap-4 mb-4">
<label for="username" class="font-semibold w-24">Username</label>
<InputText id="username" class="flex-auto" autocomplete="off" />
</div>
<div class="flex items-center gap-4 mb-8">
<label for="email" class="font-semibold w-24">Email</label>
<InputText id="email" class="flex-auto" autocomplete="off" />
</div>
<div class="flex justify-end gap-2">
<Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
<Button type="button" label="Save" @click="visible = false"></Button>
</div>
</Dialog>
</template>
And the main.ts file:
import './assets/main.css'
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import App from './App.vue'
import Aura from '@primevue/themes/aura';
import 'primeicons/primeicons.css'
const app = createApp(App);
app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
prefix: 'p',
}
}
});
app.mount("#app");
Edit:
After adding import 'primeflex/primeflex.css'
, it's better but I still don't have the same rendering as in the documentation :
The missing part is Primeflex, which is used in documentation examples and accompanies Primevue without being a part of it.
It should be installed and imported among other styles:
import 'primeflex/primeflex.css'