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-slot-portal

Vue plugin for across-component slot distribution.

sample

install

npm i vue-slot-portal

usage

  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

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

<script>
import Level5 from './Level5.vue'
import slotPortal from 'vue-slot-portal'

export default {
  components: {
    // hoc
    Level5: slotPortal.SlotInjector(Level5)
  }
}
</script>

<style></style>

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

license

MIT

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