CODEWITHSUNDEEP
vue.jsflexboxcss-gridprimevue
xor007
xor007

Reputation: 1006

Primevue Grid and Flex layouts not rendering correctly

Non WebDev here trying to build a basic UI with primevue on vue3. Tried to run the basic demo but with some components included. Don't know if components come with their own CSS dependencies.

Bellow is my html code. I have also tried using a vue project with separate components and gottenthe same result

Basic example fails:

<html>
    <head>
        <meta charset="utf-8">
        <title>PrimeVue Demo</title>
        <link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
        <link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
        <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">

        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://unpkg.com/primevue/inputtext/inputtext.min.js"></script>
    </head>

    <body>
        <div id="app">
            <p-inputtext v-model="val"></p-inputtext>
            <h6>{{val}}</h6>
        </div>


<div class="p-d-flex">
    <div class="p-mr-2">Item 1</div>
    <div class="p-mr-2">Item 2</div>
    <div>Item 3</div>
</div>

<div class="p-grid">
    <div class="p-col-4">4</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
</div>

<div class="p-grid">
    <div class="p-col-2">2</div>
    <div class="p-col-6">6</div>
    <div class="p-col-4">4</div>
</div>

        <script>
            const {createApp, ref} = Vue;

            const App = {
                setup() {
                    const val = ref(null);

                    return {
                        val
                    };
                },
                components: {
                    'p-inputtext': primevue.inputtext
                } 
            };

            createApp(App).mount("#app");
        </script>
    </body>
</html>

Should render 1 row for flex items and 2 rows for numbers in grid layout. instead it renders all rows with no styling. What am I missing?:

incorrectvuerendering

Upvotes: 2

Views: 9023

Answers (3)

user2209120
user2209120

Reputation: 71

The CDN method works!! However I downloaded the file and placed this

   <link rel="stylesheet" href="static/primevue/primeflex.min.css" />

inside the head section of my html file.

However it did not work as per the documentation. I had to remove the p- for it to work:

<div id="app" class="grid">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

Upvotes: 1

Fleyton
Fleyton

Reputation: 56

In case you do it through npm, After installing the package, don't forget to include the CSS file, in my case, I included it in my main.js just adding this line.

import 'primeflex/primeflex.css';

https://primefaces.org/primevue/showcase/#/primeflex

Upvotes: 3

Anurat Chapanond
Anurat Chapanond

Reputation: 2987

In order to use prime vue's flex and grid layout, you need to load PrimeFlex.

https://primefaces.org/primevue/showcase/#/primeflex

The documentation only has npm setup but you may be able to include the following link.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/primeflex.min.css" rel="stylesheet">

Upvotes: 6

Related Questions