### Install Inertia Client Dependencies
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md
Installs the Inertia.js client-side adapter and the corresponding framework (Vue, React, or Svelte) using npm.
```shell
npm install @inertiajs/vue3 vue
```
```shell
npm install @inertiajs/react react react-dom
```
```shell
npm install @inertiajs/svelte svelte
```
--------------------------------
### Start Development Server
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md
Starts both the Rails server and the Vite development server, allowing you to view your Inertia.js application locally.
```bash
bin/dev
```
--------------------------------
### Install Inertia Rails Gem
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md
Installs the Inertia server-side adapter gem for Ruby on Rails. This is the first step in integrating Inertia into your Rails application.
```bash
bundle add inertia_rails
```
--------------------------------
### Install @inertiajs/react Adapter
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/upgrade-guide.md
Installs the Inertia.js client-side adapter for React using npm. This is a required step for upgrading to Inertia.js v2.0.
```bash
npm install @inertiajs/react@^2.0
```
--------------------------------
### Generate Inertia Installation
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md
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.
```bash
bin/rails generate inertia:install
```
--------------------------------
### Log Visit URL on 'start' Event (Vue, React, Svelte)
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/events.md
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`.
```js
import { router } from '@inertiajs/vue3'
router.on('start', (event) => {
console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```
```jsx
import { router } from '@inertiajs/react'
router.on('start', (event) => {
console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```
```js
import { router } from '@inertiajs/svelte'
router.on('start', (event) => {
console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```
--------------------------------
### Install @inertiajs/svelte Adapter
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/upgrade-guide.md
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.
```bash
npm install @inertiajs/svelte@^2.0
```
--------------------------------
### Define Root Element ID
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md
Shows how to specify a custom ID for the application's root HTML element when initializing Inertia.
```javascript
createInertiaApp({
id: 'my-app',
// ...
})
```
--------------------------------
### Register Inertia 'start' Event Listener
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/events.md
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.
```javascript
import { router } from '@inertiajs/vue3'
router.on('start', (event) => {
console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```
```jsx
import { router } from '@inertiajs/react'
router.on('start', (event) => {
console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```
```javascript
import { router } from '@inertiajs/svelte'
router.on('start', (event) => {
console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```
--------------------------------
### Install @inertiajs/vue3 Adapter
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/upgrade-guide.md
Installs the Inertia.js client-side adapter for Vue 3 using npm. This is a required step for upgrading to Inertia.js v2.0.
```bash
npm install @inertiajs/vue3@^2.0
```
--------------------------------
### Install NProgress - Shell
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md
Install the NProgress library, a popular choice for creating progress bars, using npm.
```shell
npm install nprogress
```
--------------------------------
### Initialize Inertia App with React
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md
Initializes the Inertia app using React. It configures component resolution for .jsx files and sets up the React application using createRoot for rendering.
```javascript
// 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))
},
})
```
--------------------------------
### Inertia.js File Upload Example with Form Helper
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/file-uploads.md
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.
```vue
```
```jsx
import { useForm } from '@inertiajs/react'
const { data, setData, post, progress } = useForm({
name: null,
avatar: null,
})
function submit(e) {
e.preventDefault()
post('/users')
}
return (
)
```
```svelte
```
```svelte
```
--------------------------------
### Inertia Controller Generator Example Output
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/responses.md
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'.
```bash
$ 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
```
--------------------------------
### Svelte: Shortcut Request Methods
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md
Illustrates the usage of Inertia's shortcut request methods in Svelte, including `get`, `post`, `put`, `patch`, `delete`, and `reload`, for efficient navigation.
```javascript
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
```
--------------------------------
### Inertia Scaffold Generator Example Output
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/responses.md
Illustrates the typical output when running the `inertia:scaffold` generator, showing the files created for Active Record, routes, controllers, and frontend pages.
```bash
$ 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
```
--------------------------------
### Start Progress Indicator - JavaScript
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md
Implement an Inertia event listener for the 'start' event to initiate the NProgress bar when a new page visit begins.
```javascript
router.on('start', () => NProgress.start())
```
--------------------------------
### React: Shortcut Request Methods
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md
Shows how to use Inertia's shortcut request methods in React, such as `get`, `post`, `put`, `patch`, `delete`, and `reload`, for streamlined navigation.
```javascript
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
```
--------------------------------
### Install Inertia Rails with React, Vite, and Tailwind
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/cookbook/integrating-shadcn-ui.md
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.
```bash
rails new -JA shadcn-inertia-rails
cd shadcn-inertia-rails
bundle add inertia_rails
rails generate inertia:install --framework=react --vite --tailwind --no-interactive
```
--------------------------------
### Initialize Inertia App with Svelte 5
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md
Initializes the Inertia app using Svelte 5. It configures component resolution for .svelte files and uses the mount function to render the Svelte application.
```javascript
// 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 })
},
})
```
--------------------------------
### Initialize Inertia App with Svelte 4
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md
Initializes the Inertia app using Svelte 4. It configures component resolution for .svelte files and mounts the Svelte application to the provided element.
```javascript
// 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 })
},
})
```
--------------------------------
### Configure Inertia Component Resolution with Webpacker/Shakapacker
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md
Shows how to configure the `resolve` callback for Inertia.js when using Webpacker or Shakapacker, using `require` to load components from the specified path.
```javascript
// Webpacker/Shakapacker
// javascript/packs/inertia.js
createInertiaApp({
resolve: (name) => require(`../pages/${name}`),
// ...
})
```
```javascript
// Webpacker/Shakapacker
// javascript/packs/inertia.js
createInertiaApp({
resolve: (name) => require(`../pages/${name}`),
//...
})
```
```javascript
// Webpacker/Shakapacker
// javascript/packs/inertia.js
createInertiaApp({
resolve: (name) => require(`../pages/${name}.svelte`),
//...
})
```
--------------------------------
### Install Inertia Rails with React, TypeScript, Vite, and Tailwind
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/cookbook/integrating-shadcn-ui.md
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.
```bash
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
```
--------------------------------
### Configure Inertia Component Resolution with Vite
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md
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).
```javascript
// Vite
// frontend/entrypoints/inertia.js
createInertiaApp({
resolve: (name) => {
const pages = import.meta.glob('../pages/**/*.vue', { eager: true })
return pages[`../pages/${name}.vue`]
},
// ...
})
```
```javascript
// Vite
// frontend/entrypoints/inertia.js
createInertiaApp({
resolve: (name) => {
const pages = import.meta.glob('../pages/**/*.jsx', { eager: true })
return pages[`../pages/${name}.jsx`]
},
//...
})
```
```javascript
// Vite
// frontend/entrypoints/inertia.js
createInertiaApp({
resolve: (name) => {
const pages = import.meta.glob('../pages/**/*.svelte', { eager: true })
return pages[`../pages/${name}.svelte`]
},
//...
})
```
--------------------------------
### Register Inertia 'start' Event Listener with Native Browser Events
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/events.md
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.
```javascript
import { router } from '@inertiajs/vue3'
document.addEventListener('inertia:start', (event) => {
console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```
```jsx
import { router } from '@inertiajs/react'
document.addEventListener('inertia:start', (event) => {
console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```
```javascript
import { router } from '@inertiajs/svelte'
document.addEventListener('inertia:start', (event) => {
console.log(`Starting a visit to ${event.detail.visit.url}`)
})
```
--------------------------------
### Root Template for Vite
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md
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.
```erb
<%= csp_meta_tag %>
<%= inertia_ssr_head %>
<%# If you want to use React add `vite_react_refresh_tag` %>
<%= vite_client_tag %>
<%= vite_javascript_tag 'application' %>
<%= yield %>
```
--------------------------------
### Initialize Inertia App with Vue
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md
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.
```javascript
// 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)
},
})
```
--------------------------------
### Inertia.js: Form Submission Methods
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/forms.md
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.
```js
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)
```
```jsx
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)
```
```js
$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)
```
--------------------------------
### Install inertia_rails Gem
Source: https://github.com/inertiajs/inertia-rails/blob/master/README.md
Add the inertia_rails gem to your Gemfile to begin using Inertia.js with your Rails application.
```Ruby
gem 'inertia_rails'
```
--------------------------------
### Initialize shadcn/ui in a Rails Project
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/cookbook/integrating-shadcn-ui.md
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.
```shell
npx shadcn@latest init
```
--------------------------------
### Install Babel Plugin for Dynamic Imports
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/code-splitting.md
Installs the `@babel/plugin-syntax-dynamic-import` npm package, which is required to enable dynamic imports for code splitting with Webpack/Shakapacker.
```shell
npm install @babel/plugin-syntax-dynamic-import
```
--------------------------------
### Svelte Loading Indicator Implementation
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md
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.
```javascript
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()
}
})
```
--------------------------------
### Install Inertia Modal NPM Package
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/cookbook/inertia-modal.md
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.
```bash
npm install @inertiaui/modal-vue
```
```bash
npm install @inertiaui/modal-react
```
--------------------------------
### React Loading Indicator Implementation
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md
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.
```javascript
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()
}
})
```
--------------------------------
### JavaScript Loading Indicator Delay Setup
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md
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.
```javascript
let timeout = null
router.on('start', () => {
timeout = setTimeout(() => NProgress.start(), 250)
})
router.on('finish', (event) => {
clearTimeout(timeout)
if (!NProgress.isStarted()) {
return
}
// ...
})
```
```javascript
router.on('finish', (event) => {
clearTimeout(timeout)
if (!NProgress.isStarted()) {
return
}
// ...
})
```
```javascript
router.on('progress', event => {
if (!NProgress.isStarted()) {
return
}
// ...
})
```
--------------------------------
### Create Inertia Response (Rails Ruby)
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md
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.
```ruby
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
```
--------------------------------
### Specify HTTP Method for Inertia Link
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/links.md
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.
```Vue
Logout
```
```React
import { Link } from '@inertiajs/react'
export default () => (
Logout
)
```
```Svelte
Logout
```
--------------------------------
### Install Inertia Rails Contrib Gem
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/cookbook/inertia-modal.md
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.
```bash
bundle add inertia_rails-contrib
```
--------------------------------
### Vue: Shortcut Request Methods
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md
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.
```javascript
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
```
--------------------------------
### Svelte: Setting HTTP Method with router.visit()
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md
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'.
```javascript
import { router } from '@inertiajs/svelte'
router.visit(url, { method: 'post' })
```
--------------------------------
### Svelte: Programmatic Visit with router.visit()
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md
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.
```javascript
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: () => {},
})
```
--------------------------------
### Svelte 5: Implement Persistent Layout
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/pages.md
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.
```svelte
Welcome
Hello {user.name}, welcome to your first Inertia app!
```
--------------------------------
### Vue Loading Indicator Implementation
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md
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.
```javascript
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()
}
})
```
--------------------------------
### Include NProgress Styles - HTML
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/progress-indicators.md
Add the necessary NProgress CSS styles to your project to enable the progress bar's visual appearance. This example uses a CDN link.
```html
```
--------------------------------
### React: Setting HTTP Method with router.visit()
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md
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'.
```javascript
import { router } from '@inertiajs/react'
router.visit(url, { method: 'post' })
```
--------------------------------
### Root Template for Webpacker/Shakapacker
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md
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.
```erb
<%= csp_meta_tag %>
<%= inertia_ssr_head %>
<%= stylesheet_pack_tag 'application' %>
<%= javascript_pack_tag 'application', defer: true %>
<%= yield %>
```
--------------------------------
### Create Inertia.js Response in Rails Controller
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md
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.
```ruby
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
```
--------------------------------
### Using usePrefetch Hook
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/prefetching.md
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.
```javascript
import { usePrefetch } from '@inertiajs/vue3'
const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch()
```
```javascript
import { usePrefetch } from '@inertiajs/react'
const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch()
```
```javascript
import { usePrefetch } from '@inertiajs/svelte'
const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch()
```
--------------------------------
### usePrefetch with Custom Headers
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/prefetching.md
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.
```javascript
import { usePrefetch } from '@inertiajs/vue3'
const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch({
headers: { 'X-Custom-Header': 'value' },
})
```
```javascript
import { usePrefetch } from '@inertiajs/react'
const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch({
headers: { 'X-Custom-Header': 'value' },
})
```
```javascript
import { usePrefetch } from '@inertiajs/svelte'
const { lastUpdatedAt, isPrefetching, isPrefetched, flush } = usePrefetch({
headers: { 'X-Custom-Header': 'value' },
})
```
--------------------------------
### Inertia RSpec Assertions: Component Rendering
Source: https://github.com/inertiajs/inertia-rails/blob/master/README.md
Provides examples of RSpec assertions for verifying that the correct Inertia component is rendered and for accessing the component name.
```ruby
# check the component
expect_inertia.to render_component 'Event/Index'
# access the component name
expect(inertia.component).to eq 'TestComponent'
```
--------------------------------
### Include Inertia.js RSpec Helper
Source: https://github.com/inertiajs/inertia-rails/blob/master/README.md
Shows how to integrate Inertia.js testing helpers into an RSpec setup by adding a `require` statement to `spec/rails_helper.rb`.
```ruby
require 'inertia_rails/rspec'
```
--------------------------------
### Inertia Rails RSpec Setup
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/testing.md
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.
```ruby
require 'inertia_rails/rspec'
```
--------------------------------
### Define Custom Root Element ID for Inertia App
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/client-side-setup.md
Illustrates how to specify a custom `id` for the root element of the Inertia application, overriding the default 'app' ID.
```javascript
createInertiaApp({
id: 'my-app',
// ...
})
```
--------------------------------
### Run Inertia SSR Server
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-rendering.md
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.
```shell
bin/vite ssr
```
--------------------------------
### Preserve State with GET Requests (Vue, React, Svelte)
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md
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.
```vue
import { router } from '@inertiajs/vue3'
router.get('/users', { search: 'John' }, { preserveState: true })
```
```react
import { router } from '@inertiajs/react'
router.get('/users', { search: 'John' }, { preserveState: true })
```
```svelte
import { router } from '@inertiajs/svelte'
router.get('/users', { search: 'John' }, { preserveState: true })
```
--------------------------------
### Vue: Setting HTTP Method with router.visit()
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/manual-visits.md
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'.
```javascript
import { router } from '@inertiajs/vue3'
router.visit(url, { method: 'post' })
```
--------------------------------
### Configure Inertia.js Default Layout
Source: https://github.com/inertiajs/inertia-rails/blob/master/docs/guide/server-side-setup.md
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.
```ruby
# config/initializers/inertia_rails.rb
InertiaRails.configure do |config|
config.layout = 'my_inertia_layout'
end
```