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

Vue.js and React logos

Basics

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:

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

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 https://vuejs.org/tutorial/ (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’)

Resources

Vue JS Crash Course - awesome (the best) overview of Vue
Vuex Tutorial - great overview of Vuex store
Differences between Vue 2 vs Vue 3 - the most recent version of vue is 3, but a lot of apps are still written in vue 2
Vue JS 3 Tutorial for Beginners - more comprehensive overview of all vue features, if you watched above, I recommend especially the videos about composition API, which is specific for Vue 3:
- Vue JS 3 Tutorial for Beginners #10 - The Composition API (part 1)
- Vue JS 3 Tutorial for Beginners #11 - The Composition API (part 2)
Official vue.js tutorial - quick overview of all vue features (recommended after going through tutorials to refresh your knowledge)

Tags: javascript