Import multiple lazy-loaded vue component children into Parent

Question

I have many components that use the same children components. I am trying to save myself some time and code by importing all of the components in a .js file, Similar to using mixins in vue. and then import that file into the parent component. Unfortunately the parent component does not recognize these imported components. Seems like a simple ask but having trouble implementing it.

When I log Children in the parent I get a components object with the two vue components I am just not sure how to utilize it in the parent component. I would import them globally however not every component need them so it wouldn't be very efficient.

I also feel like I am importing Components twice into the parent but again am unsure of how to accomplish this so though I would post what I have so far.

thanks for your help

**Children**

    export default {
      components: {
        Popover: () => import('@/components/inline-components/popover'),
        Button: () => import('@/components/inline-components/button')
      }
    }


**Parent**

<template>
<Button>I am the Button</Button>
</template>

import Children from 'utilities/children'

export default {
    components: {
        Children
    }
}

What if you used Children as a mixin. Like mixins: [Children]? — Husam Ibrahim
Haha oh wow that worked thank you, right infront of me the whole time.Thanks! — bilcker

bilcker bilcker · Accepted Answer · 2019-11-07T16:35:57

Posting the answer from Husam Ibrahim comment.

**Children**

    export default {
      components: {
        Popover: () => import('@/components/inline-components/popover'),
        Button: () => import('@/components/inline-components/button')
      }
    }


**Parent**

<template>
<Button>I am the Button</Button>
</template>

import Children from 'utilities/children'

export default {
    // Add them as mixins instead of components
    mixins: [Children]
}

Import multiple lazy-loaded vue component children into Parent

1 Answers