Inertia Setup

Step-by-step guide to add Inertia to an existing Nimbus app or customize the scaffold.

1. Install the plugin

nimbus plugin install inertia

Legacy alias also works: nimbus plugin:install inertia.

2. Create the inertia folder

Create inertia/ at the project root with your framework entry (e.g. app.tsx for React) and pages/ for route components.

3. Root template

Create resources/views/inertia_layout.nimbus with conditional loading for dev (HMR) and prod:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:image/svg+xml,..." />
  <title inertia>My App</title>
  {{ if .viteDev }}
  <script type="module">
    import RefreshRuntime from 'http://localhost:5173/@react-refresh'
    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => {}
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
  </script>
  <script type="module" src="http://localhost:5173/@vite/client"></script>
  <script type="module" src="http://localhost:5173/inertia/app.tsx"></script>
  {{ else }}
  <link rel="stylesheet" href="/build/assets/app.css" />
  <script type="module" src="/build/assets/app.js"></script>
  {{ end }}
</head>
<body>
  <div id="app" data-page="{{ marshal .page }}"></div>
</body>
</html>

The viteDev variable is set by the Inertia plugin when VITE_DEV=1 (nimbus serve sets this for Inertia apps). The preamble is required for React Fast Refresh when HTML is served by Nimbus.

4. Vite configuration

Configure Vite to build from inertia/app.tsx (or .js) and output to public/build/assets/app.js (no hash).

5. Serve build assets

6. Run (single server)

Build and serve. No npm run dev needed—everything runs on port 3333:

npm run build
nimbus serve