You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Next, setup the root template that will be loaded on the first page visit to your application. This will be used
52
-
to load your site assets (CSS and JavaScript), and will also contain a root <Code>{'<div>'}</Code> in which to
53
-
boot your JavaScript application.
51
+
Next, setup the root template that will be loaded on the first page visit to your application. This template{' '}
52
+
is responsible for loading your site assets (CSS and JavaScript). It should include your assets, as well{' '}
53
+
as the <Code>@inertia</Code> and <Code>@inertiaHead</Code> directives.
54
54
</P>
55
55
<TabbedCode
56
56
examples={[
@@ -74,9 +74,29 @@ export default function () {
74
74
},
75
75
]}
76
76
/>
77
+
<Notice>
78
+
For React applications, it's recommended to include the <Code>@viteReactRefresh</Code> directive before the <Code>@vite</Code> directive to enable Fast Refresh in development.
79
+
</Notice>
77
80
<P>
78
-
This template should include your assets, as well as the <Code>@inertia</Code> and <Code>@inertiaHead</Code>{' '}
79
-
directives. For React applications, it's recommended to include the <Code>@viteReactRefresh</Code> directive before the <Code>@vite</Code> directive to enable Fast Refresh in development.
81
+
The <Code>@inertia</Code> directive renders a <Code>{'<div>'}</Code> element with an <Code>id</Code> of <Code>app</Code>.{' '}
82
+
This element serves as the mounting point for your JavaScript application. You may customize the <Code>id</Code> by passing a{' '}
83
+
different value to the directive.
84
+
</P>
85
+
<CodeBlock
86
+
language="markup"
87
+
children={dedent`
88
+
<!DOCTYPE html>
89
+
<html>
90
+
...
91
+
<body>
92
+
@inertia('custom-app-id')
93
+
</body>
94
+
</html>
95
+
`
96
+
}
97
+
/>
98
+
<P>
99
+
If you change the <Code>id</Code> of the root element, be sure to update it <Ahref="/client-side-setup#defining-a-root-element">client-side</A> as well.
80
100
</P>
81
101
<P>
82
102
By default, Inertia's Laravel adapter will assume your root template is named <Code>app.blade.php</Code>. If you
0 commit comments