ryanzidago

ryanzidago

How to override the default app layout for a specific LiveView?

How can I set a specific layout for a specific LiveView?

I have the following route:

  scope "/:locale", MyAppWeb do
    pipe_through :browser

    live "/", LandingPageLive, :home
    # some other routes
  end

And this in MyAppWeb:

 def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {MyAppWeb.Layouts, :app}

      on_mount MyAppWeb.SetLocale
      unquote(html_helpers())
    end
  end

This means that by default all LiveViews have the app layout.
How can I make it so that the LandingPageLive does not have the app layout (which contains a sidebar)?

Looking at the documentation, I see here that there are two ways to override the default layout:

  • live_session which I do not have
  • :layout option when mounting the LiveView.

Since I don’t have a live_session in my router, I’m going for the second option using {MyAppWeb.Layouts, :landing_page}:

defmodule MyAppWeb.LandingPageLive do
  use MyAppWeb, :live_view
  use Gettext, backend: MyAppWeb.Gettext

  @impl LiveView
  def mount(params, _session, socket) do
    socket = assign(socket, layout: {MyAppWeb.Layouts, :landing_page})
    {:ok, socket}
  end

  @impl LiveView
  def render(assigns) do
    ~H"""
    Welcome!
    """
  end
end

And I have a the following directory structure:

lib/my_app_web/
├── components
│   ├── core_components.ex
│   ├── layouts
│   │   ├── app.html.heex
│   │   ├── landing_page.html.heex
│   │   └── root.html.heex
│   ├── layouts.ex
│   └── sidebar.ex
├── live
│   ├── landing_page_live.ex

However, I get this error:

invalid value for reserved key :layout in Phoenix.Template.render/4 assigns.
:layout accepts a tuple of the form {LayoutModule, "template.extension"},
got: {ClipboardWeb.Layouts, :landing_page}

Looks like I need to pass a string:

defmodule MyAppWeb.LandingPageLive do
  use MyAppWeb, :live_view
  use Gettext, backend: MyAppWeb.Gettext

  @impl LiveView
  def mount(params, _session, socket) do
    socket = assign(socket, layout: {MyAppWeb.Layouts, "landing_page.html"})
    {:ok, socket}
  end

  @impl LiveView
  def render(assigns) do
    ~H"""
    Welcome!
    """
  end
end

Not enough:

no "landing_page.html" html template defined for ClipboardWeb.Layouts  (the module exists but does not define landing_page.html/1 nor render/2

My MyAppWeb.Layouts looks like so:

defmodule MyAppWeb.Layouts do
  @moduledoc """
  This module holds different layouts used by your application.

  See the `layouts` directory for all templates available.
  The "root" layout is a skeleton rendered as part of the
  application router. The "app" layout is set as the default
  layout on both `use MyAppWeb, :controller` and
  `use MyAppWeb, :live_view`.
  """
  use MyAppWeb, :html

  alias MyAppWeb.Sidebar

  embed_templates "layouts/*"
end

Thus I assume that it embeds all templates under the lib/my_app_web/components/layouts/.

What’s the expectation here?

Marked As Solved

rhcarvalho

rhcarvalho

The return value from mount can also set the layout:

It must return either {:ok, socket} or {:ok, socket, options}, where options is one of:

  • :temporary_assigns - a keyword list of assigns that are temporary and must be reset to their value after every render. Note that once the value is reset, it won’t be re-rendered again until it is explicitly assigned
  • :layout - the optional layout to be used by the LiveView. Setting this option will override any layout previously set via Phoenix.LiveView.Router.live_session/2 or on use Phoenix.LiveView

Also Liked

LostKobrakai

LostKobrakai

This is wrong. You don’t assign the layout as an assign on the socket, but it’s an option on the return tuple of mount.

def mount(params, _session, socket) do
    {:ok, socket, layout: {MyAppWeb.Layouts, :landing_page}}
  end

Where Next?

Popular in Questions Top

Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
vac
Hi, I’m quite new in Elixir and I’m trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and I...
New
Fl4m3Ph03n1x
About me? ( if you have nothing better to do than reading about some random guy in the internet :stuck_out_tongue: ) Hello all, this is ...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: The documentation above suggests that while ...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
bsollish-terakeet
Credo is smart enough to check for (something like) this: assert length(the_list) == 0 with this response: Checking if an enum is empt...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New

Other popular topics Top

marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement