1

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?

Question3r
  • 2,166
  • 19
  • 100
  • 200

0 Answers0