PrimeVue v4 styled mode

Developer corner
, ,
1

I’m trying to build a PrimeVue Data Table component, and pulling the styles in seems to be having some sort of issue. The table doesn’t show up, but intermittently does. It will either show as an empty white component, or an empty black component if I enable the styles in the PrimeVue configuration.

Does anyone know how to bring in styles with PrimeVue in Weweb? Thank you so much!

Edit: I forgot to include the source code I’m using. Here’s the Vue component as I have it now:

<template>
  <div class="my-element">
    <PVDataTable :value="content.rows" :key="renderKey">
      <PVColumn v-for="col of content.columns" :key="col.field" :field="col.field" :header="col.header" />
    </PVDataTable>
  </div>
</template>

<script>
import PrimeVue from "primevue/config"
import Aura from "@primevue/themes/aura"
import PVDataTable from "primevue/datatable"
import PVColumn from "primevue/column"

export default {
  components: [PVDataTable, PVColumn],

  beforeCreate: function () {
    // Add https://unpkg.com/@primevue/themes/umd/aura.min.js as a script tag in the head
    const scriptTag = document.createElement("script")
    scriptTag.src = "https://unpkg.com/@primevue/themes/umd/aura.min.js"
    wwLib.getFrontDocument().head.appendChild(scriptTag)

    console.log("Before Create is getting Called")
    this.$.appContext.app.component("PVDataTable", PVDataTable)
    this.$.appContext.app.component("PVColumn", PVColumn)
    if (!this.$.appContext.app.config.globalProperties.$primevue) {
      this.$.appContext.app.use(PrimeVue, {
        unstyled: true,
        theme: {
          preset: Aura,
          options: {
            prefix: "ww-pv",
            darkModeSelector: "system",
            cssLayer: {
              name: "primevue",
              order: "tailwind-base, primevue, tailwind-utilities",
            },
          },
        },
      })
    }
  },
  props: {
    content: { type: Object, required: true },
  },

  data() {
    return {
      renderKey: 0,
    }
  },

  watch: {
    "content.columns": {
      handler() {
        this.renderKey++
      },
      deep: true,
    },
    "content.rows": {
      handler() {
        this.renderKey++
      },
      deep: true,
    },
    renderKey: function () {
      console.log("Render Key is getting Called")
      console.log(this.$el)
    },
  },

  mounted() {
    console.log("Mounted is getting Called")
    this.renderKey++
    console.log(this.content.columns)
  },
}
</script>

<style lang="scss" scoped>
.my-element {
  p {
    font-size: 18px;
  }
}
</style>
2

The issue most probably stems from you loading the theme via a script tag, try downloading the stylesheet/js and adding it locally to the component. That should probably fix the issue.

3

any reason why you load the theme as script tag and also import it as a dependency?

4

Hi all, sorry, I only added the script tag recently to try to fix the normal import method.

@Broberto is installing via npm what you mean by downloading, and importing it from the primevue node_modules what you mean by ‘adding it locally’?

I’ll take the script tag out and try again in the meantime. Thank you both for responding!

5

I think installing should be enough :pray:t2: