Ошибка с Vue. Как запустить js-скрипты?

Question

[Alixx]

Здравствуйте!
(почему-то с первого раза не удалось запостить вопрос целиком, только часть была отображена)
Впервые начала пользоваться Webpack, Vue, Node.js (для меня это дремучий лес, поставила для написания чата), до этого все js-скрипты подключены в шаблонах blade через тэг script.
В консоли проекта запустила команду npm run dev. Далее добавила

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

на свои страницы. ExampleComponent.vue, js/app.js, js/bootstrap.js webpack.mix.js никак не меняла.

Компонент vue отображается на страницах, но теперь не работают никакие другие js-скрипты, подключенные в шаблонах blade (ни внешний, ни внутренние). В консоли пишет ошибку:

[Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

//   здесь красным пишет весь код моего скрипта, который подключен на странице

(found in <Root>)

Подскажите, почему мои js-скрипты даже не загружаются со страницей, а грузится только app.js? Как "заставить" их снова загружаться?

Comments

[JhaoDa]

Непонятно, при чем тут ларавел...

[Константин Б.]

JhaoDa, потому что по факту обязан быть. Де-факто - стандарт ;-)

[Alixx]

JhaoDa, ну, проект-то на ларе, я же написала, что Webpack, Vue, Node.js для меня это пока что дебри, мне не понятно как они работают.

[Константин Б.]

Alixx, так надо с них тогда и начинать! Причем тут Laravel, Тостер. Ищите мануалы, читайте, понимайте доки

[JhaoDa]

Alixx, ну тогда добавьте еще тэг РНР, ларавел-то на РНР. Чо стесняться...

[Alixx]

Константин Б., при том, что всё это - Laravel Mix.

Answer 1

[Alixx]

<div id="app"> </div> был дочерним элементом body и содержал в себе уже весь остальном контент, в т.ч. мои js-скрипты.
Я переместила все js-скрипты вне этого контейнера. И все скрипты заработали.

Comments

[Manfbu]

Спасибо тебе)

Answer 2

[Константин Б.]

Подключали свой компонент хоть?)

Comments

[Alixx]

Нет, это ж ExampleComponent, он по умолчанию уже везде прописан, в т.ч. в vue-stubs\app.js.
Проблема НЕ с компонентом. А с js-скриптами, подключенными в blade шаблонах.
До добавления строки
<script src="{{ asset('js/app.js') }}"></script>
в шаблоны все мои js-скрипты работали. После добавления - перестали работать, в консоли ошибка, а компонент vue работает. Других компонентов я не подключала.