Vue 3 Development with the PrimeVue Framework — Cards, Deferred Content, and Fieldsets

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.

Cards

Cards are containers that house content of our choice.

To add it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Card from 'primevue/card';
import Button from 'primevue/button';
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("Button", Button);
app.component("Card", Card);
app.mount("#app");

App.vue

<template>
  <div>
    <Card>
      <template #header> Header </template>
      <template #title> Advanced Card </template>
      <template #content> Lorem ipsum dolor sit amet </template>
      <template #footer>
        <Button icon="pi pi-check" label="Save" />
        <Button
          icon="pi pi-times"
          label="Cancel"
          class="p-button-secondary"
          style="margin-left: 0.5em"
        />
      </template>
    </Card>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

We add the Card component and populate the slots it provides to add our own content.

The header slot lets us add a header.

title lets us populate the title.

content lets us populate the main content.

footer lets us populate the footer.

Deferred Content

The DeferredContent component lets us load content only when the items inside are in the viewport.

To use it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import DeferredContent from 'primevue/deferredcontent';
import Card from 'primevue/card';
import DataTable from 'primevue/datatable';
import Column  from 'primevue/column';
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("DeferredContent", DeferredContent);
app.component("DataTable", DataTable);
app.component("Column", Column);
app.component("Card", Card);
app.mount("#app");

App.vue

<template>
  <div>
    <DeferredContent>
      <DataTable :value="cars">
        <Column field="vin" header="Vin"></Column>
        <Column field="year" header="Year"></Column>
        <Column field="brand" header="Brand"></Column>
        <Column field="color" header="Color"></Column>
      </DataTable>
    </DeferredContent>
  </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 wrap DeferredContent around the table which we want to load only when the items are in the viewport.

Fieldset

We can add the Fieldset component to add a box with content.

To use it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import Fieldset from 'primevue/fieldset';
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("Fieldset", Fieldset);
app.mount("#app");

App.vue

<template>
  <div>
    <Fieldset legend="Godfather I"> Lorem ipsum </Fieldset>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

The legend text is displayed at the top of the box.

We can populate the legend slot to add a custom header:

<template>
  <div>
    <Fieldset>
      <template #legend> Header Content </template>
      Content
    </Fieldset>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

And we can take it toggleable with the toggleable prop:

<template>
  <div>
    <Fieldset toggleable>
      <template #legend> Header Content </template>
      Content
    </Fieldset>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},
};
</script>

Conclusion

We can add various containers for content into our Vue 3 app with PrimeVue.