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