[{"data":1,"prerenderedAt":92},["ShallowReactive",2],{"blog-nuxt-layers-and-shared-packages":3},{"id":4,"title":5,"body":6,"date":80,"description":81,"extension":82,"meta":83,"navigation":84,"path":85,"seo":86,"stem":87,"tags":88,"__hash__":91},"blog\u002Fblog\u002Fnuxt-layers-and-shared-packages.md","Nuxt Layers and shared packages: choosing what belongs where",{"type":7,"value":8,"toc":71},"minimark",[9,13,18,21,24,28,31,34,38,41,44,48,51,54,58],[10,11,12],"p",{},"At X Enterprises, my work includes Nuxt Layers and internal npm packages to share logic and components across websites. These tools solve related problems, but the boundary between them deserves an explicit decision.",[14,15,17],"h2",{"id":16},"start-with-what-the-sites-actually-share","Start with what the sites actually share",[10,19,20],{},"Before extracting a shared foundation, list what repeats: application configuration, layout, components, styling, or business logic. Similar-looking pages do not always have the same requirements. A shared implementation is useful when its consumers should evolve together.",[10,22,23],{},"For example, a common navigation layout across a family of sites is a different kind of reuse from a date-formatting utility. The layout depends on the application's conventions; the utility may be useful anywhere.",[14,25,27],{"id":26},"use-a-layer-for-a-shared-nuxt-foundation","Use a layer for a shared Nuxt foundation",[10,29,30],{},"Nuxt Layers let an application extend another Nuxt project. That makes a layer a useful home for shared application configuration and UI conventions. A consuming application can build on that foundation while providing its own content and site-specific behavior.",[10,32,33],{},"Keep the layer's responsibility easy to explain. A layer that contains every exception from every site becomes difficult to change. When two sites need substantially different behavior, consider whether that behavior belongs in each application instead.",[14,35,37],{"id":36},"use-a-package-for-a-defined-reusable-interface","Use a package for a defined reusable interface",[10,39,40],{},"An internal npm package can expose a focused set of utilities, types, or components. The important part is a clear public interface: consumers should know what they can import and which assumptions they must satisfy.",[10,42,43],{},"Layers can also be distributed as packages, so this is not a choice between mutually exclusive delivery methods. The design question is whether the shared code is an application foundation or a focused dependency.",[14,45,47],{"id":46},"make-changes-with-the-consumers-in-view","Make changes with the consumers in view",[10,49,50],{},"For a shared change, identify the sites that consume it and the behavior they depend on. Check representative pages, configuration overrides, and any affected integrations. A build passing in the shared project alone does not establish that every consumer still behaves correctly.",[10,52,53],{},"Write down the reason for the shared boundary. That short explanation is useful when the next feature request arrives: it gives the team a way to decide whether to extend the common code or keep a change local.",[14,55,57],{"id":56},"further-reading","Further reading",[59,60,61],"ul",{},[62,63,64],"li",{},[65,66,70],"a",{"href":67,"rel":68},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002F3.x\u002Fguide\u002Fgoing-further\u002Flayers",[69],"nofollow","Nuxt documentation: Layers",{"title":72,"searchDepth":73,"depth":73,"links":74},"",2,[75,76,77,78,79],{"id":16,"depth":73,"text":17},{"id":26,"depth":73,"text":27},{"id":36,"depth":73,"text":37},{"id":46,"depth":73,"text":47},{"id":56,"depth":73,"text":57},"2026-09-27","A practical guide to separating shared Nuxt application structure from reusable package logic, informed by multi-site development work.","md",{},true,"\u002Fblog\u002Fnuxt-layers-and-shared-packages",{"title":5,"description":81},"blog\u002Fnuxt-layers-and-shared-packages",[89,90],"nuxt","architecture","hP0nqAmUpuERA0NDa8Z9fI3Y0EtY0LZDslFAxtSdOVw",1791287285650]