Расширенные примеры интеграции JavaScript в Laravel

Пример 1. Динамический поиск с использованием Livewire и Alpine.js

Создадим компонент поиска, который отправляет запрос на сервер при вводе текста и отображает результаты без перезагрузки.

// app/Http/Livewire/Search.php
namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Post;

class Search extends Component
{
    public $query = '';
    public $posts = [];

    public function updatedQuery()
    {
        $this->posts = Post::where('title', 'like', '%'.$this->query.'%')
                            ->take(5)
                            ->get();
    }

    public function render()
    {
        return view('livewire.search');
    }
}

{{-- resources/views/livewire/search.blade.php --}}

    
    

        @foreach($posts as $post)
            
{{ $post->title }}
        @endforeach
    

Результат: при вводе текста с задержкой 300 мс выполняется AJAX-запрос, обновляется список.

(пользователь вводит 'laravel')

  
Laravel для начинающих
  
Интеграция Laravel и React

Пример 2. Передача сложных объектов через data-атрибуты

Передадим вложенные данные с помощью сериализации и разберём на клиенте.

// Blade
@php
    $nested = [
        'user' => ['name' => 'Анна', 'age' => 30],
        'meta' => ['theme' => 'light', 'locale' => 'ru']
    ];
@endphp

Вывод в консоль: Анна

Пример 3. Использование Axios с защитой CSRF в SPA на Vue (Breeze)

Laravel Breeze устанавливает скрипты для обработки CSRF. Пример отправки формы через Axios.

{{-- В blade шаблоне --}}


// resources/js/components/LoginForm.vue

Пояснение: Axios автоматически считывает CSRF-токен из meta-тега, если он настроен в bootstrap.js. Возможная ошибка: токен не передан при первом запросе - необходимо убедиться, что meta-тег присутствует на странице.

Пример 4. Inertia.js: работа с сессионными flash-сообщениями

Inertia поддерживает flash-сообщения, которые отправляются вместе с ответом. Пример на сервере:

// контроллер
public function store(Request $request)
{
    // ... логика
    return redirect()->back()->with('success', 'Данные сохранены!');
}

Во vue-компоненте flash-сообщения доступны через свойство $page.props.flash:

Пример вывода: если произошло сохранение, на странице появится зелёное сообщение.

(после редиректа)
Данные сохранены!

Пример 5. Использование библиотеки Laravel Echo и Pusher для реального времени

Интеграция с WebSockets через Laravel Echo. Необходимо установить pusher/pusher-php-server и laravel-echo.

// config/broadcasting.php
'default' => env('BROADCAST_DRIVER', 'pusher'),

// ресурс bootstrap.js
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

// прослушивание события
Echo.channel('orders')
    .listen('OrderShipped', (e) => {
        console.log('Заказ отправлен:', e.order);
    });

Результат: при вызове события OrderShipped на сервере, все подключённые клиенты получат уведомление.

Консоль: "Заказ отправлен: { id: 42, status: 'shipped' }"

Пример 6. Ленивая загрузка больших JavaScript-файлов через динамические импорты

Vite поддерживает динамические импорты, которые разбивают код на части. В Laravel это работает из коробки.

// resources/js/components/HeavyComponent.js
export default function() {
    console.log('Тяжелый компонент загружен');
}

// resources/js/app.js
import('/components/HeavyComponent.js').then(module => {
    module.default();
});

При сборке Vite создаст отдельный чанк для HeavyComponent. Он загрузится только при выполнении импорта.

(в консоли) "Тяжелый компонент загружен"