CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Daniel R.
Daniel R.

Reputation: 649

Vuejs how to declare a component in HTML before the #app

For some reason I need to render a component in html, right before the div with the id #app which is needed by Vue.js to run.

Is that even possible?

Upvotes: 2

Views: 967

Answers (2)

blaz
blaz

Reputation: 4068

You can use portal-vue to do that. There is example of how to render outside of the Vue app:

Rendering outside of the Vue-App 

  <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>

Upvotes: 1

dagalti
dagalti

Reputation: 1956

in Child component mounted you can insert the element before #app 

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

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

Upvotes: 2

Related Questions