================
CODE SNIPPETS
================
TITLE: Install Inertia Client Dependencies
DESCRIPTION: Installs the Inertia.js client-side adapter and the corresponding framework (Vue, React, or Svelte) using npm.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md#_snippet_0

LANGUAGE: shell
CODE:
```
npm install @inertiajs/vue3 vue
```

LANGUAGE: shell
CODE:
```
npm install @inertiajs/react react react-dom
```

LANGUAGE: shell
CODE:
```
npm install @inertiajs/svelte svelte
```

--------------------------------

TITLE: Start Development Server
DESCRIPTION: Starts both the Rails server and the Vite development server, allowing you to view your Inertia.js application locally.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md#_snippet_2

LANGUAGE: bash
CODE:
```
bin/dev
```

--------------------------------

TITLE: Install Inertia Rails Gem
DESCRIPTION: Installs the Inertia server-side adapter gem for Ruby on Rails. This is the first step in integrating Inertia into your Rails application.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md#_snippet_0

LANGUAGE: bash
CODE:
```
bundle add inertia_rails
```

--------------------------------

TITLE: Install @inertiajs/react Adapter
DESCRIPTION: Installs the Inertia.js client-side adapter for React using npm. This is a required step for upgrading to Inertia.js v2.0.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/upgrade-guide.md#_snippet_1

LANGUAGE: bash
CODE:
```
npm install @inertiajs/react@^2.0
```

--------------------------------

TITLE: Generate Inertia Installation
DESCRIPTION: Executes the Rails generator to install and set up Inertia.js in a Rails application. It handles Vite integration, frontend framework selection, TypeScript, and Tailwind CSS.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md#_snippet_1

LANGUAGE: bash
CODE:
```
bin/rails generate inertia:install
```

--------------------------------

TITLE: Log Visit URL on 'start' Event (Vue, React, Svelte)
DESCRIPTION: Demonstrates logging the URL of a visit when the 'start' event is triggered in Inertia.js. The examples cover Vue, React, and Svelte, showing how to access the URL using `event.detail.visit.url`.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/events.md#_snippet_8

LANGUAGE: js
CODE:
```
import { router } from '@inertiajs/vue3'

router.on('start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```

LANGUAGE: jsx
CODE:
```
import { router } from '@inertiajs/react'

router.on('start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```

LANGUAGE: js
CODE:
```
import { router } from '@inertiajs/svelte'

router.on('start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```

--------------------------------

TITLE: Install @inertiajs/svelte Adapter
DESCRIPTION: Installs the Inertia.js client-side adapter for Svelte 4 and Svelte 5 using npm. This is a required step for upgrading to Inertia.js v2.0.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/upgrade-guide.md#_snippet_2

LANGUAGE: bash
CODE:
```
npm install @inertiajs/svelte@^2.0
```

--------------------------------

TITLE: Define Root Element ID
DESCRIPTION: Shows how to specify a custom ID for the application's root HTML element when initializing Inertia.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md#_snippet_8

LANGUAGE: javascript
CODE:
```
createInertiaApp({
  id: 'my-app',
  // ...
})
```

--------------------------------

TITLE: Register Inertia 'start' Event Listener
DESCRIPTION: Register an event listener for the 'start' event using the `router.on()` method. This allows you to hook into the beginning of a visit. Examples are provided for Vue, React, and Svelte.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/events.md#_snippet_0

LANGUAGE: javascript
CODE:
```
import { router } from '@inertiajs/vue3'

router.on('start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```

LANGUAGE: jsx
CODE:
```
import { router } from '@inertiajs/react'

router.on('start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```

LANGUAGE: javascript
CODE:
```
import { router } from '@inertiajs/svelte'

router.on('start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```

--------------------------------

TITLE: Install @inertiajs/vue3 Adapter
DESCRIPTION: Installs the Inertia.js client-side adapter for Vue 3 using npm. This is a required step for upgrading to Inertia.js v2.0.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/upgrade-guide.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @inertiajs/vue3@^2.0
```

--------------------------------

TITLE: Install NProgress - Shell
DESCRIPTION: Install the NProgress library, a popular choice for creating progress bars, using npm.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md#_snippet_2

LANGUAGE: shell
CODE:
```
npm install nprogress
```

--------------------------------

TITLE: Initialize Inertia App with React
DESCRIPTION: Initializes the Inertia app using React. It configures component resolution for .jsx files and sets up the React application using createRoot for rendering.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md#_snippet_2

LANGUAGE: javascript
CODE:
```
// frontend/entrypoints/inertia.js
import { createInertiaApp } from '@inertiajs/react'
import { createElement } from '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 }) {
    const root = createRoot(el)
    root.render(createElement(App, props))
  },
})
```

--------------------------------

TITLE: Inertia.js File Upload Example with Form Helper
DESCRIPTION: Provides a complete example of a file upload form using the Inertia form helper. It includes a text input for 'name' and a file input for 'avatar', along with progress tracking for the upload. This example is shown for Vue, React, and Svelte.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/file-uploads.md#_snippet_1

LANGUAGE: vue
CODE:
```
<script setup>
import { useForm } from '@inertiajs/vue3'

const form = useForm({
  name: null,
  avatar: null,
})

function submit() {
  form.post('/users')
}
</script>

<template>
  <form @submit.prevent="submit">
    <input type="text" v-model="form.name" />
    <input type="file" @input="form.avatar = $event.target.files[0]" />
    <progress v-if="form.progress" :value="form.progress.percentage" max="100">
      {{ form.progress.percentage }}%
    </progress>
    <button type="submit">Submit</button>
  </form>
</template>
```

LANGUAGE: jsx
CODE:
```
import { useForm } from '@inertiajs/react'

const { data, setData, post, progress } = useForm({
  name: null,
  avatar: null,
})

function submit(e) {
  e.preventDefault()
  post('/users')
}

return (
  <form onSubmit={submit}>
    <input
      type="text"
      value={data.name}
      onChange={(e) => setData('name', e.target.value)}
    />
    <input type="file" onChange={(e) => setData('avatar', e.target.files[0])} />
    {progress && (
      <progress value={progress.percentage} max="100">
        {progress.percentage}%
      </progress>
    )}
    <button type="submit">Submit</button>
  </form>
)
```

LANGUAGE: svelte
CODE:
```
<script>
  import { useForm } from '@inertiajs/svelte'

  const form = useForm({
    name: null,
    avatar: null,
  })

  function submit() {
    $form.post('/users')
  }
</script>

<form on:submit|preventDefault={submit}>
  <input type="text" bind:value={$form.name} />
  <input type="file" on:input={(e) => ($form.avatar = e.target.files[0])} />
  {#if $form.progress}
    <progress value={$form.progress.percentage} max="100">
      {$form.progress.percentage}%
    </progress>
  {/if}
  <button type="submit">Submit</button>
</form>
```

LANGUAGE: svelte
CODE:
```
<script>
  import { useForm } from '@inertiajs/svelte'

  const form = useForm({
    name: null,
    avatar: null,
  })

  function submit(e) {
    e.preventDefault()
    $form.post('/users')
  }
</script>

<form onsubmit={submit}>
  <input type="text" bind:value={$form.name} />
  <input type="file" oninput={(e) => ($form.avatar = e.target.files[0])} />
  {#if $form.progress}
    <progress value={$form.progress.percentage} max="100">
      {$form.progress.percentage}%
    </progress>
  {/if}
  <button type="submit">Submit</button>
</form>
```

--------------------------------

TITLE: Inertia Controller Generator Example Output
DESCRIPTION: Shows the output of the `inertia:controller` generator, detailing the creation of controller files, routes, and frontend page components for actions like 'welcome' and 'next_steps'.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/responses.md#_snippet_11

LANGUAGE: bash
CODE:
```
$ bin/rails generate inertia:controller pages welcome next_steps
      create  app/controllers/pages_controller.rb
       route  get 'pages/welcome'
              get 'pages/next_steps'
      invoke  test_unit
      create    test/controllers/pages_controller_test.rb
      invoke  helper
      create    app/helpers/pages_helper.rb
      invoke    test_unit
      invoke  inertia_templates
      create    app/frontend/pages/Pages
      create    app/frontend/pages/Pages/Welcome.jsx
      create    app/frontend/pages/Pages/NextSteps.jsx
```

--------------------------------

TITLE: Svelte: Shortcut Request Methods
DESCRIPTION: Illustrates the usage of Inertia's shortcut request methods in Svelte, including `get`, `post`, `put`, `patch`, `delete`, and `reload`, for efficient navigation.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md#_snippet_5

LANGUAGE: javascript
CODE:
```
import { router } from '@inertiajs/svelte'

router.get(url, data, options)
router.post(url, data, options)
router.put(url, data, options)
router.patch(url, data, options)
router.delete(url, options)
router.reload(url, options) // Uses the current URL
```

--------------------------------

TITLE: Inertia Scaffold Generator Example Output
DESCRIPTION: Illustrates the typical output when running the `inertia:scaffold` generator, showing the files created for Active Record, routes, controllers, and frontend pages.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/responses.md#_snippet_9

LANGUAGE: bash
CODE:
```
$ bin/rails generate inertia:scaffold Post title:string body:text
      invoke  active_record
      create    db/migrate/20240611123952_create_posts.rb
      create    app/models/post.rb
      invoke    test_unit
      create      test/models/post_test.rb
      create      test/fixtures/posts.yml
      invoke  resource_route
       route    resources :posts
      invoke  scaffold_controller
      create    app/controllers/posts_controller.rb
      invoke    inertia_templates
      create      app/frontend/pages/Post
      create      app/frontend/pages/Post/Index.svelte
      create      app/frontend/pages/Post/Edit.svelte
      create      app/frontend/pages/Post/Show.svelte
      create      app/frontend/pages/Post/New.svelte
      create      app/frontend/pages/Post/Form.svelte
      create      app/frontend/pages/Post/Post.svelte
      invoke  resource_route
      invoke    test_unit
      create      test/controllers/posts_controller_test.rb
      create      test/system/posts_test.rb
      invoke  helper
      create      app/helpers/posts_helper.rb
      invoke      test_unit
```

--------------------------------

TITLE: Start Progress Indicator - JavaScript
DESCRIPTION: Implement an Inertia event listener for the 'start' event to initiate the NProgress bar when a new page visit begins.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md#_snippet_5

LANGUAGE: javascript
CODE:
```
router.on('start', () => NProgress.start())
```

--------------------------------

TITLE: React: Shortcut Request Methods
DESCRIPTION: Shows how to use Inertia's shortcut request methods in React, such as `get`, `post`, `put`, `patch`, `delete`, and `reload`, for streamlined navigation.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md#_snippet_4

LANGUAGE: javascript
CODE:
```
import { router } from '@inertiajs/react'

router.get(url, data, options)
router.post(url, data, options)
router.put(url, data, options)
router.patch(url, data, options)
router.delete(url, options)
router.reload(options) // Uses the current URL
```

--------------------------------

TITLE: Install Inertia Rails with React, Vite, and Tailwind
DESCRIPTION: Installs the Inertia Rails adapter with React, Vite, and Tailwind CSS support. This command is for projects not using TypeScript, setting up a similar modern Inertia.js application on Rails.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/cookbook/integrating-shadcn-ui.md#_snippet_1

LANGUAGE: bash
CODE:
```
rails new -JA shadcn-inertia-rails
cd shadcn-inertia-rails

bundle add inertia_rails

rails generate inertia:install --framework=react --vite --tailwind --no-interactive
```

--------------------------------

TITLE: Initialize Inertia App with Svelte 5
DESCRIPTION: Initializes the Inertia app using Svelte 5. It configures component resolution for .svelte files and uses the mount function to render the Svelte application.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md#_snippet_4

LANGUAGE: javascript
CODE:
```
// frontend/entrypoints/inertia.js
import { createInertiaApp } from '@inertiajs/svelte'
import { mount } from 'svelte'

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

--------------------------------

TITLE: Initialize Inertia App with Svelte 4
DESCRIPTION: Initializes the Inertia app using Svelte 4. It configures component resolution for .svelte files and mounts the Svelte application to the provided element.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md#_snippet_3

LANGUAGE: javascript
CODE:
```
// frontend/entrypoints/inertia.js
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 })
  },
})
```

--------------------------------

TITLE: Configure Inertia Component Resolution with Webpacker/Shakapacker
DESCRIPTION: Shows how to configure the `resolve` callback for Inertia.js when using Webpacker or Shakapacker, using `require` to load components from the specified path.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md#_snippet_6

LANGUAGE: javascript
CODE:
```
// Webpacker/Shakapacker
// javascript/packs/inertia.js
createInertiaApp({
  resolve: (name) => require(`../pages/${name}`),
  // ...
})
```

LANGUAGE: javascript
CODE:
```
// Webpacker/Shakapacker
// javascript/packs/inertia.js
createInertiaApp({
  resolve: (name) => require(`../pages/${name}`),
  //...
})
```

LANGUAGE: javascript
CODE:
```
// Webpacker/Shakapacker
// javascript/packs/inertia.js
createInertiaApp({
  resolve: (name) => require(`../pages/${name}.svelte`),
  //...
})
```

--------------------------------

TITLE: Install Inertia Rails with React, TypeScript, Vite, and Tailwind
DESCRIPTION: Installs the Inertia Rails adapter with React, TypeScript, Vite, and Tailwind CSS support. This command sets up the basic project structure for a modern Inertia.js application on Rails.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/cookbook/integrating-shadcn-ui.md#_snippet_0

LANGUAGE: bash
CODE:
```
rails new -JA shadcn-inertia-rails
cd shadcn-inertia-rails

bundle add inertia_rails

rails generate inertia:install --framework=react --typescript --vite --tailwind --no-interactive
```

--------------------------------

TITLE: Configure Inertia Component Resolution with Vite
DESCRIPTION: Demonstrates how to configure the `resolve` callback for Inertia.js with Vite, specifying the path to component files based on their framework (Vue, React, Svelte).

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md#_snippet_5

LANGUAGE: javascript
CODE:
```
// Vite
// frontend/entrypoints/inertia.js
createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob('../pages/**/*.vue', { eager: true })
    return pages[`../pages/${name}.vue`]
  },
  // ...
})
```

LANGUAGE: javascript
CODE:
```
// Vite
// frontend/entrypoints/inertia.js
createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob('../pages/**/*.jsx', { eager: true })
    return pages[`../pages/${name}.jsx`]
  },
  //...
})
```

LANGUAGE: javascript
CODE:
```
// Vite
// frontend/entrypoints/inertia.js
createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob('../pages/**/*.svelte', { eager: true })
    return pages[`../pages/${name}.svelte`]
  },
  //...
})
```

--------------------------------

TITLE: Register Inertia 'start' Event Listener with Native Browser Events
DESCRIPTION: Register an event listener for the 'inertia:start' event using `document.addEventListener()`. This method leverages native browser event handling. Examples are provided for Vue, React, and Svelte.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/events.md#_snippet_1

LANGUAGE: javascript
CODE:
```
import { router } from '@inertiajs/vue3'

document.addEventListener('inertia:start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```

LANGUAGE: jsx
CODE:
```
import { router } from '@inertiajs/react'

document.addEventListener('inertia:start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```

LANGUAGE: javascript
CODE:
```
import { router } from '@inertiajs/svelte'

document.addEventListener('inertia:start', (event) => {
  console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```

--------------------------------

TITLE: Root Template for Vite
DESCRIPTION: Sets up the root HTML template for Inertia.js applications using Vite. It includes essential meta tags, CSP, Inertia SSR head, Vite client, and the main JavaScript bundle. This template serves as the entry point for the client-side application.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md#_snippet_3

LANGUAGE: erb
CODE:
```
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csp_meta_tag %>

    <%= inertia_ssr_head %>

    <%# If you want to use React add `vite_react_refresh_tag` %>
    <%= vite_client_tag %>
    <%= vite_javascript_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
```

--------------------------------

TITLE: Initialize Inertia App with Vue
DESCRIPTION: Initializes the Inertia app using Vue 3. It configures the component resolution to load .vue files from the ../pages directory and sets up the Vue application instance.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md#_snippet_1

LANGUAGE: javascript
CODE:
```
// frontend/entrypoints/inertia.js
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)
  },
})
```

--------------------------------

TITLE: Inertia.js: Form Submission Methods
DESCRIPTION: Provides an overview of the available form submission methods provided by Inertia.js's useForm helper, including generic submit, get, post, put, patch, and delete. Examples are shown for Vue, React, and Svelte.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/forms.md#_snippet_46

LANGUAGE: js
CODE:
```
form.submit(method, url, options)
form.get(url, options)
form.post(url, options)
form.put(url, options)
form.patch(url, options)
form.delete(url, options)
```

LANGUAGE: jsx
CODE:
```
const { submit, get, post, put, patch, delete: destroy } = useForm({ ... })

submit(method, url, options)
get(url, options)
post(url, options)
put(url, options)
patch(url, options)
destroy(url, options)
```

LANGUAGE: js
CODE:
```
$form.submit(method, url, options)
$form.get(url, options)
$form.post(url, options)
$form.put(url, options)
$form.patch(url, options)
$form.delete(url, options)
```

--------------------------------

TITLE: Install inertia_rails Gem
DESCRIPTION: Add the inertia_rails gem to your Gemfile to begin using Inertia.js with your Rails application.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/README.md#_snippet_0

LANGUAGE: Ruby
CODE:
```
gem 'inertia_rails'
```

--------------------------------

TITLE: Initialize shadcn/ui in a Rails Project
DESCRIPTION: Initializes shadcn/ui in the project, configuring it with preferred styles, colors, and CSS variables. This command also installs necessary dependencies and updates project files.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/cookbook/integrating-shadcn-ui.md#_snippet_4

LANGUAGE: shell
CODE:
```
npx shadcn@latest init
```

--------------------------------

TITLE: Install Babel Plugin for Dynamic Imports
DESCRIPTION: Installs the `@babel/plugin-syntax-dynamic-import` npm package, which is required to enable dynamic imports for code splitting with Webpack/Shakapacker.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/code-splitting.md#_snippet_3

LANGUAGE: shell
CODE:
```
npm install @babel/plugin-syntax-dynamic-import
```

--------------------------------

TITLE: Svelte Loading Indicator Implementation
DESCRIPTION: Complete Inertia.js loading indicator implementation for Svelte using NProgress. It manages the indicator's start, progress updates, and completion/interruption states with a delayed start mechanism.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md#_snippet_12

LANGUAGE: javascript
CODE:
```
import NProgress from 'nprogress'
import { router } from '@inertiajs/svelte'

let timeout = null

router.on('start', () => {
  timeout = setTimeout(() => NProgress.start(), 250)
})

router.on('progress', (event) => {
  if (NProgress.isStarted() && event.detail.progress.percentage) {
    NProgress.set((event.detail.progress.percentage / 100) * 0.9)
  }
})

router.on('finish', (event) => {
  clearTimeout(timeout)
  if (!NProgress.isStarted()) {
    return
  } else if (event.detail.visit.completed) {
    NProgress.done()
  } else if (event.detail.visit.interrupted) {
    NProgress.set(0)
  } else if (event.detail.visit.cancelled) {
    NProgress.done()
    NProgress.remove()
  }
})
```

--------------------------------

TITLE: Install Inertia Modal NPM Package
DESCRIPTION: Installs the Inertia Modal NPM package for either Vue or React. This is the first step in integrating modal functionality into your Inertia.js application.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/cookbook/inertia-modal.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @inertiaui/modal-vue
```

LANGUAGE: bash
CODE:
```
npm install @inertiaui/modal-react
```

--------------------------------

TITLE: React Loading Indicator Implementation
DESCRIPTION: Complete Inertia.js loading indicator implementation for React using NProgress. It manages the indicator's start, progress updates, and completion/interruption states with a delayed start mechanism.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md#_snippet_11

LANGUAGE: javascript
CODE:
```
import NProgress from 'nprogress'
import { router } from '@inertiajs/react'

let timeout = null

router.on('start', () => {
  timeout = setTimeout(() => NProgress.start(), 250)
})

router.on('progress', (event) => {
  if (NProgress.isStarted() && event.detail.progress.percentage) {
    NProgress.set((event.detail.progress.percentage / 100) * 0.9)
  }
})

router.on('finish', (event) => {
  clearTimeout(timeout)
  if (!NProgress.isStarted()) {
    return
  } else if (event.detail.visit.completed) {
    NProgress.done()
  } else if (event.detail.visit.interrupted) {
    NProgress.set(0)
  } else if (event.detail.visit.cancelled) {
    NProgress.done()
    NProgress.remove()
  }
})
```

--------------------------------

TITLE: JavaScript Loading Indicator Delay Setup
DESCRIPTION: Sets up a delayed loading indicator using JavaScript's `setTimeout` and `clearTimeout`. A timeout is initiated on 'start' events and cleared on 'finish' events to control the visibility of the NProgress indicator.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md#_snippet_9

LANGUAGE: javascript
CODE:
```
let timeout = null

router.on('start', () => {
  timeout = setTimeout(() => NProgress.start(), 250)
})

router.on('finish', (event) => {
  clearTimeout(timeout)
  if (!NProgress.isStarted()) {
    return
  }
  // ...
})
```

LANGUAGE: javascript
CODE:
```
router.on('finish', (event) => {
  clearTimeout(timeout)
  if (!NProgress.isStarted()) {
    return
  }
  // ...
})
```

LANGUAGE: javascript
CODE:
```
router.on('progress', event => {
  if (!NProgress.isStarted()) {
    return
  }
  // ...
})
```

--------------------------------

TITLE: Create Inertia Response (Rails Ruby)
DESCRIPTION: Demonstrates how to render an Inertia page from a Rails controller action. It specifies the Inertia page component ('Event/Show') and passes data as props. The `as_json` method is used to serialize the model data for the props.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md#_snippet_7

LANGUAGE: ruby
CODE:
```
class EventsController < ApplicationController
  def show
    event = Event.find(params[:id])

    render inertia: 'Event/Show', props: {
      event: event.as_json(
        only: [:id, :title, :start_date, :description]
      )
    }
  end
end
```

--------------------------------

TITLE: Specify HTTP Method for Inertia Link
DESCRIPTION: Illustrates how to specify the HTTP request method for an Inertia link using the `method` prop. This allows for POST, PUT, PATCH, and DELETE requests, with a default of GET. Examples are provided for Vue, React, and Svelte.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/links.md#_snippet_2

LANGUAGE: Vue
CODE:
```
<script setup>
import { Link } from '@inertiajs/vue3'
</script>

<template>
  <Link href="/logout" method="post" as="button">Logout</Link>
</template>
```

LANGUAGE: React
CODE:
```
import { Link } from '@inertiajs/react'

export default () => (
  <Link href="/logout" method="post" as="button">
    Logout
  </Link>
)
```

LANGUAGE: Svelte
CODE:
```
<script>
  import { inertia, Link } from '@inertiajs/svelte'
</script>

<button use:inertia={{ href: '/logout', method: 'post' }} type="button">Logout</button>

<Link href="/logout" method="post">Logout</button>
```

--------------------------------

TITLE: Install Inertia Rails Contrib Gem
DESCRIPTION: Installs the `inertia_rails-contrib` gem into your Rails application using Bundler. This gem enhances modal functionality with base URL support, improving accessibility and SEO.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/cookbook/inertia-modal.md#_snippet_7

LANGUAGE: bash
CODE:
```
bundle add inertia_rails-contrib
```

--------------------------------

TITLE: Vue: Shortcut Request Methods
DESCRIPTION: Demonstrates the use of Inertia's shortcut request methods in Vue.js, including `get`, `post`, `put`, `patch`, `delete`, and `reload`. These methods simplify common navigation tasks.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md#_snippet_3

LANGUAGE: javascript
CODE:
```
import { router } from '@inertiajs/vue3'

router.get(url, data, options)
router.post(url, data, options)
router.put(url, data, options)
router.patch(url, data, options)
router.delete(url, options)
router.reload(options) // Uses the current URL
```

--------------------------------

TITLE: Svelte: Setting HTTP Method with router.visit()
DESCRIPTION: Illustrates how to specify the HTTP method for a manual Inertia visit using the `method` option in `router.visit()` within Svelte. This example sets the method to 'post'.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md#_snippet_8

LANGUAGE: javascript
CODE:
```
import { router } from '@inertiajs/svelte'

router.visit(url, { method: 'post' })
```

--------------------------------

TITLE: Svelte: Programmatic Visit with router.visit()
DESCRIPTION: Provides an example of making a programmatic Inertia visit with `router.visit()` in Svelte. This code snippet details the various configuration options for customizing the visit, similar to the Vue and React implementations.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md#_snippet_2

LANGUAGE: javascript
CODE:
```
import { router } from '@inertiajs/svelte'

router.visit(url, {
  method: 'get',
  data: {},
  replace: false,
  preserveState: false,
  preserveScroll: false,
  only: [],
  except: [],
  headers: {},
  errorBag: null,
  forceFormData: false,
  queryStringArrayFormat: 'brackets',
  async: false,
  showProgress: true,
  fresh: false,
  reset: [],
  preserveUrl: false,
  prefetch: false,
  onCancelToken: (cancelToken) => {},
  onCancel: () => {},
  onBefore: (visit) => {},
  onStart: (visit) => {},
  onProgress: (progress) => {},
  onSuccess: (page) => {},
  onError: (errors) => {},
  onFinish: (visit) => {},
  onPrefetching: () => {},
  onPrefetched: () => {},
})
```

--------------------------------

TITLE: Svelte 5: Implement Persistent Layout
DESCRIPTION: Provides an example of setting a persistent layout in Svelte 5 using the `module` script context. This ensures that layout state, like an audio player, is preserved during navigation.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/pages.md#_snippet_12

LANGUAGE: svelte
CODE:
```
<script module>
  export { default as layout } from './Layout.svelte'
</script>

<script>
  let { user } = $props()
</script>

<h1>Welcome</h1>

<p>Hello {user.name}, welcome to your first Inertia app!</p>
```

--------------------------------

TITLE: Vue Loading Indicator Implementation
DESCRIPTION: Complete Inertia.js loading indicator implementation for Vue 3 using NProgress. It manages the indicator's start, progress updates, and completion/interruption states with a delayed start mechanism.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md#_snippet_10

LANGUAGE: javascript
CODE:
```
import NProgress from 'nprogress'
import { router } from '@inertiajs/vue3'

let timeout = null

router.on('start', () => {
  timeout = setTimeout(() => NProgress.start(), 250)
})

router.on('progress', (event) => {
  if (NProgress.isStarted() && event.detail.progress.percentage) {
    NProgress.set((event.detail.progress.percentage / 100) * 0.9)
  }
})

router.on('finish', (event) => {
  clearTimeout(timeout)
  if (!NProgress.isStarted()) {
    return
  } else if (event.detail.visit.completed) {
    NProgress.done()
  } else if (event.detail.visit.interrupted) {
    NProgress.set(0)
  } else if (event.detail.visit.cancelled) {
    NProgress.done()
    NProgress.remove()
  }
})
```

--------------------------------

TITLE: Include NProgress Styles - HTML
DESCRIPTION: Add the necessary NProgress CSS styles to your project to enable the progress bar's visual appearance. This example uses a CDN link.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md#_snippet_3

LANGUAGE: html
CODE:
```
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css"
/>
```

--------------------------------

TITLE: React: Setting HTTP Method with router.visit()
DESCRIPTION: Shows how to set the HTTP method for a manual Inertia visit using the `method` option in `router.visit()` for React applications. This example configures the method to 'post'.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md#_snippet_7

LANGUAGE: javascript
CODE:
```
import { router } from '@inertiajs/react'

router.visit(url, { method: 'post' })
```

--------------------------------

TITLE: Root Template for Webpacker/Shakapacker
DESCRIPTION: Configures the root HTML template for Inertia.js applications using Webpacker or Shakapacker. It includes standard HTML5 structure, CSP meta tag, Inertia SSR head, stylesheet pack, and the JavaScript pack with defer attribute for optimal loading.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md#_snippet_4

LANGUAGE: erb
CODE:
```
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csp_meta_tag %>

    <%= inertia_ssr_head %>

    <%= stylesheet_pack_tag 'application' %>
    <%= javascript_pack_tag 'application', defer: true %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>
```

--------------------------------

TITLE: Create Inertia.js Response in Rails Controller
DESCRIPTION: Shows how to render an Inertia page from a Rails controller. It fetches an event record and passes its JSON representation as props to the 'Event/Show' Inertia component.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md#_snippet_6

LANGUAGE: ruby
CODE:
```
class EventsController < ApplicationController
  def show
    event = Event.find(params[:id])

    render inertia: 'Event/Show', props: {
      event: event.as_json(
        only: [:id, :title, :start_date, :description]
      )
    }
  end
end
```

--------------------------------

TITLE: Using usePrefetch Hook
DESCRIPTION: Introduces the `usePrefetch` hook for tracking prefetch state within a component. It provides `lastUpdatedAt`, `isPrefetching`, `isPrefetched`, and a `flush` method to manage the cache for the current page. Examples are shown for Vue, React, and Svelte.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/prefetching.md#_snippet_16

LANGUAGE: javascript
CODE:
```
import { usePrefetch } from '@inertiajs/vue3'

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch()
```

LANGUAGE: javascript
CODE:
```
import { usePrefetch } from '@inertiajs/react'

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch()
```

LANGUAGE: javascript
CODE:
```
import { usePrefetch } from '@inertiajs/svelte'

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch()
```

--------------------------------

TITLE: usePrefetch with Custom Headers
DESCRIPTION: Shows how to pass visit options, such as custom headers, to the `usePrefetch` hook to differentiate request configurations for the same URL. This allows for more specific prefetching behavior. Examples are provided for Vue, React, and Svelte.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/prefetching.md#_snippet_17

LANGUAGE: javascript
CODE:
```
import { usePrefetch } from '@inertiajs/vue3'

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch({
  headers: { 'X-Custom-Header': 'value' },
})
```

LANGUAGE: javascript
CODE:
```
import { usePrefetch } from '@inertiajs/react'

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch({
  headers: { 'X-Custom-Header': 'value' },
})
```

LANGUAGE: javascript
CODE:
```
import { usePrefetch } from '@inertiajs/svelte'

const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch({
  headers: { 'X-Custom-Header': 'value' },
})
```

--------------------------------

TITLE: Inertia RSpec Assertions: Component Rendering
DESCRIPTION: Provides examples of RSpec assertions for verifying that the correct Inertia component is rendered and for accessing the component name.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/README.md#_snippet_15

LANGUAGE: ruby
CODE:
```
# check the component
expect_inertia.to render_component 'Event/Index'

# access the component name
expect(inertia.component).to eq 'TestComponent'
```

--------------------------------

TITLE: Include Inertia.js RSpec Helper
DESCRIPTION: Shows how to integrate Inertia.js testing helpers into an RSpec setup by adding a `require` statement to `spec/rails_helper.rb`.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/README.md#_snippet_13

LANGUAGE: ruby
CODE:
```
require 'inertia_rails/rspec'
```

--------------------------------

TITLE: Inertia Rails RSpec Setup
DESCRIPTION: This snippet shows how to set up Inertia Rails RSpec helpers in your Rails application. It requires the inertia_rails/rspec library and applies the `:inertia` flag to RSpec blocks for enabling Inertia-specific testing functionalities.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/testing.md#_snippet_0

LANGUAGE: ruby
CODE:
```
require 'inertia_rails/rspec'
```

--------------------------------

TITLE: Define Custom Root Element ID for Inertia App
DESCRIPTION: Illustrates how to specify a custom `id` for the root element of the Inertia application, overriding the default 'app' ID.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md#_snippet_7

LANGUAGE: javascript
CODE:
```
createInertiaApp({
  id: 'my-app',
  // ...
})
```

--------------------------------

TITLE: Run Inertia SSR Server
DESCRIPTION: Starts the Node-based Inertia SSR server after both client-side and server-side bundles have been built. This allows your application to serve content with SSR enabled.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-rendering.md#_snippet_11

LANGUAGE: shell
CODE:
```
bin/vite ssr
```

--------------------------------

TITLE: Preserve State with GET Requests (Vue, React, Svelte)
DESCRIPTION: Demonstrates how to preserve the component's state when using the `get` method in Inertia.js. This is useful for maintaining local state like form inputs or scroll positions across page transitions. The `preserveState: true` option ensures the current component instance's state is maintained.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md#_snippet_20

LANGUAGE: vue
CODE:
```
import { router } from '@inertiajs/vue3'

router.get('/users', { search: 'John' }, { preserveState: true })
```

LANGUAGE: react
CODE:
```
import { router } from '@inertiajs/react'

router.get('/users', { search: 'John' }, { preserveState: true })
```

LANGUAGE: svelte
CODE:
```
import { router } from '@inertiajs/svelte'

router.get('/users', { search: 'John' }, { preserveState: true })
```

--------------------------------

TITLE: Vue: Setting HTTP Method with router.visit()
DESCRIPTION: Demonstrates how to specify the HTTP method for a manual Inertia visit using the `method` option within `router.visit()` in Vue.js. This example sets the method to 'post'.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md#_snippet_6

LANGUAGE: javascript
CODE:
```
import { router } from '@inertiajs/vue3'

router.visit(url, { method: 'post' })
```

--------------------------------

TITLE: Configure Inertia.js Default Layout
DESCRIPTION: Demonstrates how to change the default layout for Inertia.js in a Rails application by modifying the initializer file. This allows customization of the base layout used for rendering Inertia pages.

SOURCE: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md#_snippet_5

LANGUAGE: ruby
CODE:
```
# config/initializers/inertia_rails.rb
InertiaRails.configure do |config|
  config.layout = 'my_inertia_layout'
end
```