Vuejs, как объявить компонент в HTML перед #app

Question

По какой-то причине мне нужно визуализировать компонент в html, прямо перед div с id #app, который необходим для запуска Vue.js.

Это вообще возможно?

Answer 1

в дочернем компоненте mounted вы можете вставить элемент перед #app

 mounted() {
    document.body.insertBefore(this.$el, document.body.firstChild)
  }

Jsfiddle: https://jsfiddle.net/rk5ytqs3/

Answer 2

Вы можете использовать portal-vue , чтобы сделать это.Существует пример того, как визуализировать вне приложения Vue:

Рендеринг вне приложения Vue

  <div id="app">
    <portal target-el="#widget">
      <p>
        PortalVue will dynamically mount an  instance of <portal-target> in place of the Element
        with `id="widget"`, and this paragraph will be rendered inside of it.
      </p>
    </portal>
  </div>
  <script>
    new Vue({el: '#app'})
  </script>
  <aside id="widget" class="widget-sidebar">
    This Element is not controlled by our Vue-App, but we can create a <portal-target> there dynamically.
  </aside>
</body>