React vs Vue (A feature comparison)
Tags: react, vue, feature, comparison
Published: 2020-04-23 19:02:06

# What this is not

This is not a comparison of how React works, how Vue fares in performance and code quality against React, etc.

This is rather a set of features which caught my eye as somewhat of a similarity. They are so similar in terms of learning curve, feature set and also tools developed around them, that sometimes I think they could combine and become a super-sonic tool that works across the board.

Please do not judge me over this, if some of the feature items look too naive and should not be there at all. But this is how I think both of the tools evolved over time and they are more common than you might think.

> Wherever possible I have given links to the corresponding tools, in case you want to quickly take a look at them.

# Here it goes

| Feature | For React | For VueJS |
|--|--|--|--|
| [Single Page Application](https://en.wikipedia.org/wiki/Single-page_application) | React CLI ([create-react-app](https://create-react-app.dev/docs/getting-started)) | Vue CLI ([vue create](https://cli.vuejs.org/guide/)) |
| [Server Side Rendering](https://medium.com/@benjburkholder/javascript-seo-server-side-rendering-vs-client-side-rendering-bc06b8ca2383) | [Next.js](https://nextjs.org/learn/basics/create-nextjs-app) | [Nuxt.js](https://nuxtjs.org/guide/installation) |
| [Static Site Generator](https://staticgen.org/) | [Gatsby](https://www.gatsbyjs.org/), [React-Static](https://github.com/react-static/react-static/tree/master/docs) | [Gridsome](https://gridsome.org/docs/), [VuePress](https://vuepress.vuejs.org/guide/) |
| [Material UI](https://material.io/design/) Library | [Material-UI.com](https://material-ui.com/getting-started/installation/) | [Vuetify](https://vuetifyjs.com/en/getting-started/quick-start/) |
| [DevTools](https://en.wikipedia.org/wiki/Web_development_tools) | React DevTools for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) | Vue DevTools for [Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) |
| [Bootstrap](https://getbootstrap.com/docs/4.4/getting-started/introduction/) Library | [react-bootstrap](https://react-bootstrap.github.io/getting-started/introduction) | [bootstrap-vue](https://bootstrap-vue.js.org/docs) |
| Routing | [react-router](https://reacttraining.com/react-router/web/guides/quick-start), [reach-router](https://reach.tech/router) | VueJS router ([vue-router](https://router.vuejs.org/installation.html#direct-download-cdn)) |
| UI State management | [React Context](https://reactjs.org/docs/context.html), [Redux](https://redux.js.org/introduction/getting-started) ([react-redux](https://react-redux.js.org/introduction/quick-start)) | [Vuex](https://vuex.vuejs.org/guide/) |
| Native apps | [React Native](https://reactnative.dev/docs/getting-started) ([create-react-native-app](https://github.com/expo/create-react-native-app)) | Vue Native ([vue-native-cli](https://vue-native.io/docs/installation.html)) |

# What do you think

I feel I did a nice job going after all these tools. I come from a React background and rarely get to work on VueJS apps in my work. I have been doing some side projects in Vue, just to get a feel of it. What do you think of the above listing of features. Should I add any other features for comparison? Did I miss anything. Have I listed something wrong? Do let  me know in the comments.