What is the best config for a Vue project?

nahuelhds profile image Nahue ・1 min read

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


Editor guide

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.


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


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?

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...

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.

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.

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.