> ## Documentation Index > Fetch the complete documentation index at: https://inertiajs.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # Pages export const VueSpecific = ({children}) => { const [code, setCode] = useState(() => { if (typeof window === "undefined") { return "Vue"; } return localStorage.getItem("code")?.replace(/"/g, "") || "Vue"; }); useEffect(() => { const handler = event => { if (event.detail?.key === "code") { setCode(event.detail.value?.replace(/"/g, "")); } }; window.addEventListener("localStorageUpdate", handler); return () => window.removeEventListener("localStorageUpdate", handler); }, []); if (code !== "Vue") { return null; } return children; }; export const SvelteSpecific = ({children}) => { const [code, setCode] = useState(() => { if (typeof window === "undefined") { return null; } return localStorage.getItem("code")?.replace(/"/g, "") || null; }); useEffect(() => { const handler = event => { if (event.detail?.key === "code") { setCode(event.detail.value?.replace(/"/g, "")); } }; window.addEventListener("localStorageUpdate", handler); return () => window.removeEventListener("localStorageUpdate", handler); }, []); if (!code?.includes("Svelte")) { return null; } return children; }; export const ReactSpecific = ({children}) => { const [code, setCode] = useState(() => { if (typeof window === "undefined") { return null; } return localStorage.getItem("code")?.replace(/"/g, "") || null; }); useEffect(() => { const handler = event => { if (event.detail?.key === "code") { setCode(event.detail.value?.replace(/"/g, "")); } }; window.addEventListener("localStorageUpdate", handler); return () => window.removeEventListener("localStorageUpdate", handler); }, []); if (code !== "React") { return null; } return children; }; export const ClientSpecific = ({children}) => { const [nada, setNada] = useState(); return children; }; You are viewing the documentation for Inertia.js v2. Inertia.js v3 has been released and is now the default version. Please visit the [upgrade guide](/v3/getting-started/upgrade-guide) to get started. When building applications using Inertia, each page in your application typically has its own controller / route and a corresponding JavaScript component. This allows you to retrieve just the data necessary for that page - no API required. In addition, all of the data needed for the page can be retrieved before the page is ever rendered by the browser, eliminating the need for displaying "loading" states when users visit your application. ## Creating Pages Inertia pages are simply JavaScript components. If you have ever written a Vue, React, or Svelte component, you will feel right at home. As you can see in the example below, pages receive data from your application's controllers as props. ```vue Vue icon="vuejs" theme={null} ``` ```jsx React icon="react" theme={null} import Layout from './Layout' import { Head } from '@inertiajs/react' export default function Welcome({ user }) { return (

Welcome

Hello {user.name}, welcome to your first Inertia app!

 ) } ``` ```svelte Svelte 4 icon="s" theme={null} Welcome

Welcome

Hello {user.name}, welcome to your first Inertia app!

 ``` ```svelte Svelte 5 icon="s" theme={null} Welcome

Welcome

Hello {user.name}, welcome to your first Inertia app!

 ``` Given the page above, you can render the page by returning an [Inertia response](/v2/the-basics/responses) from a controller or route. In this example, let's assume this page is stored at `resources/js/Pages/User/Show.vue``resources/js/Pages/User/Show.jsx``resources/js/Pages/User/Show.svelte`within a Laravel application. ```php theme={null} use Inertia\Inertia; class UserController extends Controller { public function show(User $user) { return Inertia::render('User/Show', [ 'user' => $user ]); } } ``` If you attempt to render a page that does not exist, the response will typically be a blank screen. To prevent this, you may set the `inertia.ensure_pages_exist` configuration option to `true`. The Laravel adapter will then throw an `Inertia\ComponentNotFoundException` when a page cannot be found. ## Creating Layouts While not required, for most projects it makes sense to create a layout component that all of your pages can use. You may have noticed in our page example above that we're wrapping the page content within a `` component. Here's an example of such a component: ```vue Vue icon="vuejs" theme={null} ``` ```jsx React icon="react" theme={null} import { Link } from '@inertiajs/react' export default function Layout({ children }) { return (
Home About Contact
{children}
) } ``` ```svelte Svelte 4 icon="s" theme={null}
Home About Contact
``` ```svelte Svelte 5 icon="s" theme={null}
Home About Contact
{@render children()}
``` As you can see, there is nothing Inertia specific within this template. This is just a typical VueReactSvelte component. ## Persistent Layouts While it's simple to implement layouts as children of page components, it forces the layout instance to be destroyed and recreated between visits. This means you cannot have persistent layout state when navigating between pages. For example, maybe you have an audio player on a podcast website that you want to continue playing as users navigate the site. Or, maybe you simply want to maintain the scroll position in your sidebar navigation between page visits. In these situations, the solution is to leverage Inertia's persistent layouts. ```vue Vue icon="vuejs" theme={null} ``` ```jsx React icon="react" theme={null} import Layout from './Layout' const Home = ({ user }) => { return (

Welcome

Hello {user.name}, welcome to your first Inertia app!

) } Home.layout = page => export default Home ``` ```svelte Svelte 4 icon="s" theme={null}

Welcome

Hello {user.name}, welcome to your first Inertia app!

``` ```svelte Svelte 5 icon="s" theme={null}

Welcome

Hello {user.name}, welcome to your first Inertia app!

``` You can also create more complex layout arrangements using nested layouts. ```vue Vue icon="vuejs" theme={null} ``` ```jsx React icon="react" theme={null} import SiteLayout from './SiteLayout' import NestedLayout from './NestedLayout' const Home = ({ user }) => { return (

Welcome

Hello {user.name}, welcome to your first Inertia app!

) } Home.layout = page => ( ) export default Home ``` ```svelte Svelte 4 icon="s" theme={null}

Welcome

Hello {user.name}, welcome to your first Inertia app!

``` ```svelte Svelte 5 icon="s" theme={null}

Welcome

Hello {user.name}, welcome to your first Inertia app!

``` If you're using Vue 3.3+, you can alternatively use [defineOptions](https://vuejs.org/api/sfc-script-setup.html#defineoptions) to define a layout within ` ``` ## Default Layouts If you're using persistent layouts, you may find it convenient to define the default page layout in the `resolve()` callback of your application's main JavaScript file. ```js Vue icon="vuejs" theme={null} import Layout from './Layout' createInertiaApp({ resolve: name => { const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) let page = pages[`./Pages/${name}.vue`] page.default.layout = page.default.layout || Layout return page }, // ... }) ``` ```js React icon="react" theme={null} import Layout from './Layout' createInertiaApp({ resolve: name => { const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true }) let page = pages[`./Pages/${name}.jsx`] page.default.layout = page.default.layout || (page => ) return page }, // ... }) ``` ```js Svelte icon="s" theme={null} import Layout from './Layout' createInertiaApp({ resolve: name => { const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true }) let page = pages[`./Pages/${name}.svelte`] return { default: page.default, layout: page.layout || Layout } }, // ... }) ``` This will automatically set the page layout to `Layout` if a layout has not already been set for that page. You can even go a step further and conditionally set the default page layout based on the page `name`, which is available to the `resolve()` callback. For example, maybe you don't want the default layout to be applied to your public pages. ```js Vue icon="vuejs" theme={null} import Layout from './Layout' createInertiaApp({ resolve: name => { const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) let page = pages[`./Pages/${name}.vue`] page.default.layout = name.startsWith('Public/') ? undefined : Layout return page }, // ... }) ``` ```js React icon="react" theme={null} import Layout from './Layout' createInertiaApp({ resolve: name => { const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true }) let page = pages[`./Pages/${name}.jsx`] page.default.layout = name.startsWith('Public/') ? undefined : page => return page }, // ... }) ``` ```js Svelte icon="s" theme={null} import Layout from './Layout' createInertiaApp({ resolve: name => { const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true }) let page = pages[`./Pages/${name}.svelte`] return { default: page.default, layout: name.startsWith('Public/') ? undefined : Layout } }, // ... }) ```