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.js, and Svelte.

Install dependencies

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

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

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 page component.

/*
|----------------------------------------------------------------
| Vue 3
|----------------------------------------------------------------
*/

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

const el = document.getElementById('app')

createApp({
  render: () => h(App, {
    initialPage: JSON.parse(el.dataset.page),
    resolveComponent: name => require(`./Pages/${name}`).default,
  })
}).use(plugin).mount(el)


/*
|----------------------------------------------------------------
| Vue 2
|----------------------------------------------------------------
*/

import { App, plugin } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(plugin)

const el = document.getElementById('app')

new Vue({
  render: h => h(App, {
    props: {
      initialPage: JSON.parse(el.dataset.page),
      resolveComponent: name => require(`./Pages/${name}`).default,
    },
  }),
}).$mount(el)

The resolveComponent is a callback that tells Inertia how to load a page component. It receives a page name (string), and should return a page component instance.

Loading indicator

Since Inertia requests are made via XHR, there's no default browser loading indicator. To solve this, Inertia provides an optional progress package that integrates with NProgress.js, a nice little progress bar library.

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 comes with a number of customization options, which you can pass to the init() method.

InertiaProgress.init({
  // The delay after which the progress bar will
  // appear during navigation, in milliseconds.
  delay: 250,

  // The color of the progress bar.
  color: '#29d',

  // Whether to include the default NProgress styles.
  includeCSS: true,

  // Whether the NProgress spinner will be shown.
  showSpinner: false,
})

Code splitting

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

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

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

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

resolveComponent: name => import(`./Pages/${name}`).then(module => module.default),

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]',
}