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

Top comments (7)

Collapse
 
adam_cyclones profile image
Adam Crockett ๐ŸŒ€ • Edited

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 • Edited

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 • Edited

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

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

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.