N
Nuxt•4w ago
derHodrig

Pass Remote Layer Assets to App

I have a Layer as an npm package with assets like icons, fonts and css. Is it possible to pass those assets to the app?
2 Replies
kapa.ai
kapa.ai•4w ago
Hi @derHodrig. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is possible for a Nuxt app to use assets (such as icons, fonts, and CSS) provided by a remote layer published as an npm package, but there are some important considerations and best practices: 1. CSS and Stylesheets:
If your layer includes CSS files, you should ensure they are referenced in the layer’s nuxt.config.ts using the css property. When the app extends this layer, the styles will be injected globally and available in all pages. For example: 
   // In your layer's nuxt.config.ts
   export default defineNuxtConfig({
     css: ['~/assets/css/main.css']
   })
   
   // In your layer's nuxt.config.ts
   export default defineNuxtConfig({
     css: ['~/assets/css/main.css']
   })
This will make the CSS available to the app that extends the layer, as long as the path resolves correctly. Note that when using aliases like ~/, they resolve relative to the app, not the layer. To avoid path issues, use absolute paths or resolve them programmatically as shown in the docs: 
   import { fileURLToPath } from 'url'
   import { dirname, join } from 'path'

   const currentDir = dirname(fileURLToPath(import.meta.url))

   export default defineNuxtConfig({
     css: [
       join(currentDir, './assets/main.css')
     ]
   })
   
   import { fileURLToPath } from 'url'
   import { dirname, join } from 'path'

   const currentDir = dirname(fileURLToPath(import.meta.url))

   export default defineNuxtConfig({
     css: [
       join(currentDir, './assets/main.css')
     ]
   })
Relative Paths and Aliases 2. Fonts and Static Assets:
For assets like fonts or images, if you want them to be served as static files, place them in a public/ directory within your layer. However, when using a remote layer (npm package), these files must be exposed to the app’s public directory. The knowledge sources do not explicitly state that assets in a layer’s public/ directory are automatically merged into the app’s public/ directory. If you need to expose such assets, you may need to provide instructions for the consuming app to copy or reference them, or use a Nuxt module to inject them via Nitro’s publicAssets option Injecting Other Assets. 3. Icons:
If you are using SVG icons or icon sets, you can provide them in the layer’s assets and configure the consuming app to use them, for example, by setting up custom icon collections in the app’s nuxt.config.ts as shown in the Nuxt UI documentation. The app will need to reference the correct directory or package path Iconify Dataset. 4. General Layer Asset Availability:
When you publish a layer as an npm package, make sure all necessary files (CSS, fonts, icons, etc.) are included in the package and referenced correctly in the layer’s configuration. The consuming app will have access to these assets as long as they are properly exposed and referenced. Summary:
- CSS and processed assets referenced in the layer’s nuxt.config.ts will be available to the app. - Static assets (fonts, images) may require additional steps to be served correctly. - Use absolute or resolved paths in your layer’s config to avoid path issues. - For advanced asset injection, consider using a Nuxt module to expose assets via Nitro. If you have a specific asset type or setup in mind, please provide more details for a more targeted answer. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@165903212539412480> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?