I tried switching to Vue.js from React.js

Introduction

A few years ago, like many others, I was “hyped” by the arrival of hooks and functional components of the React.js frontend library. They offered a completely new way of developing by writing much less code than with the Components class. I was really hooked, and for a good while.

Today I had to opt for the Vue.js framework to meet the needs of a brand new client project. And having reached the end of this project, I said to myself that this was the opportunity to offer you feedback as a new user of this framework!

So, has this increase in skill lived up to the notoriety of Vue.js?
Is it better, today, to develop frontend in Vue than in React?

That’s what we’re going to see!

Project start-up

Boiler plate

Who says starting a project, says looking for a good boilerplate to save us hours, even days of laborious configuration!
Without needing to look very far, the npm create vue@latest command largely meets my needs:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

The Typescript language is already supported, a routing system and a store are offered, and there is even room for unit and End-to-End testing!

By default, the Vite bundler is installed. Which is not to displease me!? Indeed, the builds are fast and, most of the time, Hot Module Replacement (HMR) works well.

A little npm run dev to launch the local dev server, and presto! It's already running in the browser!

And for production? Simply enter the npm run build command, and the project is exported as static files in a dist directory after checking the typings (in the case where Typescript has been activated):

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

Project architecture

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

On the architectural side of the project, we find in particular:

• the index.html file, with the tag
  on which our entire Vue application is grafted;
• the main.ts, with the successive creation of the App component, the router and the store:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

• pure .ts files, to manage routing and the store;
• some config and test files;
• ... and of course the *.vue files, distinguished into components (which correspond rather to generic and reusable elements), and views (which correspond rather to high level pages)

In short, the file architecture is rather simple and relatively similar to that of React, even with a lot of options checked in the boilerplate.
So far, coming from React, nothing really new. It is then that significant differences appear!

Architecture of a Vue file

Here is a code snippet inspired by the official website. It just changes the color of the text if clicked and displays the phrase "The text above is green" if applicable, but it represents a typical architecture of *.vue files:

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

Note the binding of events with @click, the conditional display with v-if, and the binding in CSS with v-bind().

The code is separated into 3 very distinct parts:

• script: the control code;
• template: the HTML structure;
• style: the CSS style sheet.

And these three parts never mix ?.
This has several advantages that I personally experienced throughout my experience on the client project:

• The HTML structure is clear, fixed, and in a very declarative style - everything is there, even the tags displayed conditionally;
• the logic part is well separated from the display part;
• you can write pure CSS in place, directly linked to the component, and without installing third-party libraries;
• despite the separation of the style, you can still insert variables in the CSS.

With the scoped tag on the

Small drawback: a priori there is no automatic CSS polyfill. You should therefore rather aim for a bookstore like vue-emotion.

From my point of view, I find that this kind of "all-in-JS" library breaks a bit the architecture that Vue offers, and obviously, browser-specific CSS properties are much rarer in our days. The

In short, I found this all-in-one architecture very pleasant but with clearly separated sections. This allows you to keep clean code, but also more concise. Indeed, the simultaneous presence of the 3 sections "business logic / display / style" often encourages you to redivide your code into smaller modules, and therefore into smaller files.

Now, what if we take a closer look at the Vue.js API itself?

The Vue.js API

Here I will not give you an exhaustive list of all the elements of the Vue.js API that I encountered, but only some very specific ones that I found fairly representative of Vue's logic .

The (re)calculated values

Let's start with a well-known operation in the React universe: intelligently recalculate an HTML rendering (or a variable) following an update of data.
There is the very intuitive computed() function which benefits from a memorization system (a sort of "cache") to avoid recalculating the output value each time:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

Here the magicNumber is calculated only if the value of pushedBtn changes. And it’s verifiable: the message “computed again!” only displays in the console when a different button is clicked.
So, unlike React, no need to explicitly specify the variables to monitor in this function.

In the same vein, we also find the watch and watchEffect which respectively allow you to react to changes in all or part of the component's properties, like the useEffect in React:

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

Only a click on the number modifier button will increment the "watches" counter.
The watch() then allows us to trigger a callback each time certain variables change.

The strength of this function lies in the in-depth analysis of variable modifications: Vue detects changes even deep within a sub-object!

Two-way synchronization

Declaring and passing a property from a parent component to a child component is a fairly recurring operation. Synchronizing this value between the child and the parent is also possible, for example in the input of a form.

Also, rather than managing both a property and an event-based update callback like here:

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

… it is possible to use the defineModel macro instead which simplifies writing:

vite v5.2.11 building for production...
✓ 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
✓ built in 591ms

Much shorter! ? Besides, having only one model, I could even have dispensed with naming it!

And with the parent:

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

The for loop

Continuing on the v-for after seeing the v-model made me realize that Vue.js was starting to introduce a lot of "magic" through implicit code:

import './assets/main.css';

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';

const app = createApp(App); // composant racine

app.use(createPinia()); // store
app.use(router); // routage des pages front

app.mount('#app');

And the result:

As one might expect, the v-for instruction therefore makes it possible to automatically repeat part of an HTML pattern (here the

tag) for each element of an iterable.

On the React side, it would have been necessary to use JSX to build each element yourself, making the code less readable as the component grows:

<script setup>
  import { ref } from 'vue';

  const color = ref('green');

  function toggleColor() {
    color.value = color.value === 'green' ? 'blue' : 'green';
  }
</script>

<template>
  <p class="main-text">
    Cliquez sur ce texte pour changer de couleur.
  </p>
  <p v-if="color === 'green'">Le texte ci-dessus est vert.</p>
</template>

<style scoped>
  .main-text {
    color: v-bind(color);
  }
</style>

Personally, I have a preference for Vue's structure in terms of code cleanliness, as long as there is no need to debug. ?
And by the way, since we're talking about debugging, what about the Vue ecosystem tools?

Dev tools

Here are 3 tools that caught my attention in the development of my project.

VSCode extension: Vue Official

I'm starting with the obvious, but yes, there is an extension for VSCode Vue (and other IDEs) that adds syntax highlighting, autocompletion, snippets, etc. An essential!

However, I noticed some instabilities in coloring and autocompletion, which were sometimes a little capricious?, where I was able to appreciate greater stability on the React side.

Vue.js devtools

Like the React Developer Tools browser plugin, there is the Vue.js devtools plugin, which, I must admit, is already very well provided:

There are 4 tabs:

• Components, where we can observe, but also modify the states of the components;
• Timeline, which allows you to record events and component rendering times, which in fact corresponds to a version of the browser's "Performance" tab but focused on Vue;
• Pinia, which allows you to directly observe and modify the states of the standard store?, a ready-made integration that I found particularly welcome;
• Routes, where you can list the different roads and their activity - this is a tab that I found a bit gimmicky on my moderately sized project (especially since the information is a not very redundant with those of the "Components" tab, but which can prove very useful on complex routing.

In short, for debugging, there is everything you need and even more!

Vuetify

Almost without surprise (but with merit all the same!), there is also a UI library for Vue which implements Google's Material Design and also provides a list of standard icons: Vuetify.

✔ Project name: … myproject-vue
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) › No / Yes

This saves a lot of time on project starts, or on projects that do not require too much graphic customization.

But as always, I recommend keeping an eye on rendering performance with this kind of high-level library. The configuration capacity of a library is often paid for elsewhere!

Conclusion

What can we say about this experience migrating from React to Vue?

First of all, from a code point of view, compared to React I would say that the Vue lib is:

• more structured;
• more declarative ;
• more concise.

However, thanks to its code which is written more in JSX, I find that React remains much more interoperable, more programmatic and more explicit than Vue, and with better linter stability.

In terms of development environment and community, Vue has all the cards in hand for me to ensure efficient development right through to production.

So has this increase in skill on Vue lived up to its notoriety? I would say yes. I found the learning curve effective, and will continue to develop with Vue if the opportunity arises.

Finally, is it better to develop frontend in Vue today than in React?
From a completely personal point of view, I think not. Even though Vue and React each have slightly different application cases, I prefer to rely on a reliable typing system and more flexible code with React. But maybe the next versions of Vue and their tools will change my mind?

And you, what is your feedback?

The above is the detailed content of I tried switching to Vue.js from React.js. For more information, please follow other related articles on the PHP Chinese website!