Using UIkit (framework not iOS) with liveview?

Phoenix Forum Questions / Help
,
1

I’m trying to use UIkit (https://getuikit.com/) and I have been struggling with it.

When the page renders for the first time everything works fine. All the icons work, etc. However, once the second render happens as part of the socket connecting the uikit components get all wonky. As an example some of the dropdowns stop working, icons disappear, etc.

I assume this is because uikit injects functionality by manipulating the dom after some event. Once liveview messes around in the dom this is partially broken.

I have been trying to understand the uikit JS code but it’s… unlike any JS code that I have ever seen…

Does anybody know if there is some magic liveview hook that I could attach to, together with some magic, undocumented uikit stuff that I could use to make this work?

I have tried things like OnPatchEnd, I have tried hooks for every uikit component with a mounted hook, I have tried global uikit.update(), basically anything that I could think of.

2

I wrote a UIKit wrapper for LiveView + Surface for a SpawnFest three years ago. Not sure if this code will help you but in case you want to see how I managed my JS you could take a look

Warning: The code might suck since it was done in < 2 days and never retouched.

3

Thanks for your link. I did find your repo and had a look. I made the UIKit icon work like this:

  attr :icon, :string, required: true, doc: "Name of the UK icon"
  attr :rest, :global
  def uk_icon(assigns) do
    ~H"""
    <span uk-icon={"icon: #{@icon}"} phx-hook="UIkitIcon" id={"icon-#{:rand.uniform(1_000_000_000)}"} {@rest}></span>
    """
  end

Hooks.UIkitIcon = {
  mounted() {
    this.icon = window.UIkit.icon(this.el);
    this.icon.$reset();
  },
};

Of course, replace window.UIkit as necessary.

1 Like