Vue 3 Development with the PrimeVue Framework — Data Views

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Data View

We can use PrimeVue’s DataView component to add data views into our app.

For instance, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import DataView from 'primevue/dataview';
import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions';
import Panel from 'primevue/panel';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("DataView", DataView);
app.component("DataViewLayoutOptions", DataViewLayoutOptions);
app.component("Panel", Panel);
app.mount("#app");

App.vue

<template>
  <div>
    <DataView :value="cars" layout='grid'>
      <template #list="slotProps">
        <div class="p-col-12">
          <div class="car-details">
            <div>
              <div class="p-grid">
                <div class="p-col-12">
                  Vin: <b>{{ slotProps.data.vin }}</b>
                </div>
                <div class="p-col-12">
                  Year: <b>{{ slotProps.data.year }}</b>
                </div>
                <div class="p-col-12">
                  Brand: <b>{{ slotProps.data.brand }}</b>
                </div>
                <div class="p-col-12">
                  Color: <b>{{ slotProps.data.color }}</b>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #grid="slotProps">
        <div style="padding: 0.5em" class="p-col-12 p-md-3">
          <Panel :header="slotProps.data.vin" style="text-align: center">
            <div class="car-detail">
              {{ slotProps.data.year }} - {{ slotProps.data.color }}
            </div>
          </Panel>
        </div>
      </template>
    </DataView>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

We set the value prop to populate it with data.

The list slot is used to rendering items with layout prop is set to list .

And the grid slot is used for rendering items when the layout prop it set to grid .

We get the entry data with the slotProps.data property.

The header slot lets us populate the header content.

And the footer slot lets us populate the footer content:

<template>
  <div>
    <DataView :value="cars" layout="list">
      <template #header>Header </template>
      <template #footer>Footer </template>
      <template #list="slotProps">
        <div class="p-col-12">
          <div class="car-details">
            <div>
              <div class="p-grid">
                <div class="p-col-12">
                  Vin: <b>{{ slotProps.data.vin }}</b>
                </div>
                <div class="p-col-12">
                  Year: <b>{{ slotProps.data.year }}</b>
                </div>
                <div class="p-col-12">
                  Brand: <b>{{ slotProps.data.brand }}</b>
                </div>
                <div class="p-col-12">
                  Color: <b>{{ slotProps.data.color }}</b>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #grid="slotProps">
        <div style="padding: 0.5em" class="p-col-12 p-md-3">
          <Panel :header="slotProps.data.vin" style="text-align: center">
            <div class="car-detail">
              {{ slotProps.data.year }} - {{ slotProps.data.color }}
            </div>
          </Panel>
        </div>
      </template>
    </DataView>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      cars: [
        { brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff" },
        { brand: "Audi", year: 2011, color: "Black", vin: "gwregre345" },
        { brand: "Renault", year: 2005, color: "Gray", vin: "h354htr" },
      ],
    };
  },
  methods: {},
};
</script>

Conclusion

We can add a data view into our Vue 3 app with PrimeVue’s DataView component.