Installation of PrimeVue Components

[cvkmohan]

I have done the normal live_vue installation in the Phoenix Application. It is working fine. I wanted to integrate PrimeVue components.
I have done npm install primevue @primevue/themes

Then in app.js file,

import components from "../vue"

import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

import {getHooks, initializeVueApp} from "live_vue"

const initializeApp = context => {
  
  const app = initializeVueApp(context)
  
  app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
});
  return app
}

const hooks = getHooks(components, {initializeApp})
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
  longPollFallbackMs: 2500,
  params: {_csrf_token: csrfToken},
  hooks: hooks,
})

Now, in vue component file

<script setup lang="ts">
import Button from 'primevue/button'
</script>

<template>
  <Button label="Submit" />
</template>

I expected the button to render. However, the styles of the button are missing. What am I missing?

[cvkmohan]

I am finding this warning from vite in the logs.

[Valian]

Thanks for the report! Will try to replicate and get back to you

[Valian]

@cvkmohan I was able to replicate the issue. You can fetch the newest main branch, run example_project and go to http://localhost:4000/prime_vue to validate.

PrimeVue does some weird shit when it comes to loading CSS, they do it with custom, lazy scripts. Initially, button is unstyled because CSS variables for a button are not loaded.

But if you click on a navigation entry (which triggers live reload, basically mounting the app again) then styles are visible

I have no idea why that behaviour occurs, it would require some more digging... could you try to do it?

Also, your warning about undefined $primeVue is happening during SSR. It's something I have to fix 👍

[cvkmohan]

Thanks. You had to take a lot of effort that has nothing related to your project.
Yes, there is something weird on how primevue loads styles. I tried another experiment. There is this https://tailwind.primevue.org/ - which has tailwind presets for the primevue UI. I reasoned that - as tailwind is already integrated into the stack, there may be better chances of success. However, I ran into the same issue. Yes, the CSS gets loaded sometimes - and - many times the styles go missing.

const initializeApp = context => {
  
  const app = initializeVueApp(context)

  app.component("Button", Button);

  app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
});
  return app
}

After adding the app.component("Button", Button); statement, mostly things are working. But, occasional css missing problem is persisting.
I will continue investigation - and - if anything interesting comes up, I will report back.

Thanks again for the library.

Any progress on the form example? I am essentially looking to tie the validate event of LiveView onto the form component. I guess that is being greedy. :)

[Valian]

@cvkmohan I've fixed it.

It turns out I was mounting Vue instance before initializing PrimeVue, that's why it was not working after page refresh 😅

This is a correct implementation of initializeApp

const initializeApp = ({ createApp, component, props, slots, plugin, el }) => {
    const app = createApp({ render: () => h(component, props, slots) })
    app.use(plugin)
    app.use(PrimeVue, { theme: { preset: Aura } })
    app.mount(el)
    return app
}

You can check main branch now, it should be working out of the box 😉