vue-simple-portal

Simple portal component which allows to mount component anywhere.

Just like portal-vue but does less.

Install

yarn add vue-simple-portal

CDN: UNPKG | jsDelivr (available as window.SimplePortal)

Usage

Given an html file:

<!-- where your app is mounted -->
<div id="app"></div>
<!-- where the portal targets are mounted -->
<div id="target"></div>

And your component:

<template>
  <simple-portal target="target">
    <h1>haha</h1>
    <h2>it just works<h1>
    <p>we'll appear in #target element!</p>
  </simple-portal>
</template>
 
<script>
import SimplePortal from 'vue-simple-portal'
 
export default {
  components: {
    SimplePortal
  }
}
</script>

Props

target

Type: string
Required: true

The id of target HTML element.

componentName

Type: string
Default: portal-target

The component name for the portal target component.

It's recommended to set a custom name if you used this component for multiple times.

License

MIT © EGOIST