Vue.js for React Developers

 Date: June 13, 2022

It’s been a while since I learned “yet another” JavaScript framework. I recently joined the Super.Events team at Meta and the Super web app is written in Vue.js.

I’ve been working with Knockout, Angular, React and Aurelia in the past. Vue has a lot of similarities with pretty much all of them. It’s like an intersection of Angular and React. This blog post is a short overview of gotchas and differences between Vue and other JS frameworks.


I’ve been doing development in VSCode, with the Vetur extension. It’s very useful because vue is using Single-File Components. Vue components have .vue extension and following structure:

<!-- html –>
// JS code
/ * css styles */

You can generate a Vue app with Vue CLI. It’s useful for quickly generating app skeletons, and also provides out of box bundling and minification for production.

Key things to learn

  • Vue has props and state (like React)
  • Vue allows to create components and reference them similarly to React
  • ​​Vuex is a store like Redux
  • Vue router is very similar to Angular router
  • Dynamic text uses mustaches syntax: <div>Hello, {{ name }}</div> (almost like React but with double curly braces)
  • There is options API and composition API - the best explanation of differences is in (you can switch code samples between options and composition API) and in Vue JS 3 Tutorial for Beginners (part1, part2)
  • To bind variable to component use v-bind:variable or :variable (example)
  • For two way bindings use v-model (example)
  • For event bindings use v-on or @ (example)
  • You can do conditional rendering with v-if directive (example)
  • Directive for iterating thru list: v-for (example)
  • Other useful things:
    • Computeds - changes when underlying variables change, similar to Knockout ko.computed
    • Refs - allows to reference DOM element and manipulate it directly
    • Watchers - allows to subscribe to variable changes, similar to Knockout subscriptions
    • Emits - you can emit events with this.$emit(‘my event’)


 Tags:  javascript

⏪ Skeptics Guide to Universe - Concepts Summary