Config options for Vue 3

[fredrivett]

What problem does this feature solve?

In Vue 2, we were able to set the config options on the global Vue object, like so:

// STAGE === "staging"
Vue.config.devtools = STAGE !== "prod"; // sets true

With Vue 3, we use this setup:

const app = Vue.createApp({})
app.config = {...}

app.config here doesn't expose a devtools options as Vue.config did, I've tried digging around and asked about this on the forums but it doesn't seem to be implemented yet.

What does the proposed API look like?

// STAGE === "staging"
const app = Vue.createApp({})
app.config.devtools = STAGE !== "prod"; // sets true

[m4heshd]

Lack of proper documentation for minor things like this is unbearable. I'm looking for this for hours now.

[fredrivett]

It's totally fair enough that a work in progress new version doesn't have full coverage in documentation. Hopefully the folks working on Vue who I'm very thankful for can keep up the good work and get to this in the not too distant future.

I get the frustration but this is free, open source software and on the whole is excellent.

[m4heshd]

I know. And I'm a person who's half the life is dedicated to FOSS but I have an obsession with documentation. I've held on to releases around 3 months just so I could complete docs. Even to the tiniest details. Ok that aside, try this with Allow access to file URLs turned on for vue devtools.

vue-cli-service build --mode=development

This works perfectly on the browser but unfortunately this is still not a solution for me because on Electron, file:// protocol is completely broken.

[akauppi]

This seems like the best place to track use of Developer Tools for Vue.js 3.

I've got an app template and am having a course (small audience) about it. This week we are covering Vue.js but I cannot show developer tools since I still don't know how to switch them on.

Chrome 90.0.x on macOS
Vue extension 6.0.0 beta 8

Described in more detail here: akauppi/GroundLevel-firebase-es#36

---

Edit & Work-around:

Based on this I managed to get the Vue.js 3 developer tools enabled! 🥳

window.postMessage({
    devtoolsEnabled: true,
    vueDetected: true
  }, '*')

This does not address the lack of config option for such, and is 100% undocumented, as far as I know. But it works.

[Akryum]

Did you try using a development build of Vue (docs)?

For example, I see the devtools code in this dist file.

[J3ronimo]

Just in case this will help anyone: I'm using vite, and in vite.config.js I added

export default defineConfig({
    ...
    define : {
        __VUE_PROD_DEVTOOLS__ : true
    }
}

Which made Firefox's Vue devtools recognize the app, while just setting

     mode : 'development'

didn't do anything.

Reference.

[viniciussommacal]

@J3ronimo the solution in your comment worked for me thanks

[ryno1234]

@J3ronimo's answer "works" and solves the problem, but why is Vue thinking it is in production mode when my Vite config is stating that we're building in "development" mode?