Migrating to Phoenix LiveView 0.18

Properties with a leading colon

If you're using Alpine as part of your stack, you'll most likely have run into this one.

Problem

# ...
def some_component(assigns) do
  ~H"""
  <div :class="{'hidden': ! show }" >
    <%!-- redacted --%>
  </div>
  """
end
# ...

Solution

# ...
def some_component(assigns) do
  ~H"""
  <div x-bind:class="{'hidden': ! show }" >
    <%!-- redacted --%>
  </div>
  """
end
# ...

Layout as string

Problem

  # ...
  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {MyAppWeb.LayoutView, "some_other_view.html"},
        container: {:div, class: "grow flex flex-col overflow-hidden"}
  # ...

Solution

  # ...
  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {MyAppWeb.LayoutView, :some_other_view},
        container: {:div, class: "grow flex flex-col overflow-hidden"}
  # ...

References

• Migrating to LiveView v0.18