I have been working in front-end development for 3 years now, using both React and Vue frameworks. I have built several projects with them, and in this article, I won't be comparing them like any beginner's guide. Instead, I will focus on the points where I felt the differences while working with them.
First, Library and Framework.
When working with Vue, you always have to deal with .vue files, which gives Vue some extra abilities like registering global components , directives or adding plugins (like i18) to your Vue app. This allows you to access any plugin or component from any .vue file, reducing the large number of imports that you often see in React and making public instance properties accessible from the without any imports.
Dealing With State
Vue provides Refs and Reactives as the main way to define states in your components, which are mutable directly This makes your code easier and more readable .In contrast, React requires you to define a setter function for every state.
JSX and Vue Syntax
Working with JSX, especially if you are good enough in JavaScript, makes you very comfortable when writing your code and gives you more control over HTML code. In the end, any code you write is normal JavaScript code, unlike Vue, where you may feel like you are writing somewhat unfamiliar syntax, such as directives. However, directives are actually a very nice feature that I miss in React 😅.
React Features that i missed in vue
JSX
As I previously mentioned, JSX is fantastic! its make your code more dynamic and scalable.
Multiple Components in The Same File
You can define multiple components in one file with React , unlike vue.
TypeScript Support
React has much better support for TypeScript than Vue. However, Vue is working on improving TypeScript support significantly through the new updates
The Greate Comunity
React has a large and thriving ecosystem of libraries and packages. For example, the Material-UI library, which was a major reason for me to turn towards React.
Job Opportunities
Through my research on popular websites such as LinkedIn and Glassdoor, I noticed that more than 80% of the job opportunities I found were asking for React developers, with a very small percentage of companies looking for Vue.js developers.
Vue Features that i missed in React
2 Way Binding
Two-way binding in Vue makes it easy to create interactive and responsive user interfaces, and it can help to simplify the code required to manage user input in forms.
Scoped Styles
Vue Scoped styles are a feature in Vue that allows you to apply styles to a specific component or element without affecting other components or elements in your application, and that would be very tricky in React.
Directives
Vue has a built-in system of directives that can be used to modify the behavior of HTML elements in the DOM. For example, the v-if and v-for directives can be used to conditionally render elements or loop over arrays of data. In addition, in Vue, you can create custom directives.
Built-in transitions and animations
Vue has built-in support for transitions and animations, which can be used to add visual effects to the UI when elements are added, removed, or updated. React does not have built-in support for transitions and animations, but similar functionality can be achieved using CSS transitions and animations or third-party libraries.
You may find many contradictions in this article, but I just wanted to clarify the points of difference that I felt through my use of both technologies.
Top comments (6)
Great read! 👍
There’s actually a JSX support for Vue. For Material design, you can try Vuetify or Vue Material. 😁
yes you are alright ! , but JSX has a lot of limitations in vue.js, and for vuetify .. yes it's an amazing library but it's very basic compared to Mui, and it's docs needs a lot of work😁 . thanks for sharing your toughts Franz ! 💙
Vuetify 3 has a long way to go, hopefully will catch previous version features in the near future, vuetify 2 was such a Powerhouse.
Great read.
valuable concepts you have shared . Dreamexch Contact Number
Thank You 😁