Description
Bom, estamos desenvolvendo uma aplicação em Vue, porém ele também irá utilizar uma "framework" interna, que são os padrões de desenvolvimento internos. Essa "framework" depende que o conteúdo dela esteja pronta na tela quando a DOM for carregada, caso contrário, vários erros não carregam a página.
Iniciamos o projeto, com a estrutura principal no html, para que seja injetado a partir de uma div com id no centro do conteúdo, exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="XXXXXl" />
<meta name="author" content="XXX" />
<script charset="utf-8" src="./static/xxx/js/modernizr.js"></script>
<style>
.js body {
display: none;
}
</style>
<title>xxxx Digital</title>
</head>
<body data-xxx-ambiente="">
<div id="app"></div>
<script src="./static/xxx/js/yui-min.js"></script>
<script src="./static/xxx/js/load-control.js"></script>
</body>
</html>O problema é que o conteúdo sendo injetado pelo Vue também já tem que estar na tela, e por conta do atraso na execução por parte do Vue, essa "framework" começa a ser executada e dá erro em um dos componentes, pois ele ainda não foi carregado. Tendo isso em vista, tentei de diversas formas fazer com que o Vue injete o conteúdo por inteiro, para que fosse executado ao mesmo tempo, porém não tive sucesso. Tentei também, invés de utilizar templates, usar html's normalmente e manipular apenas as variáveis, como o AngularJS faz, mas também não consegui.
Alguém poderia me dar uma luz pra fazer isso funcionar? Grato!