Lazy loaded Component shouldn't be prefixed with Lazy

[dmx974]

Dynamically (lazy loaded) components shouldn't be prefixed with Lazy. It adds confusion and can become dirty pretty quickly (especially I have a bunch of custom components in an other project with names already beginning with Lazy, like LazyLoad, LazySpin etc.)

So, instead of this:

<template>
  <LazyComponentFoo v-if="foo" />
  <button @click="foo=true">Load Foo</button>
</template>

you should use an explicit attribute (like defer, or lazy, IDN), maybe like this:

<template>
  <ComponentFoo defer v-if="foo" />
  <button @click="foo=true">Load Foo</button>
</template>

[judehunter]

yeah, I also felt it was a weird design choice.
adding an attribute/directive would be much better

[papertokyo]

Agree. An attribute/directive would fit in better not just with Vue's API but html itself. Like how you have attributes like async, defer, and preload on script and link tags.

[drewbaker]

Agree!

[pi0]

Supporting attribute requires having a loader that is not always working (global components and development mode). Still, you have a better prefix suggestion, which is more than welcome. We can easily add as an alias to plugin

[drewbaker]

Ok, if no directive, is it weird to do something like:

MyComponentName.lazy.vue

<my-component-name.lazy>

But the directive approach was better for sure as it allowed you to opt into lazy loading for that use of the component, rather than always lazy loading it always.

[pi0]

Nice idea @drewbaker! I've created #180 to check different options we could have for naming