Tools for developing with VueJS

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:

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

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

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:

Let’s load our example:

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

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

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

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