Conditional lazy-loading with Nuxt.js

Question

Nuxt.js comes with support for component lazy-loading, by prefixing the component name with lazy-. But is there anyway to conditionally lazy-load, short of duplicating the code with v-if/else?

E.g. something like this?

<list :lazy="shouldBeLazyLoaded">
   ...some complex markup
</list>

Currently I do it like this:

<lazy-list v-if="shouldBeLazyLoaded">
   ...some complex markup
</lazy-list>
<list v-else>
   ...some complex markup
<list>

Answer 1

Maybe your could use Vue's dynamic components for this:

<component v-bind:is="shouldBeLazyLoaded ? 'lazy-list' : 'list'">
  ...some complex markup
</component>