Tools for developing with VueJS

Posted by in Javascript and TypeScript

There is no doubt that VueJS is a fantastic framework that it is having tremendous acceptance in web development, and I’m one of them. Normally, the success of a framework is usually accompanied by development tools linked to it, and just as Facebook is at the forefront of React and tools have been developed, something similar happens with the tools to develop with VueJS.

Vuejs DevTools

In Firefox there exist an extension called Vue.js devtools that you can add:

vueJS DevTools Firefox

vueJS DevTools Firefox

When adding VueJS to developer tools, you will find an icon above that tells you if the page in question includes Vue or not.

vueJS en Firefox

vueJS en Firefox

vueJS en Firefox 2

vueJS en Firefox 2

Keep in mind that the tools detect whether you are working with the development version or the production version. We tried to load the example code seen in the previous entry about events in Vue:

vueJS devTools en Firefox

vueJS devTools en Firefox

In the previous image, we have almost no information about the VueJS object, and this is because we are working with the production version, that is, the minimized one.

If we change the version of VueJs to the development version, we can see how the development tools are fully operational and we can already see everything that is happening in the Vue object.:

vueJS devTools en Firefox

vueJS devTools en Firefox

Without a doubt, a great help for developers.

VueJS in Chrome

For Chorme, there is also a similar extension to Firefox, which you can download here:

vueJS en Chrome

vueJS en Chrome

Let’s load our example:

vueJS en Chrome

vueJS en Chrome

but you can see that VueJs is not detected, when you push the VueJS icon:

vueJS en Chrome

vueJS en Chrome

To activate the extension and make it work with file://// you need to notify the extension in the Chrome extension options (chrome://extensions/):

vueJS en Chrome

vueJS en Chrome

Back to the browser, refresh the page and … now the VueJs tools are available to work with:

vueJS en Chrome

vueJS en Chrome

I hope you found it interesting, and support this blog with a donation! Happy coding!

Google+ Comments - Comentarios Google+