dotdev
Posts
PortalVue – Render Vue.js components anywhere in the DOM

PortalVue – Render Vue.js components anywhere in the DOM

April 29, 2017

PortalVue, created by Thorsten Lünborg, is a portal component for Vuejs that allows you to render DOM elements outside of a component.

Typically when are working with things like tooltips, drop downs, and modals you need to rely on events to communicate between disconnected components. That can lead to complexity in your app and that is where PortalVue comes in.

Here is a simple example that is taken from the docs to highlight how it works:

<portal to="destination">
  <p>This slot content will be rendered wherever the <portal-target> with name 'destination'
    is located.
  </p>
</portal>

<portal-target name="destination">
  <!--
  This component can be located anwhere in your App.
  The slot content of the above portal component will be rendered here.
  -->
</portal-target>

You can even mount items outside of the Vue-App:

<body>
  
    
      
        PortalVue will dynamically mount an  instance of  in place of the Element
        with `id="widget"`, and this paragraph will be rendered inside of it.
      
    
  
  
    new Vue({el: '#app'})
  
  <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>

For more information on this component check out the Github Repo and the official documentation. It looks to be a great solution for keeping your code clean and manageable.

Reply

or to participate.