Почему Vue не инициализирован?

Question

У меня есть приложение Rails.Иногда на страницах я размещаю компоненты Vue.Это могут быть как простые динамические списки.Но может быть и более сложная реализация с множеством компонентов, вложенных друг в друга.

Сначала я покажу вам, как все это работает (код).

Часть кода изОсновной слой в приложении Rails:

body
  #app
    = yield

И часть кода из JS:

if (document.getElementById('app')) {
  new Vue({
    el: '#app',

А теперь о проблеме.

Иногда, когда я открываюбраузер, затем я загрузил страницу без компонентов Vue.Эта проблема одинаково актуальна в MacOS Chrome / Safari и iOS Safari.Но если я вручную перезагружаю страницу, то все в порядке.

В чем может быть проблема?Почему браузер быстро загружает страницу после запуска (возможно, из кэша?) И плохо реагирует на Vue?

Answer 1

Выполнить код, когда DOM готов:

document.addEventListener('DOMContentLoaded', (event) => {
  if (document.getElementById('app')) {
    new Vue({
     el: '#app',
     ...
})