DEV Community

Nahue
Nahue

Posted on

What is the best config for a Vue project?

I work with VSCode and I can't make the debugging work properly with vue files. No matter if it's a vue-cli or a nuxt based project.

I can only manage to work with debugger statements wich is very annoying and time consuming.

I need recommendations or examples. Thanks in advance.

PS: I know I can debug through Chrome DevTools. I just want the full XP of debugging all inside the IDE, like I do with React or Angular

Discussion (7)

Collapse
adam_cyclones profile image
Adam Crockett • Edited on

Maybe update the title to "vscode Vue Debugger configuration?" With the tags #help

That might be clearer because I expected you where talking about compiling Vue.

I'm sorry I can't be more helpful but have you tried the Vue devtools Chrome plugin, and also let us know how your getting Vue from source to the browser.

Collapse
nahuelhds profile image
Nahue Author • Edited on

Thanks for the suggestion. Just modified the post in that way.

About the DevTools: I've tried everything, I just want to debug all inside the IDE not having to have few windows for the same task, as I do with React or Angular

Collapse
adam_cyclones profile image
Adam Crockett

Okay cool, so how are you getting Vue into the browser? CDN / compiler? I am trying to work out your options are. Do you have a repo I can take a look at?

Thread Thread
nahuelhds profile image
Nahue Author • Edited on

Mmm not really. Just making a general question here because as far as I could talk with colleges I get the same answer: dev tools or debugger statements.

Maybe someone got this working with vue files...

Thread Thread
adam_cyclones profile image
Adam Crockett • Edited on

Your colleagues are correct as far as saying sometimes you cant afford luxuries. It has been done many times before, and it's just a Google away. but it involves source maps and getting the right settings for your build tool (maybe your using webpack) and the basic settings based on the chrome debugging configuration you can use, it's either an extension or it's a default I can't recall.

Thread Thread
nahuelhds profile image
Nahue Author

Thanks Adam. If that so, then this is another motive to choose React over Vue.

Debugging (and breakpoints!) is very time consuming when it cannot be fully integrated to the IDE you work with.

Thread Thread
adam_cyclones profile image
Adam Crockett

I didn't say you couldn't use breakpoints with Vue at all it's just a matter of getting the right help (I'm not helping it seems), I can tell you would prefer another framework but from experience in all 3, that React and Vue are very similar. Vue can even use jsx and redux which demonstrates flexibility. It's down to you to get the config right. And you can have breakpoints.