It seems like Vue and React has a lot in common but the first big difference that we must know is that React is a libraby while Vue is a framework.

And what does it means? We all know that libraries tend to be simplier than frameworks. Is it true? In this case I would say "No." Because simply I prefer using Vue. But let's continue...

React was created in 2011 from Jordan Walke - Facebook software engineer. Vue was created three yaers later by Evan You - ex-Google developer. The idea was to combine the best of Angular and React. Vue uses a template system with regular HTML, which you can easily integrate into existing code. With React developers can write templete code directly in JavaScript. Vue currently takes about 80 kb, whereas React is around 100 kb. But as advantage of React I can say that it gives you more flexability and freedom to install any components of your choice, while Vue suggests particular components to create application features.

In my opinion the way Vue allows you to freely use CSS and HTML in standrad forms is more comprehensible. React uses a JSX syntax extension that allows you to integrate HTML with JavaScript code which makes the process looks a little bit difficult at first sight.

React components structure:

JS:

import React from 'react';
 
const list = [
  {
    id: 'a',
    firstname: 'Robin',
    lastname: 'Wieruch',
    year: 1988,
  },
  {
    id: 'b',
    firstname: 'Dave',
    lastname: 'Davidds',
    year: 1990,
  },
];
 
const App = () => {
  return (
    <ul>
      {list.map((item) => (
        <li key={item.id}>
          <span>{item.firstname}</span>
          <span>{item.lastname}</span>
          <span>{item.year}</span>
        </li>
      ))}
    </ul>
  );
};

Vue components structure:

HTML:

<div id="app">
  <h1>Simple Accordion w/ Vue JS</h1>
  <div class="accordions">
    <dl v-for="(row, id) in rows">
      <dt v-on:click="row.open = !row.open">{{ row.term }}</dt>
      <dd v-if="row.open">{{ row.details }}</dd>
    </dl>
  </div>
</div>

JS:

new Vue({
  el: '#app',
  data: {
    rows: {
      q1: {
        term: 'Term 1',
        details: 'Some text here...',
        open: false
      },
      q2: {
        term: 'Term 2',
        details: 'Some text here...',
        open: false
      },
      q3: {
        term: 'Term 3',
        details: 'Some text here...',
        open: false
      }
    }
  }
});

Vue is very lightweight framework and it also allows you to break your code into smaller parts with lazy loading components and optimize the load time. It's a good choice when you want to scale up the funcionalities of a current app or plan to create new progressive web app.

Some say that React tends to be more favored in the West, while Vue tends to be more favoured in the East. Well I am from Eastern Europe, that explains why I choose Vue over React haha.

The only problem I can think of is that Vue's biggest community is located in China and it happened sometimes when I was searching an information about an issue to find documentation written in their native language... While React has bigger developer comminity and you can find everything in english.