Search code examples
vue.jsflexboxcss-gridprimevue

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

Solution

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