Nuxt Layers Unwrapped - Q and A

This is a Q-n-A for my talk Layers Unwrapped at Nuxt Nation 2023.

Q-1

Q: Could layers be used to implement multiple interfaces (separate applications) that use a lot of common code underneath?

Yes, layers can be used to implement multiple interfaces. The demo project discussed in my talk uses /apps directory. /apps directory can have more than one Nuxt app, (i.e. separate applications) that uses the layers coming from the /packages.

If your Nuxt projects & layers are not in the same repo, you can publish common Nuxt Layers (such as theme, UI, auth, data-provider, etc.) as NPM packages. That way you can extend them to other Nuxt projects.

Q-2

Q: Do you know of any examples where this architecture has been used in production?

I have been following this project ever since it was in Nuxt 2. This is an Australian State Government project. They have recently converted the majority of their Nuxt modules into Nuxt Layers. Their framework now uses Nuxt 3 with layered architecture. Nuxt fetches data from the headless CMS and then server-renders multiple websites. These websites are kind of similar (i.e. belong to the same organisation) but for different departments.

This project also answers the first question above. They are creating multiple different websites using - or I should say 'reusing' - the same set of base Nuxt Layers.

Q-3

Q: Are there any drawbacks to the layers architecture?

Barrier to entry for Nuxt Layers is quite low. Anyone who knows basic Nuxt can start creating layers from the get-go. But you and the project team should carefully plan and scope out layer-able parts. Layers may become hard to maintain if they are not well thought out.

Q-4

Q: Do you have any other tips you’d like to share with us about layers?

1. Atomic design principles: You will always have UI and core/base layers in your Nuxt app. I'd recommend to follow the atomic design principles while using layers. I do not mean to say create one layer each for atoms, molecules and organisms. Don't mix atoms and molecules with feature specific layers. That way you always know where to find them. This will help you create and navigate layers more efficiently.
2. App level customisation: Don't forget to leverage app.config to customise Nuxt projects at app level. app.config is layer-able, so you can provide default app settings. And also have the power to override it when needed.
3. Naming convention: Naming convention becomes a critical aspect of your Nuxt application with Layers. All your composable & components are auto-imported even when they come from layers. You may find it difficult to find where the components and composable are coming from when they are auto-imported. So, name your component, composable and plugins carefully, so that they are easy to find. You can also prefix your components in layer's nuxt.config if your layers have two components with the same name.
4. Create Nuxt Project template using base Nuxt Layers: Nuxt Layers provide little to no overhead while creating new Nuxt projects. Because when your base layers are ready to use, you can customise it right away. You can even take this one step further and create Nuxt project template that is pre-extended with core layers.
5. Use layers to declutter larger Nuxt apps: You can group relevant components, composable, layout and pages into their own layer. For example, say you are building an ecommerce app. Checkout layer can hold components & composable for gift message, shipping, billing and payment. Checkout layer can also include Checkout pages that use the unique Nuxt layout.
6. Examples by Nuxt Team: I forgot to mention this in a talk, but do study these two examples of Layers by Nuxt team: Nuxt themes and Content Wind.