Vue

recursive-slots.vue

<template>
  <!-- https://forum.vuejs.org/t/recursive-scoped-slots/8220/6?u=michaelgitart -->
  <wrapper>
    <b-table v-bind="$attrs" v-on="$listeners">

      <!-- Pass on all named slots -->
      <slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot"/>

      <!-- Pass on all scoped slots -->
      <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope"><slot :name="slot" v-bind="scope"/></template>

    </b-table>
  </wrapper>
</template>

slots.vue

<template>
  <!-- https://dev.to/kouts/create-wrapper-components-for-vuetify-components-2aah -->
  <ParentComponent>

    <template v-for="(_, scopedSlotName) in $scopedSlots" #[scopedSlotName]="slotData">
      <slot :name="scopedSlotName" v-bind="slotData" />
    </template>
    <template v-for="(_, slotName) in $slots" #[slotName]>
      <slot :name="slotName" />
    </template>

  </ParentComponent>
</template>

vue-breakpoint-plugin.js

export default {
  install(Vue) {
    console.log('install!');

    const points = {
      xl: 1199,
      lg: 991,
      md: 767,
      sm: 575,
      xs: 419,
      xxs: 359,
    };

    const breakpoints = Vue.observable({
      xl: null,
      lg: null,
      md: null,
      sm: null,
      xs: null,
      xxs: null,
    });

    const breakpointsMedia = {
      xl: 'only screen and (max-width: ' + points.xl + 'px)',
      lg: 'only screen and (max-width: ' + points.lg + 'px)',
      md: 'only screen and (max-width: ' + points.md + 'px)',
      sm: 'only screen and (max-width: ' + points.sm + 'px)',
      xs: 'only screen and (max-width: ' + points.xs + 'px)',
      xxs: 'only screen and (max-width: ' + points.xxs + 'px)',
    };

    const listener = {};
    for (const key in breakpoints) {
      const locKey = key;
      listener[key] = function (q) {
        breakpoints[locKey] = q.matches;
      };

      const media = window.matchMedia(breakpointsMedia[key]);
      media.addListener(listener[key]);
      listener[key](media);
    }
    Vue.mixin({
      beforeCreate() {
        this.$breakpoints = breakpoints;
      },
    });
  },
};