I have a primevue component like this:

<template>
  <DataView :value="schoolsCollection" layout="grid">
    <template #grid="slotProps">
      <div class="grid grid-nogutter">
        <div
          v-for="(item, index) in slotProps.items"
          :key="index"
          class="col-12 sm:col-6 md:col-4 xl:col-6 p-2"
        >
          <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
            Hi
          </div>
        </div>
      </div>
    </template>
  </DataView>
</template>

My main.js is like this:

import PrimeVue from 'primevue/config'
import 'primevue/resources/themes/aura-light-green/theme.css'

...

app.use(PrimeVue)

...

The issue is that they layout for this data view is always a list view with one item per row, rather than a grid like here: https://primevue.org/dataview/

Also, looks like the border-1 is not a valid class, where is that from? The documentation is not at all clear here. Here’s a screen shot of what gets rendered – I would expect the two “Hi” messages to be in a grid (on a single line) plus the border should work. That documentation page is not complete, seems like, because it does not work for me like it does in the demo: