nuxt/fonts does not honour the nuxt baseUrl setting

[dgtrapeze]

When I set the nuxt baseURL (I set it at run time via the NUXT_APP_BASE_URL env var), nuxt/fonts can no longer access its cached fonts.

It appears that it always sets the font url to start with /_fonts no matter what, rather than /_fonts. While I didn't try I assume cdnURL will also not work with nuxt fonts.

While I need to set the NUXT_APP_BASE_URL at runtime, as a test I tried rebuilding the app with the fonts.assets.prefix setting hard coded to /prefix/_fonts and running it with NUXT_APP_BASE_URL=/prefix/, but fonts.assets.prefix changed the path of the fonts within the public directory, not the URL through which the fonts are accessed.

Is there any way to use nuxt fonts with a baseUrl set to anything but '/'?

[dosubot]

To address the issue where nuxt/fonts does not honor the NUXT_APP_BASE_URL setting, you can modify the way assetsBaseURL is set to include this environment variable. Here's a suggested code adjustment:

const assetsBaseURL = process.env.NUXT_APP_BASE_URL ? joinURL(process.env.NUXT_APP_BASE_URL, options.prefix || '/_fonts') : (options.prefix || '/_fonts');

This code checks if NUXT_APP_BASE_URL is set and uses it as the base URL, appending /_fonts or the custom prefix defined in options.prefix. If NUXT_APP_BASE_URL is not set, it defaults to the original behavior.

Ensure that NUXT_APP_BASE_URL is correctly set in your environment, which can be done in a .env file at the root of your project or through other environment variable management practices used in your deployment setup.

This solution is designed to prepend the NUXT_APP_BASE_URL to the font URLs to correct the path issues you're experiencing. If your setup requires a more complex URL transformation, you might need to adjust the logic accordingly.

Regarding the cdnURL setting and its interaction with nuxt/fonts, the module handles this setting through its asset handling strategy, ensuring that fonts can be served from external sources, including CDNs, with considerations for both development and production environments. The handling of the cdnURL is implicitly managed through the processing of font source URLs, adjusting them based on the environment and ensuring they are served correctly relative to the Nuxt application's base URL.

This approach should help you use nuxt/fonts with a baseUrl set to something other than '/', addressing the core issue you've encountered.

Details

Sources

• Nuxt baseURL ignored when resolving cached font path
• src/assets.ts
• src/module.ts
• playground/package.json
• package.json

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.