Client-side setup

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.

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

const app = document.getElementById('app')

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

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

Loading indicator

Since Inertia requests are made via XHR, there's no default browser loading indicator. To solve this, Inertia ships with NProgress.js, a nice little progress bar library. Be sure to include the nprogress.css in your project, otherwise you won't see it.

The loading indicator is only shown if a request takes longer than 250ms. To test it locally, you'll need to force a request to take longer than this.

In the future we intend to give more control over the handling of the loading indicator. See this issue for more information.

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"]
}

If you're using Laravel Mix v4, the dynamic imports Babel plugin is already configured. However, there is a known issue with Laravel Mix v4 when using dynamic imports where you cannot use styles within Vue files due to a Webpack limitation. As a workaround, you need to drop Mix entirely or downgrade to Laravel Mix v3.

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

import { InertiaApp } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(InertiaApp)

const app = document.getElementById('app')

new Vue({
  render: h => h(InertiaApp, {
    props: {
      initialPage: JSON.parse(app.dataset.page),
      resolveComponent: name => import(`./Pages/${name}`).then(module => module.default),
    },
  }),
}).$mount(app)

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

On this page