Vue Ecosystem and Devtools


Vue is an amazing javascript framework to work in but how do you get started…especially coming from React?


At work I have been assigned on a Vue project and coming from React there was a lot to learn. This is my attempt to capture my thoughts and notes on what you will need to be a productive Vue developer.

Vue Ecosystem from Evan You

Watching Evan’s keynote will bring you up to speed on where the Vue Ecosystem is at…but it’s pretty long here are my takeaways.

Learning Vue

Now that you have a lay of the land in Vue it’s time to learn how Vue works and get coding. I learn best by watching video tutorials and coding along.

Here are some video courses I have enjoyed:

vue training

Other recommendations from Made With Vue.

Vue Dev Tools

VSCode Extensions

💪 These are the vscode extensions recommended for Vue development.

  1. Volar Language Features

    Volar provides Vue syntax highlighting, TypeScript support, and works with Vue3 and Vue2.

volar extension

  1. Vue Snippets

    Vue snippets allow you to quickly scaffold out a Vue single file template and speed up your workflow.

    vue snippets snippets example

Browser Developer Tools

browser developer tools

Browser devtools extension for debugging Vue.js applications

This is a key part of developing Vue apps by giving you the ability to look at state, props, store, etc in the browser.

Support for Chromium-based browsers and Firefox.


It’s been a great experience learning a new javascript framework like Vue. It has a great ecosystem, team, and community. The developer experience is really good and I hope to continue learning and using Vue on personal and work projects.

Let me know if I missed some of your favorite Vue developer tools.

About the author

Frank is a 👨‍💻web developer, U.S. Army veteran, 🎸bass player, father, husband, and founder of sacodersunited.

Read next: