Alternative to Lazy* prefix

[pi0]

As mentioned by @dmx374 (#83), using Lazy prefix might be confusing in situations when the component name is prefixed with Lazy for its purpose (LazyLoad, LazySpin, etc).

We cannot use directives since it forces to use a loader and parsing overhead but we can introduce another alias while keeping backward compatibility with Lazy{name}. Some options:

• Async{Name} / async-{name}
• {Name}.lazy / {name}.lazy (suggested by @drewbaker)
• {Name}.async / {name}.async

[pi0]

/cc @nuxt/framework ideas welcome

[clarkdo]

+1 for async for aligning to Vue async component
https://v3.vuejs.org/guide/migration/async-components.html#_3-x-syntax
https://v3.vuejs.org/guide/component-dynamic-async.html#async-components

[pi0]

@clarkdo You mean <Async{Name}> option? It makes sense to be consistent with vue docs.

[clarkdo]

Yes

[drewbaker]

Maybe I’m misunderstand async components, but isn’t there lots of scenarios where a component can be used in different places, sometimes async and sometimes not? So by using the filename as the way to detect if it’s async or not seems like the wrong approach? Or is this the only way?

The Vue guide also recommend tightly coupled components to have related names, like “CarsList” and “CarsListItem”, so by forcing “Async” at the start of the component you’ll be loosing that coupling.

I just suspect people hate being forced to have any word in their component file name, no matter what you pick. That’s why I prefer the modifier Name.async.vue, feel more “nuxt” (like the way plugin file names can have client or server in them).

[pi0]

@drewbaker That's true and you do don't need to prefix your component file name with either Lazy or Async 🙈 It should be called Foo.vue. <LazyFoo> is an alias to tell import Foo.vue as an async component.

[drewbaker]

Oh Ok I’m that case AsyncFoo seems great!

[Bigdragon13th]

@pi0 I come across this issue since I just found out Nuxt having this as default now on new projects setup. And looking in the doc I too thought I have to rename my component Lazy{Name} to make it lazy load, I'm happy it's not the case. Maybe clarify this in doc would help?