How to enable feature flag for Vue Devtools

[bpedrasa]

Hello Ionic community

I am seeking advice on the correct way to enable the Vue bundler build feature flags. The goal is to enable Vue Devtools in our release environment.

From the Vue README:

Bundler Build Feature Flags

Starting with 3.0.0-rc.3, esm-bundler builds now exposes global feature flags that can be overwritten at compile time:

• __VUE_OPTIONS_API__ (enable/disable Options API support, default: true)
• __VUE_PROD_DEVTOOLS__ (enable/disable devtools support in production, default: false)

The build will work without configuring these flags, however it is strongly recommended to properly configure them in order to get proper tree-shaking in the final bundle. To configure these flags:

• webpack: use DefinePlugin
• Rollup: use @rollup/plugin-replace
• Vite: configured by default, but can be overwritten using the define option

Note: the replacement value must be boolean literals and cannot be strings, otherwise the bundler/minifier will not be able to properly evaluate the conditions.

To enable the Vue Devtools in release, I attempted to set the __VUE_PROD_DEVTOOLS__ flag in vue.config.js like so:

const webpack = require('webpack')

module.exports = {
  // other contents of config truncated for clarity
  configureWebpack: () => {
    return {
      plugins: [
        new webpack.DefinePlugin({
          __VUE_PROD_DEVTOOLS__: ['local', 'release'].includes(process.env.VUE_APP_STAGE)
        })
      ]
    }
  }
}

However, the Vue Devtools is not working in our release environment, as we can see this message from the Chrome browser extension:

Vue.js is detected on this page.
Devtools inspection is not available because it’s in production mode or explicitly disabled by the author.

We also receive this warning in the console on building the app:

Notes:

• We are using Ionic Vue for a web app and are using Vercel to deploy.
• VUE_APP_STAGE is an environment variable that we set to 'local', 'release', 'staging', or 'production'. So in our release environment, ['local', 'release'].includes(process.env.VUE_APP_STAGE) evaluates to the boolean literal true.
• Node version: 16.18
• vue version: 3.2.21
• @ionic/vue version: 6.0.0
• @ionic/cli version: 6.20.3

Please advise if you see something I might be missing. To recap, the goal is to 1) enable Vue Devtools in our release environment, and 2) resolve the above warning. If there is any other information I can provide that may be helpful, do let me know.

Thank you!