11# Live layouts
22
3- From Phoenix v1.7, your application is made of two layouts:
3+ Your LvieView applications can be made of two layouts:
44
55 * the root layout - this is a layout used by both LiveView and
66 regular views. This layout typically contains the ` <html> `
77 definition alongside the head and body tags. Any content defined
88 in the root layout will remain the same, even as you live navigate
99 across LiveViews. The root layout is typically declared on the
1010 router with ` put_root_layout ` and defined as "root.html.heex"
11- in your layouts folder
11+ in your layouts folder. It calls ` {@inner_content} ` to inject the
12+ content rendered by the layout
1213
1314 * the app layout - this is the default application layout which
1415 is rendered on both regular HTTP requests and LiveViews.
15- It defaults to "app.html.heex"
16+ It defaults to "app.html.heex". This layout is typically set
17+ on ` use Phoenix.LiveView, layout: ... ` but it has been discouraged
18+ in more recent Phoenix versions, in favor of using explicit function
19+ components as layouts.
1620
1721Overall, those layouts are found in ` components/layouts ` and are
1822embedded within ` MyAppWeb.Layouts ` .
1923
20- All layouts must call ` {@inner_content} ` to inject the
21- content rendered by the layout.
22-
2324## Root layout
2425
2526The "root" layout is rendered only on the initial request and
@@ -31,27 +32,6 @@ is typically defined in your router:
3132The root layout can also be set via the ` :root_layout ` option
3233in your router via ` Phoenix.LiveView.Router.live_session/2 ` .
3334
34- ## Application layout
35-
36- The "app.html.heex" layout is rendered with either ` @conn ` or
37- ` @socket ` . Both Controllers and LiveViews explicitly define
38- the default layouts they will use. See the ` def controller `
39- and ` def live_view ` definitions in your ` MyAppWeb ` to learn how
40- it is included.
41-
42- For LiveViews, the default layout can be overridden in two different
43- ways for flexibility:
44-
45- 1 . The ` :layout ` option in ` Phoenix.LiveView.Router.live_session/2 ` ,
46- when set, will override the ` :layout ` option given via
47- ` use Phoenix.LiveView `
48-
49- 2 . The ` :layout ` option returned on mount, via ` {:ok, socket, layout: ...} `
50- will override any previously set layout option
51-
52- The LiveView itself will be rendered inside the layout wrapped by
53- the ` :container ` tag.
54-
5535## Updating document title
5636
5737Because the root layout from the Plug pipeline is rendered outside of
0 commit comments