Vue-slot-portal - Vue plugin for across-component slot distribution

Overview

vue-slot-portal

Build Status version mit

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>
      
      <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.
default {{test}}
">
// 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

You might also like...
Vue.js 2.x plugin that helps to use id-related attributes with no side-effect

VueUniqIds A Vue.js plugin that helps to use id-related attributes with no side-effect It is a trend to use components. Components are cool, they are

A Vue.js plugin that affixes an element on the window while scrolling based on a relative element

Affixes an element on the screen based on a relative element Unlike other plugins, this Vue 2 component will make it easy to affix any element while s

A Vue.js browser-update plugin
A Vue.js browser-update plugin

x-browser-update A Vue.js browser-update plugin. Example # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev Usa

Barcode Scanner Plugin for Vue.js

Vue Barcode Scanner Barcode Scanner Plugin for Vue.js Features Usually in the market have a lot of barcode scanner. So we need to handle a lot of thin

A plugin for formatting currency for different countries in Vue

v-currency A plugin for formatting currency in Vue.js Usage Vue.use(Currency, { "type": "USD", "thousandSeparator": true, }); In order to use i

Vue event bus plugin listening for online/offline changes
Vue event bus plugin listening for online/offline changes

vue-connection-listener Vue event bus plugin listening for online/offline changes About Whenever the navigator's connection status changes a 'connecti

Vue plugin for KaTeX

vue-katex KaTeX enables fast math typesetting for the web. vue-katex is a lightweight plugin introduces a simple way to use KaTeX in your Vue app. Enj

A simple Barrage plugin Base on Vue.js.  | 基于Vue.js弹幕插件.
A simple Barrage plugin Base on Vue.js. | 基于Vue.js弹幕插件.

Barrage plugin for Vue.js. Overview • Overview • Demo • Installation • Usage • Plug Options • Roadmap Introduction Baberrage is one of the popular com

Vue plugin to match the height of elements

vue-match-heights Quick and easy method of setting element heights to be the same. You can provide an array of selectors that will be calculated in se

Owner
An Yan
An Yan
Simple portal vue cli plugin, done by rewriting vue files

vue-cli-plugin-portal Simple portal vue cli plugin, done by rewriting vue files Installation: vue add vue-cli-plugin-portal Or through vue ui, search

jarek 0 Mar 30, 2020
💍 Pick out specific elements from the component slot

?? Pick out specific elements from the component <slot>

hiroki osame 11 Mar 31, 2022
Vue.js components for consistent navigation and branding across Creative Commons web properties

cc-global-components Vue.js components for consistent navigation and branding across Creative Commons web properties Status Development: This project

Creative Commons 5 Sep 14, 2022
Portal Component for Vue 2

Portal Component for Vue 2

Roy van Kaathoven 0 Dec 31, 2016
Event portal for associations that enables an information flow to the members and to simplify the member and event management

EventPortal Event portal for associations that enables an information flow to the members and to simplify the member and event management. Starting Vu

Mathilda 2 Feb 21, 2022
Singlepage.js is a pure Javascript portal platform for building modular Web applications

Singlepage.js is a pure Javascript portal platform for building modular Web applications.

Padmanabh Dabke 0 Jan 22, 2021
A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive.

vue-model-autoset A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive. Imagine a huge form w

Konstantin 18 Jul 30, 2020
💬 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid

Vue.js Comment Grid Table of Contents Introduction Installation Downloading Plugin Dependencies Include Plugin Creating Firebase Project Setting Up Si

Tugay Yaldız 156 Sep 30, 2022
Vue3 plugin for work with local storage and session storage from Vue context,Inspired by Vue-ls

Vue3 plugin for work with local storage and session storage from Vue context,Inspired by Vue-ls

aesoper 15 Aug 10, 2022
🍪 👮 Hackable EU Cookie Law Plugin for Vue.js

?? ?? Vue Cookie Law EU Cookie Law Plugin for Vue.js ?? Demo ?? Install yarn add vue-cookie-law ?? Usage <template> <footer> <cookie-law theme="

Jakub 372 Oct 3, 2022