Использование JavaScript

---

Основой платформы по части стилей является Bootstrap, а в браузере выполняется код Stimulus, вам необязательно использовать именно их.

Построим базовый пример, который отображает текст, введённый в поле. Для этого выполним описанные ниже действия.

В resources/js создадим следующую структуру:

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

Класс контроллера со следующим содержанием:

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

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

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

И точку сборки:

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

application.register("hello", HelloController);

Такая структура не помешает вашему приложению не зависимо от того, какой front-end строится: Angular/React/Vue и т.п.

Останется только описать сборку в webpack.mix.js :

let mix = require('laravel-mix');

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

Осталось только подключить полученный сценарий к панели в файле конфигурации или в сервис провайдере, используя метод registerResource. Точно так же можно поступить и с таблицами стилей, что позволит эффективно строить логику приложений.

class ServiceProvider extends ServiceProvider
{
    public function boot(Dashboard $dashboard)
    {
        $dashboard->registerResource('scripts','dashboard.js');
        //$dashboard->registerResource('stylesheets','dashboard.css');
    }
}

Для отображения воспользуемся шаблоном, для которого предварительно нужно определить Controller и Route в вашем приложение:

// 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>