vue.jsvuejs3primevue

Style does not apply to primevue documentation examples


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");

This is the rendering I get :
enter image description here

Edit: After adding import 'primeflex/primeflex.css', it's better but I still don't have the same rendering as in the documentation : enter image description here


Solution

  • 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'