New VUE component based off of Q-Tabs

[mtn090899]

Hi!

So I am trying to make a new VUE component utilizing the Q-Tabs component as a basis. Although I am having trouble actually producing a with the new component without directly writing it within the component. How can I make this new component so that I can simply write within much like how Quasar has it normally.

I hope this questions makes sense, I will clarify for any confusion. Below I have posted the component I have so far.

`<template>
    <q-tabs>
        <q-tab
        :icon="icon"
        :style="styleComputed"
        :size="size"
        :label ="label"
        ></q-tab>
    </q-tabs>
</template>

<script>

    const colorMap = {
        blue_50: "blue-50",
        blue_300: "blue-300",
        blue_500: "blue-500"
    }

    const sizeMap = {
        large: "width: 200px",
        small: "width: 100px"
    }

    export default {
        props: {
            label: {
                type: String,
                default: 'Default'
            },
            icon: {
                type: String,
                default: ''
            },

            size: {
                type: String,
                default: "large"
            }
        },
        computed: {
            styleComputed() {
                return [this.sizeClass]
                
            },
            sizeClass() {
                const res = sizeMap[this.size];
                return res ? res : sizeMap['large'];
            }
        
        }
    }
</script>`

[Dirk-]

I'd suggest to put the template and script code into a file called MyTabs.vue or similar and then use it in your other Quasar files like

<template>
  <my-tabs>
  </my-tabs>
</template>

<script>
export default {
  ...
  components: {
    'my-tabs': require('componentspath/MyTabs.vue').default
  }
}
</script>

[mtn090899]

I know, that is what I'm doing. It's just that if I make a new component, lets say 'my-tabs', within the component I would need to list 'my-tab' to have the actual tabs of the component. However what I found was that unless I listed the tabs and their specifications before hand inside of the component, I couldn't produce any tabs on a page.

For example, I made a component with a template of just
`<template> <q-tabs> </q-tabs> </template> and named it MyTabs

In a test page, if I were to use this component, I could not simply use:

<my-tabs>
   <q-tab></q-tab>
</my-tabs>

However, if I made the component with a specified q-tab within, it would then show up:

`<template>
    <q-tabs>
        <q-tab
        :icon="icon"
        :style="styleComputed"
        :size="size"
        :label ="label"
        ></q-tab>
    </q-tabs>
</template>```

However, its not applicable having a tabs component that only has a fixed amount of tabs with fixed properties. I just want to figure out a way that I could have it so that I can write tabs in my facetious  "my-tabs" component in a page rather than having to change the component itself each time I just want to add a tab. 

[Dirk-]

Okay, now I understand. I have never tried this, so I don't know.

[metalsadman]

make an invisible wrapper.

<!-- wrapper -->
<template>
  <q-tabs>
    <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
      <slot :name="slot", v-bind="scope || {}"/>
    </template>
  </q-tabs>
<template>
<!-- parent -->
<template>
  <wrapper>
    <q-tab></q-tab>
  </wrapper>
<template>