LiveView.JS in live.html.heex?

Phoenix Forum Questions / Help
,
1

Hi everybody,

I was looking to have a Tailwind UI navbar and mobile menu with a menu toggle button phx-click={JS.toggle(to: "#mobile-menu")} in live.html.heex.

So I understand LiveView.JS isn’t available in the live template out of the box. I’m guessing that there’s a reason for that. Hence, I haven’t tried setting that up before trying to find this already being done by more skilled people. I very much want it to be “done right”.

Also, as a follow on, if one would go that route I guess one would also like to use handle_event for events from the live template.

Regarding having common callbacks for all live views I think this post hints at a possible solution: Tracking inactivity in a Phoenix LiveView app - #5 by davidmeh.

Wiser people of the community – should one go in this direction at all?

Is there an apparent solution to this?

Feels like there’s an apparent solution but I’m sorry that I haven’t been able to find it.

Thanks in advance for any response and take care :pray:

2 Likes
2

Hey mate.

One option is to do away with the live.html.heex altogether and create a layout component that you use in your liveviews. The layout component will include your navigation bar and whatever else you want, with the inner content being the page contents.

You can see it talked about here:

3 Likes
3

That makes sense.

Thank you very much!

4

It’s available in the live template. What version are you on?

1 Like
5

Rookie mistake – resolved by referring to Phoenix.LiveView.JS instead of just JS. Sorry.

Getting a reply from Chris McChord made my day however :sparkles:

2 Likes