Как подключить Vue в пакете Laravel?

Question

[vitaly_74]

Добрый день, подскажите или скиньте ссылку (сам не смог найти), как в пакете laravel подключить vue.js притом так чтобы все компоненты в vue находились в папке пакета (чтобы пакет не засорял систему, своими view, и чтобы все файлы пакета находились исключительно в нем, и не раскиданы по проекту). Хотелось бы увидеть саму структуру пакета (в папках), и в коде, как подключить. спасибо. (гуглить гуглил - ответы не нашел).
тег LAravel указал. потому что занимаюсь этим фреймворком, и туда уже встроен vue.js хотелось бы без отрыва от системы.

Comments

[JhaoDa]

Так же, как и не в ларавел.

[vitaly_74]

JhaoDa, можете пример скинуть, пожалуйста?)

[Алекс Глебов]

Если обычная верстка, то так же как jquery. Если spa, то это отдельное приложение.

Answer 1

[Игорь]

Vue самостоятельное приложение!
Он может работать отдельно на любом сервере в любой стране мира!
Нет ни какой связи между Vue и Laravel кроме как API по протоколу http

Располагайте Vue где вам удобно можете вообще в корневой папке root.
Для удобства может сделать так

Но так уже делаю я.
Выберите любой другой способ.

Comments

[vitaly_74]

насколько мне известно, ларавел все скрипты после соединяет в один app.js и передает клиенту передается только один скрипт, не подскажите тогда, как это сделать, используя ваш вариант?

[Игорь]

vitaly_74, На сколько мне известно, Ларавел написан на php.
А Vue на JS

У них нет нечего общего они, нечего не знают друг о друге и в принципе не должны, не чего знать.
В этом то и прелесть!

Связь между laravael и Vue Это API

Можете создать 2 проекта

1 - Laravel back end
2 - Vue front end

Vue будет общаться с laravel с помощью API по протоколу HTTP.

[Игорь]

Игорь, laravel в данном случае это серый кардинал
Любые проверки покажут, что сайт не работает на Laravel.

Ещё раз. Это очень важно!
Vue самостоятельное приложение.
Это должно вам сказать о многом.

[Sanes]

Игорь, а Laravel mix они добавили от безделия.

[Игорь]

Sanes, Хз, не пользовался.
Но вы же прекрасно понимаете, что vue и laravel написаны на разных языках.
Мир не заканчивается ларавелем.

[Sanes]

Игорь, еще я понимаю, что разработчики позаботились об окружением в виде Laravel mix, который тесно связан с Vue и Laravel.

[Игорь]

Sanes, Да всё что угодно может быть.
javascript и в Delphi можно выполнить
а на php написать десктопное графическое приложение.

[Sanes]

Игорь, тебе говорят о конкретном фрейворке, где реализована интеграция. Прекращай занудничать.

[Andrey Suha]

Sanes, mix это просто npm пакет. Все чем он связан с Ларой это то что он от его разрабов и поставляется вместе с ним. Сама Лара ничего не знает ни про mix ни про vue.

[Ihor Bratukh]

Sanes, laravel mix просто оберка над webpack, от laravel там только название.

[Sanes]

Ihor Bratukh, Andrey Suha,
laravel mix идет в стандартной поставке. Который и занимается упрощением интеграции. Теми же роутами вы не заморачиваетесь на стороне Vue.

[Andrey Suha]

Sanes, и?

[Sanes]

Andrey Suha, что и? Есть конкретные правила написания шаблонов. Как на стороне blade, так и на стороне Vue, чтобы это работало после сборки.

[Игорь]

Sanes, Извини, рабочий момент.
Ну как же без занудства?

В своих messages я имею в виду то, что laravel и vue не должны знать друг о друге.
Это же замечательно, даже если он лежит в проекте laravel

[Andrey Suha]

Sanes, и как это тесно связано с фреймворком ларавель? Он как незнал ничего про фронтенд кроме блейда так и не знает

[Sanes]

Игорь, он там не просто лежит, а настроен для работы с Laravel. Больше нигде это работать не будет.

[Игорь]

Но мы ведь говорим о vuejs, а не о vuejs mix

[Игорь]

Sanes, Да бог с ним, заюзаю как нибудь.
Пусть себе лежит пока.
Я предпочитаю слабую связь между приложениями.
Тем более что они на разных языках написаны.

[JhaoDa]

Sanes,

а настроен для работы с Laravel.

В чём заключается эта настройка? В умении генерить манифест?

Больше нигде это работать не будет

Сильное заявление. А почему не будет?

Answer 2

[jazzus]

В папке resources – js – components будет тестовый компонент. Пишешь свой на его примере. Идешь в файл app.js подключаешь там свой компонент

Vue.component('comp', require('./components/Comp.vue'));

Запускаешь npm run watch в консоли
Пока идет процесс, идешь в блейд шаблон и прописываешь там компонент

<div id="app">
   <comp
   :users="{{json_encode($users)}}"
   ></comp>
</div>

users - это пропс, куда ты прокидываешь своих юзеров. Также можно фетчить прямо из компонента с помощью axios (в гугле примеры). И, как мне однажды подсказали на Тостере - div id="app" лучше добавить в главный шаблон app (обернуть все что в body). Это удобно т.к. не нужно прописывать везде этот div и иметь возможность использовать сколько хочешь компонентов на странице. Если компонент не появился на стр, сбросить кеш браузера и проверить его появление в vue dev tools.