Client-side setup

Once you have your server-side framework configured, you then need to setup your client-side framework. Inertia currently provides support for React, Vue, and Svelte.

Install dependencies

Install the Inertia client-side adapters using NPM or Yarn.

npm install @inertiajs/inertia @inertiajs/inertia-vue3
yarn add @inertiajs/inertia @inertiajs/inertia-vue3

Initialize app

Next, update your main JavaScript file to boot your Inertia app. All we're doing here is initializing the client-side framework with the base Inertia component.

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(plugin)
      .mount(el)
  },
})

The resolve callback tells Inertia how to load a page component. It receives a page name (string), and should return a page component module.

By default, Inertia assumes that you have a root element with an id of app. If different, you can change this using the id property.

createInertiaApp({
  id: 'my-app',
  // ...
})

Progress indicator

Since Inertia requests are made via XHR, there's no default browser loading indicator when navigating from one page to another. To solve this, Inertia provides an optional progress library, which shows a loading bar whenever you make an Inertia visit.

To use it, start by installing it:

npm install @inertiajs/progress
yarn add @inertiajs/progress

Once it's been installed, initialize it in your app.

import { InertiaProgress } from '@inertiajs/progress'

InertiaProgress.init()

It also provides a number of customization options, which you can learn more about on the progress indicators page.

Code splitting

Code splitting breaks apart the various pages of your application into smaller bundles, which are then loaded on demand when visiting new pages. This can significantly reduce the size of the initial JavaScript bundle, improving the time to first render.

To use code splitting with Inertia you'll need to enable dynamic imports. You'll need a Babel plugin to make this work. First, install the plugin:

npm install @babel/plugin-syntax-dynamic-import
yarn add @babel/plugin-syntax-dynamic-import

Next, create a .babelrc file in your project with the following:

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

Finally, update the resolve callback in your app initialization to use import instead of require.

resolve: name => import(`./Pages/${name}`),

Consider using cache busting to force browsers to load the latest version of your assets. To do this, add the following to your webpack config:

output: {
  chunkFilename: 'js/[name].js?id=[chunkhash]',
}