N
Nuxt•3mo ago
Wicker

Get the list of modules on runtime

This is going to be a newbie question, but is it possible ( from client or server side) to get the list of used modules ( from inside nuxtConfig )? I think i know the answer that it's only available during build time. I tried in server using useRuntimeConfig() tried useNuxtApp() in client side Both to no avail. Is there an alternative?
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Wicker. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're correct in your assumption that the list of modules from nuxtConfig is typically only available during build time. The runtime configuration and app context don't directly expose this information. However, I can suggest a couple of alternatives that might help you achieve what you're looking for: 1. Custom Runtime Config: You could create a custom runtime config entry that includes the list of modules you want to access at runtime. Here's how you might do this: 
   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: ['@nuxtjs/axios', '@pinia/nuxt'],
     runtimeConfig: {
       public: {
         usedModules: ['@nuxtjs/axios', '@pinia/nuxt']
       }
     }
   })
   
   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: ['@nuxtjs/axios', '@pinia/nuxt'],
     runtimeConfig: {
       public: {
         usedModules: ['@nuxtjs/axios', '@pinia/nuxt']
       }
     }
   })
Then, you can access this list at runtime using useRuntimeConfig(): 
   const config = useRuntimeConfig()
   console.log(config.public.usedModules)
   
   const config = useRuntimeConfig()
   console.log(config.public.usedModules)
This approach is described in the Runtime Config documentation (https://nuxt.com/docs/guide/going-further/runtime-config#reading). 2. App Config: Alternatively, you could use the app.config.ts file to store this information: 
   // app.config.ts
   export default defineAppConfig({
     usedModules: ['@nuxtjs/axios', '@pinia/nuxt']
   })
   
   // app.config.ts
   export default defineAppConfig({
     usedModules: ['@nuxtjs/axios', '@pinia/nuxt']
   })
You can then access this using the useAppConfig() composable: 
   const appConfig = useAppConfig()
   console.log(appConfig.usedModules)
   
   const appConfig = useAppConfig()
   console.log(appConfig.usedModules)
This method is described in the App Configuration documentation (https://nuxt.com/docs/getting-started/configuration#app-configuration). Both of these methods require you to manually maintain the list of modules, but they allow you to access the information at runtime on both the client and server sides. It's important to note that these approaches don't dynamically detect the modules used; they simply allow you to manually specify a list that you can access at runtime. The actual module resolution and loading still happen during the build process. Remember that the build context and runtime context in Nuxt are separate, as explained in the Runtime Context vs. Build Context documentation (https://nuxt.com/docs/guide/going-further/internals#runtime-context-vs-build-context). This separation is why the module list isn't directly available at runtime. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@142400234444685312> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?