Как избежать отображения шаблона 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 до его рендеринга