Getting Started

1. Install Mrujs

yarn add mrujs

2. Import Mrujs

With Turbo

// app/javascript/packs/application.js

import mrujs from "mrujs";
import * as Turbo from "@hotwired/turbo";

// Turbo must be set before starting mrujs for proper compatibility with querySelectors.
window.Turbo = Turbo;

mrujs.start();

With Turbolinks

import mrujs from "mrujs";
import Turbolinks from "turbolinks";

mrujs.start();
Turbolinks.start();

Warning:
If using Turbo, make sure to set data-turbo="false" on elements to avoid any event conflicts.
As of v0.4.2, data-turbo="false" will automatically be set for you on any element that has data-remote="true"

With Rails form helpers

<%= form_with scope: Model, local: false do |form| %>
  <%= form.label :name %>
  <%= form.text_field :name %>

  <%= form.submit "Submit", data: { "disable-with": "Submitting..." } %>
<% end %>

With regular HTML

<form method="post" action="/users" data-remote="true">
  <label for="user[name]">Name</label>
  <input id="user[name]">

  <input type="submit" data-disable-with="Submitting...">
  <!-- OR -->
  <button type="submit" data-disable-with="Submitting...">
</form>

Warning
Mrujs hooks into the responses on every form. If you want Mrujs to morph in errors sent from the server, ensure that you send back a 4xx status code.

4. Sending an Ajax `DELETE` request from a link

<a href="/" data-method="delete">Ajax delete request</a>

5. Stopping Mrujs

If you would like to stop Mrujs, feel free to do the following:

window.mrujs.stop();

This will remove all mutation observers and event listeners.

Next Steps

Check out the Practical Guide to mrujs for a guide tour of whats possible with mrujs!