Use JavaScript


The basis of the platform in terms of styles is Bootstrap, and the browser executes the code Stimulus, you do not need to use them.

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

In resources/js, create the following structure:

resources
├── js
│   ├── controllers
│   │   └── hello.js
│   └── dashboard.js
├── lang
├── sass
└── views

Controller class with the following content:

// hello.js
export default class extends window.Controller {

    static get targets() {
        return [ "name", "output" ]
    }

    greet() {
        this.outputTarget.textContent =
            `Hello, ${this.nameTarget.value}!`
    }
}

And the assembly point:

// dashboard.js
import HelloController from "./controllers/hello"

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:

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

It remains only to connect the received script to the panel in the configuration file or in the service provider using the registerResource method. You can do the same with style sheets, which will allow you to effectively build application logic.

class ServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot(Dashboard $dashboard)
    {
        $dashboard->registerResource('scripts','dashboard.js');
        //$dashboard->registerResource('stylesheets','dashboard.css');
    }
}

To display, use the template:

// hello.blade.php
<div data-controller="hello">
  <input data-target="hello.name" type="text">

  <button data-action="click->hello#greet">
    Greet
  </button>

  <span data-target="hello.output">
  </span>
</div>