Как объединить 2 компонента VUE в blade LAravel, если их нельзя объединить?

Question

[jazzus]

Структура стандартная, которую предлагает Laravel по дефолту.
Т.е. в app.js подключаются все компоненты.
А потом подключается app

const app = new Vue({
    el: '#app',
});

const app2 = new Vue({
    el: '#app2',
});

Затем в главном шаблоне Laravel подключаю app

<script src="{{ asset('js/app.js') }}" defer></script>

и затем в консоли если какого-то app нет он(или оно) пишет
[Vue warn]: Cannot find element: #app2
на скорость не влияет, но как вы от такого избавляетесь? App2 мне нужен для второго компонента на одной стр, когда их в один компонент вместе поместить нельзя (например когда в разных местах шаблона laravel - в шапке и в подвале одновременно). Как правильно все это подключить?

Comments

[AlexanderToster]

Я сделал следующее -
1. Создаем файл resources\js\app2.js (скопировал app.js). В нем меняем el: '#app2', подключаем нужные файлы-компоненты.
2. Создаем файл resources\sass\app2.scss (скопировал app.scss)
3. В файле webpack.mix.js создаем копированием следующее
mix.js('resources/js/app2.js', 'public/js')
.sass('resources/sass/app2.scss', 'public/css');
4. выполняем npm run dev

приложение app2 готово к работе, можно использовать

<div id="app2">
     <example-component2></example-component2>
</div>

Answer 1

[Юрий]

Мне кажется тут не совсем верное понимание spa-приложений. По идее,( если вы не переписываете приложение со стандартного на реактивное ) - у вас должна быть одна единственная точка входа монтирования всего на дом-дерево и соответственно единственный тэг в дом дереве. Все осиальное - это один большой компонент, состоящий из других компонентов(которые в свою очередь могут иметь разный стэйт). Соответственно, нет смысла маунтить несколько компонентов к разным блокам, как это сделано у вас. Сам с vue.js не знаком, но уверен-там такой же принцип, как в реакт и других реактивных фреймворках.

Comments

[jazzus]

Один большой компонент не могу сделать т.к. 2 компонента VUE в одном blade шаблоне, там где их физически объединить нельзя в о дин (в шапке и в подвале). Под одним id="app" они не работают

[jazzus]

Т.е. у меня шаблоны не только в vue, а в blade laravel + vue

[Юрий]

jazzus, ну это уже неправильно. Spa должны иметь одну точку входа, один blade-view с одним единственным блоком, на который вы вешаете своё приложение. А дальше композицию используете, смотрите ниже...футер - это компонент, хэдер - тоже. Каждый из них содержит в себе другие компоненты и т.д.

[jazzus]

Юрий, Так конечно вопросов бы не было. Но у меня другая ситуация 50/50 blade и VUE т.к. все в VUE переводить не хотелось

[jazzus]

Юрий, теперь я понял) Я думал вы имеете ввиду 1 Vue компонент с разветвлением (пока сложно понимаю на словах)).

Answer 2

[Alex Wells]

Подключать отдельные JS файлы с отдельными вьюхами для разных blade шаблонов.

Comments

[jazzus]

Я пробовал. Сделал app2.js Там указал этот второй компонент и конcтанту app2. Везде где был app.js (mix ит.д.) рядом вписал и второй. Не запускается файл.

[Alex Wells]

jazzus, зачем "и второй"? Выборочно, там где нужна одна вьюха - там файл с ней, где другая - там другой.

[jazzus]

Alex Wells, да. В blade шаблонах я так и делал. На странице с app2 подключал app2. Я говорил про файлы настроек Laravel где app.js подключается. Вот рядом с ними я вписывал app2 по аналогии с app. Как вы понимаете, действовал исключительно методом тыка. Без какого либо представления что это и зачем..)) Как и следовало ожидать - файл не подрубился. На самом деле проблему еще тогда решил. Там был простой компонент переключения вкладок на стр информации, поэтому я просто взял bootstrap с js) Узнать, как делать хочу т.к. очень часто нужно было несколько компонентов VUE в blade и приходилось изголяться. Плюс в VUE можно сделать поинтересней чем bootstrap предлагает

Answer 3

[AlexanderToster]

Я сделал следующее -
1. Создаем файл resources\js\app2.js (скопировал app.js). В нем меняем el: '#app2', подключаем нужные файлы-компоненты.
2. Создаем файл resources\sass\app2.scss (скопировал app.scss)
3. В файле webpack.mix.js создаем копированием следующее
mix.js('resources/js/app2.js', 'public/js')
.sass('resources/sass/app2.scss', 'public/css');
4. выполняем npm run dev

приложение app2 готово к работе, можно использовать

Не забываем подключить его в нужном вам шаблоне (где будет располагаться div id="app2")

<script src="{{ asset('js/app2.js') }}" defer></script>

ну и непосредственно использование

<div id="app2">
     <example-component2></example-component2>
</div>

Comments

[jazzus]

Вариант интересный, но если 10 приложений? 10 файлов-телодвижений надо делать, тогда как можно просто в главном blade layout все что в боди обернуть в див с app за 5 секунд и потом делать хоть мильен приложений по всему сайту без напряга, вообще не заморачиваясь с этими app.