# Inertia Rails Setup

> Set up a new Inertia Rails project or add Inertia to an existing Rails application. Use when creating new projects, configuring Inertia, or setting up the development environment with React, Vue, or Svelte.

- **Type:** Skill
- **Install:** `agentstack add skill-cole-robertson-inertia-rails-skills-inertia-rails-setup`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [cole-robertson](https://agentstack.voostack.com/s/cole-robertson)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [cole-robertson](https://github.com/cole-robertson)
- **Source:** https://github.com/cole-robertson/inertia-rails-skills/tree/main/skills/inertia-rails-setup

## Install

```sh
agentstack add skill-cole-robertson-inertia-rails-skills-inertia-rails-setup
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Inertia Rails Setup

This skill helps you set up Inertia.js in a Ruby on Rails application with your choice of frontend framework.

## Recommended: Official Starter Kits

For new projects, the fastest way to get started is cloning an official starter kit. These include authentication, shadcn/ui components, TypeScript, and optional SSR support out of the box.

### React Starter Kit (Recommended)

```bash
git clone https://github.com/inertia-rails/react-starter-kit myapp
cd myapp
bin/setup
```

**Includes:**
- React 19 + TypeScript
- shadcn/ui component library (20+ components)
- User authentication (login, register, password reset)
- Settings pages (profile, password, email, sessions, appearance)
- Multiple layouts (sidebar, header, auth variants)
- Dark mode support
- Kamal deployment config
- Optional SSR support
- Flash messages with Sonner toasts

### Vue Starter Kit

```bash
git clone https://github.com/inertia-rails/vue-starter-kit myapp
cd myapp
bin/setup
```

### Svelte Starter Kit

```bash
git clone https://github.com/inertia-rails/svelte-starter-kit myapp
cd myapp
bin/setup
```

### Customizing the Starter Kit

After cloning:

1. **Rename the app:**
   ```bash
   # Update config/application.rb
   module YourAppName
     class Application 

  
    
    
    
    
    
  
  
    
  

```

### 4. Install Frontend Dependencies

**For React:**
```bash
npm install @inertiajs/react @inertiajs/vite react react-dom
```

**For Vue 3:**
```bash
npm install @inertiajs/vue3 @inertiajs/vite vue
```

**For Svelte:**
```bash
npm install @inertiajs/svelte @inertiajs/vite svelte
```

### 5. Configure the Frontend Entry Point

Create `app/frontend/entrypoints/application.js`:

**React:**
```javascript
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'
import { inertia } from '@inertiajs/vite'

createInertiaApp({
  resolve: inertia.resolvePages('../pages'),
  setup({ el, App, props }) {
    createRoot(el).render()
  },
})
```

**Vue 3:**
```javascript
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { inertia } from '@inertiajs/vite'

createInertiaApp({
  resolve: inertia.resolvePages('../pages'),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})
```

**Svelte:**
```javascript
import { createInertiaApp } from '@inertiajs/svelte'
import { inertia } from '@inertiajs/vite'

createInertiaApp({
  resolve: inertia.resolvePages('../pages'),
  setup({ el, App }) {
    new App({ target: el })
  },
})
```

### 6. Create the Pages Directory

```bash
mkdir -p app/frontend/pages
```

### 7. Configure the Initializer

Create `config/initializers/inertia_rails.rb`:

```ruby
# frozen_string_literal: true

InertiaRails.configure do |config|
  # Asset versioning
  config.version = -> { ViteRuby.digest }

  # Flash keys exposed to frontend
  config.flash_keys = %i[notice alert]

  # Required for Inertia.js v3
  config.use_script_element_for_initial_page = true
  config.use_data_inertia_head_attribute = true
  config.always_include_errors_hash = true

  # Deep merge shared data with page props
  # config.deep_merge_shared_data = true

  # Encrypt history for sensitive data (requires HTTPS)
  # config.encrypt_history = Rails.env.production?
end
```

### 8. Set Up Shared Data

In `app/controllers/application_controller.rb`:

```ruby
class ApplicationController 
      {message}
    
  )
}
```

**Page Component (Vue):**
```vue

defineProps(['message'])

  
    {{ message }}
  

```

### 10. Start the Development Servers

```bash
# Terminal 1: Rails server
bin/rails server

# Terminal 2: Vite dev server
bin/vite dev
```

## Configuration Options Reference

| Option | Default | Description |
|--------|---------|-------------|
| `version` | `nil` | Asset version for cache busting |
| `layout` | `'application'` | Default layout template |
| `flash_keys` | `[:notice, :alert]` | Flash keys to share |
| `deep_merge_shared_data` | `false` | Deep merge props |
| `encrypt_history` | `false` | Encrypt browser history |
| `ssr_enabled` | `false` | Enable SSR |
| `ssr_url` | `'http://localhost:13714'` | SSR server URL |
| `default_render` | `false` | Auto-render Inertia |
| `root_dom_id` | `'app'` | Root element ID |
| `use_script_element_for_initial_page` | `false` | Use `` tag for initial page data (required for v3) |
| `use_data_inertia_head_attribute` | `false` | Use `data-inertia` attribute for head tags (required for v3) |
| `always_include_errors_hash` | `nil` | Always include errors object in page props |
| `prop_transformer` | identity | Transform prop keys (e.g., camelCase) |
| `component_path_resolver` | `"path/action"` | Custom component name resolution |
| `parent_controller` | `'::ApplicationController'` | Base controller for static routes |
| `expose_shared_prop_keys` | `true` | Include shared prop keys in page metadata |
| `precognition_prevent_writes` | `false` | Prevent DB writes during precognition |

## Environment Variables

All config options can be set via `INERTIA_` prefixed env vars:

```bash
INERTIA_SSR_ENABLED=true
INERTIA_ENCRYPT_HISTORY=true
```

## Upgrading to Inertia.js v3

If upgrading an existing Inertia.js v2 project:

### Required Configuration Changes

Add these to your Inertia Rails initializer:

```ruby
config.use_script_element_for_initial_page = true
config.use_data_inertia_head_attribute = true
config.always_include_errors_hash = true
```

### Breaking Changes

- **React 19+** required
- **Svelte 5+** with runes syntax required
- **ES2022** build target required
- **ESM-only** — no CommonJS
- **Axios removed** — uses built-in XHR (use `axiosAdapter()` to keep Axios)
- **Event renames**: `invalid` → `httpException`, `exception` → `networkError`
- **`router.cancel()`** → `router.cancelAll()`
- **Head attribute**: `inertia` → `data-inertia`

### Install the Vite Plugin

```bash
npm install @inertiajs/vite
```

Update `vite.config.js`:

```javascript
import inertia from '@inertiajs/vite'

export default defineConfig({
  plugins: [
    inertia(),
    // ... other plugins
  ],
})
```

The Vite plugin provides:
- Automatic page component resolution
- Simplified SSR setup (no separate entry point in development)
- `withApp` callback for providers/plugins

## Troubleshooting

### "Cannot find module '@inertiajs/react'"
Run `npm install` to install dependencies.

### Blank page with no errors
Check browser console for JavaScript errors. Ensure Vite dev server is running.

### Props not updating
Ensure you're using `render inertia:` not `render json:`.

### CSRF token errors
Inertia handles CSRF automatically. Ensure `protect_from_forgery` is enabled.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [cole-robertson](https://github.com/cole-robertson)
- **Source:** [cole-robertson/inertia-rails-skills](https://github.com/cole-robertson/inertia-rails-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-cole-robertson-inertia-rails-skills-inertia-rails-setup
- Seller: https://agentstack.voostack.com/s/cole-robertson
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.