vue-lazy-components-option

vue-lazy-components-option

Provide lazyComponents option for Vue components

Usage

Install it by npm:

$ npm install vue-lazy-components-option

Then you initialize it with Vue constructor:

import Vue from 'vue'
import LazyComponents from 'vue-lazy-components-option'

Vue.use(LazyComponents)

lazyComponents option can be used for your components:

<script>
import Foo from './Foo.vue'
import Bar from './Bar.vue'

export default {
  lazyComponents: () => ({
    Foo,
    Bar
  })
}
</script>

Mixin Usage

You also can partially enable lazyComponents option in a specific component by using a mixin. In this usage, you do not have to register this library globally with Vue.use:

<script>
import { lazyComponentsMixin } from 'vue-lazy-components-option'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

export default {
  mixins: [lazyComponentsMixin],

  lazyComponents: () => ({
    Foo,
    Bar
  })
}
</script>

What is it for?

This small library is meant to be used for dealing with circular dependency among your components.

To avoid that, you can assign your component in beforeCreated hook like Vue.js official docs stated. But it easily bloats your code when the components are increased.

lazyComponents option does the same thing under the hood but its syntax is simpler as it is almost the same interface with components option except that it is a function returning components.

License

MIT