Как избежать отображения шаблона django перед рендерингом VueJS

У меня есть шаблон Django, который я пытаюсь отрендерить с помощью VueJs, используя CDN. Проблема в том, что когда страница загружается, я вижу необработанный код django с разделителями, прежде чем он будет отрисован VueJS. Это занимает менее секунды

У меня есть вызов API (с помощью Fetch), который получает некоторые данные перед их отображением, и я помещаю их в функцию mounted(). Задержка составляет почти 0.6 секунды, и мы видим, что Django отрисовывает страницу раньше, чем vuejs.

Затем я меняю mounted() на beforeMount(). Теперь я время от времени вижу рендер django, но это гораздо лучше, потому что часто рендер vue приходит первым.

Мой вопрос в том, есть ли лучший способ решить эту проблему. Я использую CDN и не хочу заниматься рендерингом на стороне сервера для этого проекта.

Спасибо

Директивный v-плащ решает эту проблему.

<div id="#app">
    <div v-cloak>
       [[ message ]]  // Vue delimiters for django.
    </div>
</div>

со стилем

[v-cloak] {
  display: none;
}

Убедитесь, что добавили директиву внутри основного div #app

Подробнее об этом здесь Скрытие шаблона vue.js до его рендеринга

Вернуться на верх