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

Turbo

Благодаря Turbo админ-панель эмулирует Single Page Application, загружая ресурсы только при первом вызове и создавая впечатление повторной отрисовки контента в браузере вместо стандартных переходов между страницами.

Поскольку все ресурсы будут загружены при первом вызове, классические вызовы, подобные этому, работать не будут:

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

Он будет выполнен только один раз и больше не будет вызываться при переходах. Чтобы этого избежать, нужно использовать события turbo:

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

Более подробную информацию вы можете найти на сайте turbo.hotwire.dev.

Stimulus

Stimulus это фреймворк JavaScript от разработчиков Ruby on Rails. Он оснащает фронтенд-разработку новыми подходами к JavaScript, при этом не стремится контролировать все ваши действия и не навязывает отделение фронтенда от бэкенда.

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

В 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. Точно так же можно поступить и с таблицами стилей, что позволит эффективно строить логику приложений.

// config/platform.php
'resource' => [
    'stylesheets' => [],
    'scripts'     => [
        '/js/dashboard.js'
    ],
],

Примечание. Для применения изменений в конфигурационном файле может потребоваться очистить кеш, если он был создан ранее. Это можно сделать с помощью artisan команды artisan config:clear.

Пример записи для поставщика услуг

// app/Providers/AppServiceProvider.php

use Orchid\Platform\Dashboard;

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

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

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

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

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

Обертка Vue.js внутри Stimulus

Многие разработчики любят простоту и мощность Vue.js для построения интерактивных и отзывчивых frontend приложений. В этой секции, мы рассмотрим как просто обернуть и интегрировать Vue компонент внутри Stimulus контроллера.

Создайте файл Stimulus контроллера, для примера hello_controller.js:

import {createApp} from 'vue';

export default class extends window.Controller {
    connect() {
        this.app = createApp({
            data() {
                return {
                    message: 'Hello, Vue.js!'
                }
            }
        });

        this.app.mount(this.element);
    }

    disconnect() {
        this.app.unmount();
    }
}

Укажите ваш контроллер во view, а конкретно в blade шаблоне:

<div data-controller="hello">
  @{{ message }}
</div>

Теперь, когда вы перезагрузите страницу, экземпляр Vue.js будет создан и мы увидим наше сообщение `Hello, Vue.js!' на экране и внутри HTML элемента. Далее вы можете использывать Vue.js как обычно в рамках контроллера Stimulus.