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.

Scaffold with create-inertiacore

InertiaCore maintains a scaffolder that wires up AspNetCore.InertiaCore, Vite, and your frontend framework of choice (Vue, React, or Svelte) in one step:

npm init inertiacore@latest
# or
npx create-inertiacore@latest

This is the fastest way to start a new InertiaCore project. If you’d prefer to add InertiaCore to an existing app, follow the manual steps below.

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)
    },
})

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

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

import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
        return pages[`./Pages/${name}.jsx`]
    },
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />)
    },
})

import { createInertiaApp } from '@inertiajs/svelte'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.svelte', { eager: true })
        return pages[`./Pages/${name}.svelte`]
    },
    setup({ el, App, props }) {
        new App({ target: el, props })
    },
})

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

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

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

// Webpack
resolve: name => require(`./Pages/${name}.svelte`),

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',
// ...
})