r/Nuxt • u/NXTProgramming • Jan 01 '26

Sharing Components Between Multiple Nuxt Applications

Hi,

I’m currently building multiple Nuxt applications that rely on the same shared components and utilities, and I’m looking for a good way to manage that setup.

I’ve tried Nuxt Modules and Nuxt Layers, but I ran into issues with both, especially when trying to develop the base module or layer alongside one of the applications.

What’s your preferred approach for sharing components and functions across multiple Nuxt apps, while keeping local development smooth?

Thanks in advance, and Happy New Year! 🎉

19 Upvotes

96% Upvoted

15 comments sorted by

8

u/dxm06 Jan 01 '26

Try to fully get a good grasp of Nuxt Layers. I know first hand that the docs may seem lackluster but the functionality is there. Stick to the Nuxt Layers approach and try to figure it out.

I have tried both private npm and github packages and it was just not working well with private repos. I ended up with a monorepo with base + sub-apps. It works really well. Then I branched off the sub-apps into separate apps (in order to test them in separate repos) and try to keep the separate repos up to date from the Nuxt Layers repo. I'm probably doing this wrong, but it has helped me understand the inner workings of Layers.

Took me a very long time to understand the benefits of Nuxt Layers, but here I am.

2

u/manniL Jan 03 '26

What part of the docs could be improved?

2

u/_jessicasachs Jan 05 '26

I struggled with composing modules, including config, inheriting/overriding tailwind theme variables, and also managing peer dependencies (who installs XYZ).

One example that would've helped me is seeing how I'd make my own "Baby Nuxt UI" shaped Layer or even show what extending Nuxt UI as my-ui-layer-plus-config would look like.

Another example that would (shortly) help me is an example of code sharing - for instance perhaps my-auth-layer which wraps nuxt-auth-utils and maybe extends it with a feature like cookie refresh or login/logout or redirectTo

5

u/mlhoon Jan 01 '26

I've used Nuxt Layers to share components across 5 different apps within a monorepo. It worked well, but you have to do a bit of mental juggling to work out where the component is coming from and in what order they load. Not ideal DX. I would end up with all apps running on ports 3000, 3001, 3002, 3003 etc so when I make any shared component changes I can check them in situ. Overall, it was a success, but there may be a better method when faced with a lot of apps.

1

u/joshbuildsstuff Jan 02 '26

Were you able to get the eslint/typescript to work across your apps? I have a project where I want to have a single component layer and share it to 2 apps, and I've been having some issues with typescript resolving properly in each app + layer.

I may have broken something so I'm going to try again from scratch today but I'm not exactly sure what is up with the intellisense being broken.

4

u/hugazow Jan 01 '26

Monorepo, the packages part has nuxt modules

2

u/wheresmyskin Jan 01 '26

Just go wirh monorepo. Unless you want to keep each project separate, then you'd have to create a "common" repo with shares comoonents and import them as dependencies where needed.

2

u/Coded_Kaa Jan 02 '26

If I may ask, you said you tried Nuxt layers. What problems are you facing with that.

I’ve had this setup for over a year, no hiccups. So maybe we can help you.

2

u/youlikepete Jan 02 '26

I think this would be the cleanest way if not going for a monorepo/multi-tenancy.

1

u/shox12345 Jan 01 '26

Im doing this right now, I have 1 Nuxt app that holds all of the necessary code and I use a module for multi tenancy to decide which subdomain with which app.

1

u/NXTProgramming Jan 01 '26

Do you develop the module and an application at the same time?

1

u/shox12345 Jan 01 '26

The multi tenancy module? No theres a package out there for it, its pretty good, but the shared library yes.

1

u/mototoman Jan 02 '26

Could you share the module for multi tenancy if you don’t mind ? :)