Skip to main content

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.

By default, Inertia lazy-loads page components, splitting each page into its own bundle that is loaded on demand. This reduces the initial JavaScript bundle size but requires additional requests when visiting new pages. You may disable lazy loading to eagerly bundle all pages into a single file. Eager loading eliminates per-page requests but increases the initial bundle size.

​
Vite Plugin

The lazy option in the pages shorthand controls how page components are loaded. It defaults to true. 
createInertiaApp({
    pages: {
        lazy: false, // Bundle all pages into a single file
    },
    // ...
})

​
Manual Vite

You may configure code splitting manually using Vite’s import.meta.glob() function when not using the Inertia Vite plugin. Pass { eager: true } to bundle all pages, or omit it to lazy-load them. 
resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue') 
    return pages[`./Pages/${name}.vue`]()
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true }) 
    return pages[`./Pages/${name}.vue`]
},

​
Webpack

To use code splitting with Webpack, you will first need to enable dynamic imports via a Babel plugin. Let’s install it now. 
npm install @babel/plugin-syntax-dynamic-import
Next, create a .babelrc file in your project with the following configuration: 
{
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}
If you’re using Laravel Mix, the dynamic imports Babel plugin is already installed and configured, and you can skip these steps. We recommend using Laravel Mix 6 or above, as there are known issues with older versions. Finally, update the resolve callback in your app’s initialization code to use import instead of require. 
resolve: name => require(`./Pages/${name}`), 
resolve: name => import(`./Pages/${name}`),
You should also consider using cache busting to force browsers to load the latest version of your assets. To accomplish this, add the following configuration to your webpack configuration file. 
output: {
    chunkFilename: 'js/[name].js?id=[chunkhash]',
}