Distribute cms-components as nuxt layer?

[niklaswolf]

It seems like the nuxt 3 layers feature could be really cool to use with the CMS-components? https://nuxt.com/docs/getting-started/layers
It seems like this could be a good usecase, since it is explicitely mentioned:

Create a component library using components/ directory

which is basically what the CMS components are :)

Right now the components are all bundled in the composables-next package which is bundled into the main bundle of the app.
I can imagine that using the layers-feature the components could then end up lazy loaded? But I'm not sure about this.

[elkmod]

Sounds like a nice idea. Our intention is to keep the cms-base package standalone to the point that it's not only available for Nuxt projects, but also for plain Vue.js projects. If that allows us to keep the intention, I'd strongly advocate for the solution @niklaswolf proposed.

\cc @patzick @mkucmus

[patzick]

Hey @niklaswolf
CMS components provided by us are placed inside cms-base package, not to confuse it with composables-next as they contain actual components.

We're doing exactly that, but not via layers but via the Nuxt module.

1. We're registering all components to auto-import functionallity by adding the cms nuxt module - https://github.com/shopware/frontends/blob/main/templates/vue-demo-store/nuxt.config.ts#L25
2. Components are available to use in the app
3. You can create your own version of any of these components (or all of them and remove this module) simply by creating the same component inside your components directory.

And they are (and need to be all) in the final bundle because CMS content is generic and you don't know which of these components will be actually used during page render. Of course, they are lazy loaded so the actual size of the final page render is not having all of them and only needed components are used.

Additionally, as @elkmod also mentioned - with CMS, composables and other packages we're aiming to allow them to work not only inside Nuxt. Either way, the end result is exactly the same.

Let me know if you have more thoughts on that!

[niklaswolf]

CMS components provided by us are placed inside cms-base package, not to confuse it with composables-next as they contain actual components.

You're right, my bad, I just hovered over the composable-next and did not pay attention to the actual file paths. The screenshot attached in the first post shows this.
I wonder why they show up there still: it seems to me, that all the components listed there are also part of the "main/root" bundle, as the composables-next package I hovered is also part of this.

Of course, they are lazy loaded so the actual size of the final page render is not having all of them and only needed components are used.

So are you really sure about this?

[patzick]

Yes, I am very much sure. But good not to believe just words :)
Let's look at our demo page (https://frontends-demo.vercel.app/) you can filter CMS components and see which are really used in that view, in our case:

So only 24 are used, others are just waiting ready to be used.

And that's the reason they all need to be in the bundle - dynamic lazy loading on the final render decides what's needed.