Здравствуйте. У меня стойкое чувство, что я введён в заблуждение и всё делаю абсолютно не так.
Есть blade-шаблоны, в которых внутри #app заложен код, который как-то преобразуется сервером и пользователю выдаётся html-код, с разными директивами vue. Иногда по определенным причинам эти шаблоны нельзя преобразовать и запихнуть в компонент Vue.
Вот, например, задачи, которые решает Vue:
- Валидация и динамичность формы в зависимости от выбранных данных.
- Вывод элементов json-массива, который получен через Ajax из бекэнда.
Вот реализация первой задачи, которое пришло мне в голову:
- Чтобы браузеру пользователя не пришлось загружать js-файлы, в которых много дублирующегося кода, подключать по отдельности файлы, где подрубается сам Vue, и определенные его компоненты.
- Писать JS-код для Vue прямо в коде страницы (blade-шаблоне), или создавать отдельный js-файл для каждой страницы, а потом подключать его в blade-шаблон
Пример кода:
@section('content')
<div id="app">
<!-- Конструкции Blade, использующие PHP-переменные, и HTML-код, содержащий в себе разные директивы Vue -->
</div>
<!-- Подключаем файл app.js, в котором есть только следующее -->
<!-- window.Vue = require('vue'); -->
<script type="text/javascript" src="{{ mix('/js/app.js') }}"></script>
<!-- Здесь подключается на настраивается VeeValidate -->
<script type="text/javascript" src="{{ mix('/js/validator.js') }}"></script>
<!-- Здесь пишется код для приложения Vue -->
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {!! json_encode($data) !!}, // На стороне сервера задаём переменные и подключаем их
/* остальный код */
});
</script>
@stop
Реализация второй задачи:
- В blade-шаблоне внутри #app просто пишу добавляю .
- Подключаю js-файл с require('vue');
- Подключаю js-файл с Vue.component('component', require('/components/component.vue')) и new Vue({el: '#app'}).
Спрашиваю мнения сообщества: насколько дикими вам кажутся подобные реализации?
Как поступили бы вы в этих случаях?
Как лучше организовать подключение пакетов, файлов и компонентов, чтобы они не вызывали конфликтов и не перегружали страницу?
Может быть вы посоветуете что-нибудь почитать про это?
Спасибо.