Render external element inside Vue component

Question

I have an external div that I need to render inside my Vue app. I'm trying to use a slot, like but that's a no go as nothing renders.

Any ideas?

Goal is to have HTML like this (Vue mounts on #app):

<div id="app" data-slot-header="#header"></div>

<div id="header">
  <h1>Title here</h1>
</div>

Then the Vue component

<template>
  <div>
    <slot name="header"></slot>
  </div>
</template>

Phil Phil · Accepted Answer · 2020-08-11T02:06:48

You can use a dynamic <component> and refer to your #header element as a template reference.

For example

new Vue({
  data: () => ({
    headerComponent: {
      template: '#header' // refer to template element by selector
    }
  }),
}).$mount('#app')

#app:before,#header:before{position:absolute;top:0;right:0;color:rgba(1,1,1,.5);font-size:.8rem}#app{border:1px solid #666;position:relative}#app:before{content:'Vue app'}#header{position:relative;opacity:.5}#header:before{content:'Original header'}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <p>Dynamic component rendered here 👇</p>
  <component :is="headerComponent"></component>
</div>

<div id="header">
  <h1>Title here</h1>
</div>

Render external element inside Vue component

2 Answers