Integrating Vue Devtools into an Electron Application

Bringing Vue Devtools for an Electron application running VueJS version 3 on the frontend.
Repo: github.com/Cod...
Documentation: devtools.vuejs...
Blogpost: codybontecou.c...
Twitter: / codybontecou

[@Imaginativeone_DF]

Got vue-devtools AND SQLite running. Thanks a gigantic lot for this video and your effective repo.

[@codybontecou]

Happy to hear that Doug! Best of luck with your app.

[@Imaginativeone_DF]

It appears that the Vue app in your repo is compiling *without* electron-compile. How did you get that to work?

[@justinhalsall4077]

Hey Cody, thanks for the video! For the next one, could you bump up the text size? Watching this on my mobile phone is pretty much impossible to read your code

[@codybontecou]

Of course! I'll make sure it looks good on mobile for my next video! Thank you for the feedback.

[@Imaginativeone_DF]

I'm using your github repo. When I insert the code at time index 3:00, I don't have access to the "process" object/variable. How do I fix that?

[@Imaginativeone_DF]

import devtools from '@vue/devtools'
// import Vue from 'vue'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.mount('#app');
// import devtools from '@vue/devtools'
// import Vue from 'vue'
// Make sure you import devtools before Vue, otherwise it might not work as expected.
// And connect to host:
// if (process.env.NODE_ENV === 'development') {
// devtools.connect(/* host, port */)
// }
// Current Development
if (process.env.NODE_ENV === 'development') {
devtools.connect(/* host, port */)
}

[@Imaginativeone_DF]

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

[@Imaginativeone_DF]

Correction: process might not be the problem. Perhaps it's devtools.