I'm using PrimeVue for my Vue3 app and want to have a flexbox without using the toolbar component. When installing Primeflex and importing the CSS file the CSS of the PrimeVue components is broken.
Working code without importing https://unpkg.com/primeflex@^3/primeflex.min.css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- PrimeVue -->
<link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
<link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
<!--
!!! This one here breaks the style !!!
<link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
-->
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
<!-- Dependencies -->
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<!-- Demo -->
<script src="https://unpkg.com/primevue@^3/dataview/dataview.min.js"></script>
<script src="https://unpkg.com/primevue@^3/dataviewlayoutoptions/dataviewlayoutoptions.min.js"></script>
<script src="https://unpkg.com/primevue@^3/dropdown/dropdown.min.js"></script>
<script src="https://unpkg.com/primevue@^3/rating/rating.min.js"></script>
<link href="./index.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<p-dataview :value="products" layout="list">
<template #header>
header goes here
</template>
<template #list="slotProps">
<div>{{ slotProps.data }}</div>
</template>
</p-dataview>
</div>
<script type="module">
const { createApp, ref } = Vue; const App = { setup() { const products = ref(["foo", "bar"]); return { products } }, components: { "p-dataview": primevue.dataview } }; createApp(App) .use(primevue.config.default) .mount("#app");
</script>
</body>
</html>Code breaks when importing this css file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- PrimeVue -->
<link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
<link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
<!--
!!! This one breaks the css !!!
-->
<link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
<!-- Dependencies -->
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<!-- Demo -->
<script src="https://unpkg.com/primevue@^3/dataview/dataview.min.js"></script>
<script src="https://unpkg.com/primevue@^3/dataviewlayoutoptions/dataviewlayoutoptions.min.js"></script>
<script src="https://unpkg.com/primevue@^3/dropdown/dropdown.min.js"></script>
<script src="https://unpkg.com/primevue@^3/rating/rating.min.js"></script>
<link href="./index.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<p-dataview :value="products" layout="list">
<template #header>
header goes here
</template>
<template #list="slotProps">
<div>{{ slotProps.data }}</div>
</template>
</p-dataview>
</div>
<script type="module">
const { createApp, ref } = Vue; const App = { setup() { const products = ref(["foo", "bar"]); return { products } }, components: { "p-dataview": primevue.dataview } }; createApp(App) .use(primevue.config.default) .mount("#app");
</script>
</body>
</html>The PrimeVue docs make sure that I should make use of Primeflex for such usecases.
Is there something that's wrong or missing?
