---
url: https://lune-js.com/integrations/rails.md
---
# Rails Integration Guide
Lune works exceptionally well with Ruby on Rails, providing a lightweight alternative or supplement to Stimulus and Turbo.
## Installation
The quickest way is via CDN in your `application.html.erb` layout.
```html
```
## Data Injection
Rails provides several ways to pass data to your views.
### In your Controller:
```ruby
def index
@users = User.all.to_json
end
```
### In your ERB View:
Inject the data directly into `lu-scope`.
```html
<%= link_to 'Show', user_path(@user) %> - {{ user.name }}
```
## CSRF Protection
Rails includes a CSRF token in a meta tag by default. Lune can easily read this for AJAX requests.
### Option 1: Reading Meta Tag
```js
function submitPost() {
const token = document.querySelector('meta[name="csrf-token"]').content;
fetch("/posts", {
method: "POST",
headers: {
"X-CSRF-Token": token,
"Content-Type": "application/json"
},
body: JSON.stringify(this.postData)
});
}
```
## Integration with Turbo
If you are using Hotwire (Turbo), remember that Turbo replaces the `` but doesn't perform a full page reload.
### Handling Turbo Page Loads
You may need to re-initialize Lune after a Turbo navigation.
```js
document.addEventListener("turbo:load", () => {
Lune.createApp().mount();
});
```
## Practical Examples
### 1. Interactive Search Filter
Use Lune to filter a list of items fetched from Rails.
```html
```
### 2. Form with Dynamic Fields
Easily add or remove nested form fields.
```html
```
## ERB Conflict Handling
Rails uses `<%= %>` which doesn't conflict with Lune's {{ }}. However, you might want to use different delimiters for clarity.
### Changing Lune Delimiters
```js
createApp({
$delimiters: ["[[", "]]"]
}).mount();
```
ERB View:
```html
[[ rails_data_in_pico_vue ]]
```