JavaScript

Laraloop UI in terms of styling is Bootstrap, and the browser runs Hotwired and Stimulus. You can connect other libraries to your liking, but we recommend staying in this ecosystem.

Turbo

Thanks to Turbo, your application emulates the Single Page Application, loading resources only on the first call and giving the impression of re-rendering content in the browser instead of natural standard transitions between pages.

Since all resources will be loaded on the first call, classic calls like this will not work:

document.addEventListener("load", () => {
    console.log('Page load');
});

It will be executed only once and will not be called again during transitions. To avoid this, you need to use Turbo events:

document.addEventListener("turbo:load", () => {
    console.log('Page load');
})

You can find more details on the website turbo.hotwire.dev.

Stimulus

Stimulus is a JavaScript framework from the Ruby on Rails developers. It equips frontend development using new approaches to JavaScript, while it does not seek to control all your actions and does not impose a separation of frontend from backend.

Let's build a basic example that displays the text entered the field for this:

In resources/js, create the following structure:

resources
├── js
│   ├── controllers
│   │   └── hello_controller.js
│   └── app.js
└── views

Controller class has the following content:

// hello_controller.js
import { Controller } from '@hotwired/stimulus';

export default class extends Controller {

    initialize() {
        console.log('initialize...')
    }

    connect() {
        console.log('Hello, world!')
    }

    disconnect() {
        console.log('disconnect...')
    }
}

And the registration of this controller will be:

// app.js
import HelloController from "./controllers/hello_controller"

application.register("hello", HelloController);

Such a structure will not prevent your application, no matter what kind of front-end to build: Angular/React/Vue, etc.

It remains only to describe the assembly in webpack.mix.js:

// webpack.mix.js
let mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')

To use your HelloController you can add a data-controller="hello" to any element you want to use this controller. Example:

<!-- hello.blade.php -->
<div data-controller="hello">
    This is my element that use HelloController.
</div>