Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-slot-portal with all npm packages installed. Try it out:

var vueSlotPortal = require("vue-slot-portal")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-slot-portal v0.3.0

Vue plugin for slot across-component distribution.


Vue plugin for across-component slot distribution.



npm i vue-slot-portal


  1. define slot routes (key: slotName, value: componentName)
import slotPortal from 'vue-slot-portal'

const slotRoutes = {
  level5: 'Level5'

Vue.use(slotPortal, slotRoutes)
  1. write slot content anywhich component in your project, with SlotReceiver
// write your slot content anywhere as you need
// someComponent.vue

  <div class="somewhere">
      <!-- 'level5' slot content -->
      <template v-slot:level5="slotProps">
        <div>slot content from Index receiver: {{slotProps.test}}</div>
  1. wrap your component who need the slot content with SlotInjector, when you reference this component.
// Level5.vue
  <div class="level5">
    <slot name="level5" v-bind:test="test">
      default {{test}}
// the component which references Level5
  <div class="level4">

import Level5 from './Level5.vue'
import slotPortal from 'vue-slot-portal'

export default {
  components: {
    // hoc
    Level5: slotPortal.SlotInjector(Level5)


then, the slot content whose name is 'level5' will be transported to the component whose name is 'Level5', according to the slot routes.



RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free