Nuxt•2mo ago

Keep devtools enabled after build

Hey so, we have a stage deployment of our app in which we would like the devtools to stay active, how would we achieve that? we are using yarn build

11 Replies

kapa.ai•2mo ago

Hi @Just Simeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To keep Nuxt DevTools enabled after building your application for a staging environment, you can configure this in your nuxt.config.ts file. Here's how you can achieve that:

export default defineNuxtConfig({
  devtools: { enabled: true },
  // ... other configuration options
})

export default defineNuxtConfig({
  devtools: { enabled: true },
  // ... other configuration options
})

By setting devtools: { enabled: true } in your Nuxt configuration, you're explicitly enabling the DevTools as mentioned in the Nuxt documentation (https://nuxt.com/docs/api/nuxt-config#devtools). This setting will keep the DevTools active even after building your application with yarn build. However, it's important to note that you might want to conditionally enable this based on your environment. For example, you could use an environment variable to control this:

export default defineNuxtConfig({
  devtools: { enabled: process.env.ENABLE_DEVTOOLS === 'true' },
  // ... other configuration options
})

export default defineNuxtConfig({
  devtools: { enabled: process.env.ENABLE_DEVTOOLS === 'true' },
  // ... other configuration options
})

This way, you can control whether DevTools are enabled through an environment variable, allowing you to enable it for your staging environment while keeping it disabled for production. Remember that keeping DevTools enabled in any non-development environment might have performance implications and could potentially expose sensitive information. Use this feature cautiously in your staging environment and ensure it's disabled for production deployments. Nuxt DevTools Guide (https://devtools.nuxt.com/guide/getting-started#installation) provides more information on installation and configuration options for DevTools. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Just SimeonOP•2mo ago

@kapa.ai devtools enabled is already true but after the build the devtools disappear

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your concern. Even though you've set devtools: { enabled: true } in your configuration, the DevTools are disappearing after the build. This behavior is actually expected, and I can explain why. According to the Nuxt documentation (https://nuxt.com/docs/api/nuxt-config#devtools), the devtools option is primarily intended for development purposes. The documentation states: "Enable Nuxt DevTools for development." This means that by default, Nuxt DevTools are designed to be active during development but not in production builds, even if you've explicitly enabled them in your configuration. To address your specific situation for a staging environment, you have a couple of options: 1. Use the development server: Instead of building your application with yarn build, you could run your staging environment using the development server with yarn dev. This will keep the DevTools active, but it's not recommended for production-like environments due to performance implications. 2. Use the edge release channel: The Nuxt DevTools edge release channel might offer more flexibility. As mentioned in the Nuxt DevTools documentation (https://devtools.nuxt.com/guide/getting-started#edge-release-channel), you can opt into the edge release by modifying your package.json:

   {
     "devDependencies": {
       "@nuxt/devtools": "npm:@nuxt/devtools-edge@latest"
     }
   }

   {
     "devDependencies": {
       "@nuxt/devtools": "npm:@nuxt/devtools-edge@latest"
     }
   }

After making this change, remove your lockfile and reinstall dependencies. The edge version might behave differently and could potentially work in your built application, but this is not guaranteed. 3. Custom solution: If you absolutely need DevTools in your staging build, you might need to explore custom solutions or wait for future Nuxt updates that might address this use case. Remember, keeping DevTools enabled in non-development environments can have security and performance implications, so it's generally not recommended for production-like environments. If none of these options work for your specific use case, you might want to consider opening an issue on the Nuxt GitHub repository (https://github.com/nuxt/nuxt) to request this feature or discuss alternative approaches with the Nuxt community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Just SimeonOP•2mo ago

Yea that isn't helpful. Ill wait for someone else

bryce•2mo ago

I don’t think devtools will work in a build but i’ll have a look for you

bryce•2mo ago

https://github.com/nuxt/devtools/blob/main/packages/devtools/src/module-main.ts

GitHub

devtools/packages/devtools/src/module-main.ts at main · nuxt/devtools

Unleash Nuxt Developer Experience. Contribute to nuxt/devtools development by creating an account on GitHub.

bryce•2mo ago

It’s explicitly disabled if nuxt isn’t running in dev You could potentially try flip nuxt.options.dev to true but i’m not sure how well that would work You could potentially just have a dev server for your staging deployment but it’s not historically very secure, and has a couple of current security issues

Just SimeonOP•2mo ago

thanks I will try with nuxt.options.dev

manniL•2mo ago

you can't in prod

Gaming

Programming

Keep devtools enabled after build