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.

NOTE

See Rails generator for a quick way to setup Inertia in your Rails application.

Install dependencies

First, install the Inertia client-side adapter corresponding to your framework of choice.

npm install @inertiajs/vue2

Initialize the Inertia app

Next, update your main JavaScript file to boot your Inertia app. To accomplish this, we'll initialize the client-side framework with the base Inertia component.

import Vue from 'vue'
import { createInertiaApp } from '@inertiajs/vue2'

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob('./pages/**/*.vue', { eager: true })
    return pages[`./pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    Vue.use(plugin)

    new Vue({
      render: (h) => h(App, props),
    }).$mount(el)
  },
})

The setup callback receives everything necessary to initialize the client-side framework, including the root Inertia App component.

Resolving components

The resolve callback tells Inertia how to load a page component. It receives a page name (string), and returns a page component module. How you implement this callback depends on which bundler (Vite or Webpack) you're using.

// Vite
resolve: name => {
  const pages = import.meta.glob('./pages/**/*.vue', { eager: true })
  return pages[`./pages/${name}.vue`]
},

// Webpacker/Shakapacker
resolve: name => require(`./pages/${name}`),

By default we recommend eager loading your components, which will result in a single JavaScript bundle. However, if you'd like to lazy-load your components, see our code splitting documentation.

Defining a root element

By default, Inertia assumes that your application's root template has a root element with an id of app. If your application's root element has a different id, you can provide it using the id property.

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