JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@linusborg/vue-simple-portal"></script>
<div id="portalTarget"></div>
<div id="app">
<div>
<portal selector="#portalTarget">
<p>{{ message }}</p>
</portal>
<button @click="updateContent">Update Content</button>
</div>
</div>
CSS
#portalTarget {
border: 1px solid #f00;
border-radius: 5px;
padding: 8px;
background: lightyellow;
}
#app {
margin-top: 5px;
border: 1px solid #00f;
border-radius: 5px;
padding: 8px;
}
JavaScript
new Vue({
el: '#app',
data: () => ({
message: 'This content is served from within the app.'
}),
methods: {
updateContent () {
this.message = 'And it is fully reactive!'
}
}
})