There exists a lot of great web development frameworks out there. I believe that every framework can be used to create the website you want. What you should choose only comes down to individual preference. Remember, there also is a possibility to use no framework as well.

Myself, I usually choose Vue. Here are my top reasons to choose Vue over the most used ~~framework~~ library React.
(Just to have it said, I have reasons to choose React over Vue as well, but I don't value them as much as the points below)

Without using a building tool

With both Vue and React you don't necessarily need a building step to create your website. It can be done with just vanilla JavaScript, HTML and CSS. Let's create a button that count's the number of times it has been clicked.

React

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
</head>

<body>
    <div id="app"></div>
    <script>
        function Button() {
            const [counter, setCounter] = React.useState(0);

            return React.createElement(
                'button',
                { onClick: () => setCounter(counter + 1) },
                counter
            );
        }
        const domContainer = document.querySelector('#app');
        ReactDOM.render(React.createElement(Button), domContainer);
    </script>
</body>

</html>

Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <button @click="counter++">{{counter}}</button>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                counter: 0
            }
        });
    </script>
</body>
</html>

	Size	Characters of Code	Drawbacks
React	40.7 KB	740	No JSX support, which is React's main way to code Code will start to get messy with many elements Two script imports
Vue	32.6 KB	389	Sub components need to use template strings for the HTML Code will start to get messy with many components

I prefer Vue in this scenario because it is pretty easy to add reactivity to a website and the code is pretty much the same as "ordinary" Vue in a project with a build step.

CLI

React has the Create React App to set up your project. But when you want to add features, such as router, Sass, linter and more, you have to do it manually afterward.

Vue provides you with a CLI where you can pick what features you like when you are creating a project. Which makes the process of creating a project smooth and easy.

Template

A big difference between the frameworks is how the HTML is created. React uses JSX to allow you to combine JavaScript and HTML in the same render function. For me, this feels like it can quickly turn into spaghetti code.

In Vue you write your HTML in a template tag, allowing you to write normal HTML with directives to add functionality. (JSX is also an option in Vue, but not very used.) Look at my next reasons to see examples of the difference.

Bind Input Values

React

import React from 'react';

function InputBind() {
    const [text, setText] = React.useState('');

    return (
        <>
            <input type="text" onChange={e => setText(e.target.value)} />
            <p>{text}</p>
        </>
    );
}

export default InputBind;

Vue

<template>
    <div>
        <input type="text" v-model="text">
        <p>{{text}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            text: ''
        }
    }
}
</script>

Conditionally Render

React

Option 1: Ternary operation. Which isn't always as readable.

import React from 'react';

function CondinionallyRender() {
    const [show, setShow] = React.useState(true);

    return (
        <>
            <input type="checkbox" onChange={e => setShow(e.target.checked)} checked={show} />
            {show
                ?
                <p>👋👋👋👋👋</p>
                :
                <p>💨</p>
            }
        </>
    );
}

export default CondinionallyRender;

Option 2: Logical Short Circuit Evaluation. Feels a little like magic and you need to know how logical expressions are being evaluated.

import React from 'react';

function CondinionallyRender() {
    const [show, setShow] = React.useState(true);

    return (
        <>
            <input type="checkbox" onChange={e => setShow(e.target.checked)} checked={show} />
            {show && <p>👋👋👋👋👋</p>}
            {show || <p>💨</p>}
        </>
    );
}

export default CondinionallyRender;

Option 3: if-else function. Best for understandability, but HTML code needs to be moved away from the rest of the HTML.

import React from 'react';

function CondinionallyRender() {
    const [show, setShow] = React.useState(true);

    const renderIt = () => {
        if (show) {
            return <p>👋👋👋👋👋</p>
        } else {
            return <p>💨</p>
        }
    }

    return (
        <>
            <input type="checkbox" onChange={e => setShow(e.target.checked)} checked={show} />
            {renderIt()}
        </>
    );
}

export default CondinionallyRender;

Vue

<template>
    <div>
        <input type="checkbox" v-model="show">
        <p v-if="show">👋👋👋👋👋</p>
        <p v-else>💨</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            show: true
        }
    }
}
</script>

List an Array

React

import React from 'react';

function List() {
    const todos = ['Eat', 'Move', 'Code', '😴😴😴'];

    return (
        <ul>
            {
                todos.map(todo =>
                  <li key={todo}>{todo}</li>
                )
            }
        </ul>
    );
}

export default List;

Vue

<template>
    <ul>
        <li v-for="todo in todos" :key="todo">{{todo}}</li>
    </ul>
</template>

<script>
export default {
    data(){
        return{
            todos: ['Eat', 'Move', 'Code', '😴😴😴']
        }
    }
}
</script>

className vs class

React

<div className="center-box"></div>

Vue

<div class="center-box"></div>

I don't like to be pushed away from normal HTML.

Alter state directly

React

//declare state
const [human, setHuman] = React.useState({ name: 'Gaute', age: 28, favouriteDinner: 'Pizza'});
const [counter, setCounter] = React.useState(0);

//update state
setHuman({ ...human, favouriteDinner: 'Candy' });
setCounter(counter + 1)

Vue

//declare state
data(){
  return{
    human: { name: 'Gaute', age: 28, favouriteDinner: 'Pizza'},
    counter: 0
  }
}

//update state
this.human.favouriteDinner = 'Candy';
this.counter++;

This is a clear win for Vue, as I don't like the idea that I need to rewrite my whole object or value by using the previous state.

Examples above project stats

	Production Build Size	Project Size	Characters of Code
React	460 KB	146 MB	2345
Vue	443 KB	67.2 MB	1797

Conclusion

For me, Vue had a much quicker learning curve, as it took me some time to understand React, while Vue I got from the first second (maybe because of the similarity to AngularJS directives). It feels closer to ordinary HTML and JavaScript. I don't need to use JSX, where I often feel like the JavaScript clutters the HTML code. Vue also has single file components, where all component code (HTML, JavaScript, and CSS) are in the same file if wanted. Vue has scoped CSS for components, which also is super nice!

Example code can be found at GitHub.

This is just my friendly opinions. If you like something else, that's okay :)

Blog

Why I prefer Vue over React

Gaute Meek Olsen

Without using a building tool

React

Vue

CLI

Template

Bind Input Values

React

Vue

Conditionally Render

React

Vue

List an Array

React

Vue

className vs class

React

Vue

Alter state directly

React

Vue

Examples above project stats

Conclusion

Join Our Newsletter. No Spam, Only the good stuff.

Related