Blade Vue Vars

Blade Vue Vars — это подход к передаче данных между шаблонами Laravel Blade и компонентами Vue.js. Он позволяет использовать переменные из PHP (Laravel) в JavaScript (Vue) и наоборот, но требует осторожности из-за конфликтов синтаксиса и этапов рендеринга. Разберем, как это работает и какие подводные камни есть.

Основная проблема

• Blade (серверный шаблонизатор Laravel) и Vue (клиентский фреймворк) используют одинаковые синтаксисы для вставки переменных: {{ }}.
• Если не экранировать код, Blade попытается обработать Vue-переменные, что приведет к ошибкам.
• Пример конфликта:

<!-- Blade пытается обработать `message` как PHP-переменную -->

<div>{{ message }}</div> 
<!-- Ошибка, если `message` существует только во Vue -->

Как передавать данные из Blade во Vue

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

Директива Blade преобразует PHP-переменные в JSON, чтобы Vue мог их прочитать:

<script>
  window.sharedData = @json($data); // PHP-массив $data станет JS-объектом
</script>

В компоненте Vue:

export default {
  data() {
    return {
      items: window.sharedData
    }
  }
}

Передача через props

В Blade:

 XML
<vue-component :items='@json($items)'></vue-component>

В Vue:

javascript

export default {
  props: ['items']
}

Экранирование Blade-синтаксиса

Если нужно вывести {{ }} как текст для Vue, добавьте @:

xml<div>@{{ vueVariable }}</div> 
<!-- Blade проигнорирует, Vue обработает -->

Примеры использования

Динамическая таблица с пагинацией без перезагрузки страницы (Blade + Vue):

xml<!-- Blade -->
<div id="app">
  <data-table :initial-data='@json($users)'>
    @{{ vueMessage }} <!-- Vue обработает после загрузки -->
  </data-table>
</div>

javascript// Vue-компонент DataTable.vue
export default {
  props: ['initialData'],
  data() {
    return {
      users: this.initialData,
      vueMessage: 'Данные загружены!'
    }
  }
}

Частые ошибки

Смешивание синтаксиса без экранирования:

xml<!-- НЕПРАВИЛЬНО --> <div>{{ $laravelVar }} @{{ vueVar }}</div> 

xml<!-- ПРАВИЛЬНО --> <div>{{ $laravelVar }} <span>@{{ vueVar }}</span></div>

Передача сложных объектов без @json:

xml<!-- НЕПРАВИЛЬНО --> 
<vue-component :items="{{ $items }}"></vue-component> 
<!-- Сломается, если $items содержит кавычки -->

Игнорирование XSS-уязвимостей:
Всегда экранируйте данные через @json или htmlspecialchars, если они приходят от пользователей.

Когда использовать?

• Подходит:
  • Небольшие проекты с простой реактивностью (фильтры, сортировка таблиц).
  • Постепенная миграция с Blade на Vue.
• Не подходит:
  • Крупные SPA-приложения (лучше использовать чистый Vue + API).
  • Когда нужен SSR (выбирайте Nuxt.js или Inertia.js).

Альтернативы

• Inertia.js: Позволяет использовать Vue компоненты как Blade-шаблоны, избегая ручной передачи данных.
• Livewire: Пишите реактивные компоненты на PHP без погружения в JavaScript.

Blade + Vue — мощный дуэт для гибридных приложений, но требует аккуратной работы с данными. Используйте @json, экранирование и разделяйте логику, чтобы избежать конфликтов. Для сложных проектов рассмотрите специализированные инструменты (Inertia, Livewire).