Any vanilla JS component library recommended with Phoenix 1.7?

Hello, I’m begining with Phoenix (1.7) and want to know if anyone is using vanilla JS components in order to design beauty apps easily.

Thanks.

Hey there,

Not sure what you mean by JS components here, but you can use LiveView with React, for instance. See here for how to do it: Stephen Bussey - React in LiveView: How and Why?

This resembles a popular approach of having an “islands architecture”, because you can just use React/Vue/Svelte/whatever for leveraging existing components, without sacrificing LiveView’s benefits

Not sure this is what you’re looking for.

Hello,
I didn’t test it for the moment, but I have Shoelace in my watch list.

2 Likes

Thanks, I’ll try Shoelace, I was using Solidjs instead React but want to develop with PhoenixLiveview and maintain client side as thin as possible but with a good design at the same time.

If this is about design, why use a JS lib instead of a CSS one like https://daisyui.com?

There is also Flowbite.

Or, if you’re up to it, you can use live_svelte and import any svelte component library like Skeleton. I went down this road and it worked as expected but also added some complexity to the project. I ended up removing live_svelte dependency and going back to Phoenix with JS interoperability and importing any libraries I wanted to use.

Thanks to all for your answers.

I’ve tried daisyui and its very good, but I want to test shoelace npm, unfortunately It`s impossible for me using CSS, I suspect its for tailwind.

I want to minimize client-server roundtrip messages so interactions between client elements want to be without sending anything to Phoenix.

Anyone has installed https://shoelace.style/ via NPM in Phoenix?

Have you considered using Alpine.js? It can be a great choice to add some client-side interactivity to your LiveView app if you don’t need a full-blown component library: https://alpinejs.dev

I’ve seen before Alpine, but components aren’t free, so I’ll try shoelace or daisyui.

Thanks for your suggestion

Maybe if you’re following the Laravel instruction, it might work.

Just as an FYI take a look at this issue in Shoelace’s repo. There seems to be an issue with using it with LiveView

Thanks for your message. Perhaps try with daisyui at last if exists problema between shoelace and liveview

Phoenix Components + AlpineJS give me everything I need.

I have really been wanting to try out Lit components though…

I have. It works well, but there is a bit of overhead you need to consider, especially when using components that emit DOM events, which you then need to listen and propagate “upwards” so that liveView handles them. Something like this:

const allRegisteredEvents = []

const TreeEvents = {
  page() {
    return this.el.dataset.page;
  },
  handler() {
    const eventHandler = event => {
      this.pushEventTo(this.el, "nav_change", { checked: event.target.checked });
    };
    return eventHandler;
  },
  mounted() {
    const eventName = "sl-change";

    if (!allRegisteredEvents.includes(eventName)) {
      window.addEventListener(eventName, this.handler())
      allRegisteredEvents.push(eventName)
    }
  },
  destroyed() {}
};

export default TreeEvents;
1 Like

Take a look at live_elements | Hex, it should ease having to do that yourself :slight_smile:

2 Likes

Thanks a lot.

Its an impressive language but The forum its better.