Nuxt•6d ago

Can I serve my nuxt layer independently

I have a main app and multiple nuxt layers. I need to provide one of the layers as a standalone app as well. There's a common UI components layer that is used by all layers and the main app. Would this be possible? Thank you

14 Replies

kapa.ai•6d ago

Hi @Tirtho. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Short answer: not directly, but you can reuse the code in ways that achieve something similar. From the available sources: - Nuxt Layers are meant to be extended by a Nuxt app; they’re not described as independently runnable units. The normal pattern is: main app extends one or more layers, possibly overriding files in them, not starting a layer by itself.[Layers video] - You can extend multiple layers (e.g. a shared UI layer + feature layers + main app), and Nuxt will merge them; but there’s no documented mechanism to “boot” a layer directly without having a small wrapper app that extends it.[Layers video] - Named layer aliases (#layers/...) and auto‑scanned layers are for importing/organizing code, not for serving a layer on its own.[Named aliases] What is possible (based on sources): 1. Have a small standalone Nuxt app that extends the layer
Create a separate Nuxt project whose nuxt.config just does:

   export default defineNuxtConfig({
     extends: [
       '../path-to-your-layer',
     ],
   })

   export default defineNuxtConfig({
     extends: [
       '../path-to-your-layer',
     ],
   })

and run/deploy that as its own app, while your main app also extends the same layer.[Layers video] 2. Publish shared UI as plain Vue components
If what you really want is to reuse the UI without Nuxt, you can publish the components/ (and optionally layouts/) folders directly to npm so that both Nuxt and non‑Nuxt Vue apps can import them as normal Vue SFCs.[Publish components] The knowledge sources do not show a way to “serve a layer itself” without wrapping it in a Nuxt app, so for now you’d need that thin wrapper project (or publish the shared UI as a component library) to achieve your goal. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@1430812111118012417> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TirthoOP•6d ago

Okay, @kapa.ai if I go with pt1, can I run a standalone app with a separate repository that extends my layer from a bitbucket repository?

kapa.ai•6d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can have a separate Nuxt app (even in a different repo) that extends a layer stored in another Git repository, as long as Nuxt can resolve that layer on disk at install time. Nuxt’s extends works with any layer that is available as a dependency (local path, workspace, or installed package). The docs and examples show layers living in local folders or being shared as packages, not tied to a specific Git host. [Layers video] To do this with Bitbucket: 1. Publish the layer as an installable package
- Either to a registry (npm/private registry), or - Use a git URL in package.json pointing to your Bitbucket repo (e.g. git+ssh://...), so that npm/pnpm/yarn checks it out into node_modules. 2. In the standalone app repo
- Add the layer as a dependency in package.json. - In nuxt.config.ts of the standalone app:

     export default defineNuxtConfig({
       extends: [
         '@your-scope/your-layer', // or the package name coming from Bitbucket
       ],
     })

     export default defineNuxtConfig({
       extends: [
         '@your-scope/your-layer', // or the package name coming from Bitbucket
       ],
     })

3. Shared UI layer
Your shared UI components layer can be one of those dependencies, and both the main app and the standalone app can extends it the same way. [Layers video] The knowledge sources don’t explicitly mention Bitbucket or git URLs, but they do show that layers are just Nuxt projects that can be extended from outside paths or packages, and that code sharing via npm packages is a supported pattern. [Publish components] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@1430812111118012417> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TirthoOP•6d ago

@kapa.ai will it work even if my repo contains the entire app with multiple layers? In that case can you give me an example url where I'm targeting a layer within another repo?

kapa.ai•6d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Nuxt’s docs/sources don’t show an example of extending a subfolder inside a Git repo directly via extends, so I can’t confirm that pattern as supported from the available information. What is documented and clearly supported is: 1. Layers as full Nuxt projects
A layer is just a Nuxt project (with its own nuxt.config), which another app can extend. [Layers video] 2. Sharing layers via packages
Code sharing is done by publishing parts of a Nuxt project (e.g. components/, layouts/) to npm and then importing them from other projects. [Publish components]
Recent work also introduced utilities for modules to discover layer directories, but this is for module authors, not for extending arbitrary subfolders over Git. [Layer directories util] Given that: - If your Bitbucket repo contains an entire app with multiple layers, Nuxt’s documented approach is that each layer is its own Nuxt project / package, and consuming apps extend those layers (typically via package names or local paths). [Layers video] - The sources do not provide an example URL like
git+ssh://bitbucket.org/your-org/your-repo.git#path:layers/your-layer
or confirm such a pattern for extends, so I can’t give a reliable, concrete Git URL example that targets a subdirectory as a layer. To be strictly within the docs/sources: - You can: - Extract the layer into its own package (possibly still in the same monorepo), publish it (or reference it via Git), and then extends: ['@your-scope/your-layer'] in your standalone app. [Publish components; Layers video] - The knowledge sources do not document extending a nested folder from a Git repo directly, so any exact Bitbucket URL example for that would be speculative. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@1430812111118012417> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TirthoOP•6d ago

@kapa.ai For serving the layer independently, if I just build the app using npm run generate and serve the index.html from the specific layer will it work?

kapa.ai•6d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Probably not in the way you expect, and it’s not how layers are meant to be used. From the sources: - A Nuxt app that you nuxt generate (SSG) needs to be served via a (static) web server. Opening or serving a single index.html in isolation (e.g. directly from the filesystem) is not a supported way to run a Nuxt app; things like routing and assets break. [Static serve; Build vs generate video] - The recommended flow is: nuxt generate → serve the whole .output/public directory via a static server (npx serve .output/public, nginx, Apache, etc.). [Static serve; Build vs generate video] A “layer” is a code source that another Nuxt app extends; it’s not described as an independently generated subtree whose index.html you can just pluck out and serve on its own. [Layers video] So, based on the available info: - If you want to serve the layer as its own app, you’d create a small Nuxt app that extends that layer, run nuxt generate for that app, and then serve the resulting .output/public for that app as a whole. - Simply taking “the index.html from the specific layer” and serving it alone is not documented and is very likely to break routing and assets, just like opening a generated index.html directly from disk. [Static serve] The knowledge sources don’t show any supported pattern where a single layer’s generated index is served independently from the rest of its generated output. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@1430812111118012417> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

TirthoOP•6d ago

@kapa.ai I dont use SSG (ssr is disabled), considering all assets and css files are available, will this work if I serve the index.html as entrypoint?

kapa.ai•6d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- No, that isn’t a supported / reliable way to run a Nuxt app, even with ssr: false. From the sources: - Opening or using a generated index.html directly (e.g. double‑clicking it from the filesystem) breaks navigation and other functionality, even though all assets and CSS are present. A small server is still required to “properly manage the whole state part.” [Static from file] - The recommended approach is always to serve the entire output directory (e.g. .output/public for SSG, or the built SPA assets) via a web server like npx serve, not just a single HTML file. [Static from file] The sources do not describe any mode (including ssr: false) where you can reliably run a Nuxt app by serving only an index.html as the entry point without a proper static server handling the rest of the built output. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@1430812111118012417> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Can I serve my nuxt layer independently

Did you find this page helpful?