For the last decade, the preferred mode of front-end web development has been architecting applications with JavaScript. Today, among the numerous options, React is the dominant framework of choice for front-end web development. According to the State of JS survey, it has been the number one most-used front-end framework every year since 2016.
However, there has been a steady increase in the usage of Vue instead of React. It has developed its own ecosystem completely separate from React over the years including build tools, meta-frameworks, routers, state managers (like Pinia), component libraries, and more. But what is the reasoning behind this increase in Vue usage? There are many reasons that developers may choose one over the other.
Some developers prefer supporting a community-run project over a project managed by a large corporation. Others find React too complex in comparison to Vue. Some developers also find the separation of content, styling, and logic in a Vue single file component to be more intuitive than the separation of concerns within a JSX file. In this article, we will compare a Vue project to equivalents in React so you can decide for yourself which you find more intuitive.
A history of Vue
Evan You created Vue in 2014, taking inspiration from AngularJS and React, which were sponsored by Google and Facebook respectively. Unlike those frameworks, though, Evan was the primary driving force behind the creation and development of the framework. This allowed him to take on different influences from a framework like React, for example, where development has been highly intertwined with the needs of Facebook.
Comparing Vue project structure and syntax
Let’s start with the overall project structure. One way that React and Vue are similar, is their use of an HTML entry file called index.html, a JavaScript entry file called main.js, and an application entry file called App.jsx in React or App.vue in Vue.
├── index.html├── package.json├── src│ ├── App.vue│ └── main.js└── vite.config.jsThe HTML entry point will load the application from main.js (in Vue or React). The JavaScript entry point imports the top-level application component App.vue, so any plugins or integrations can be imported into the JavaScript entry file without interfering with any of the application logic.
However, when it comes to the syntax, we’ll start to see key differences. Vue’s syntax and directives are influenced by AngularJS and include common operations such as for loops (v-for), conditionals (v-else-if), and event handling (v-on). The underlying implementation uses a virtual DOM like React for quickly reconciling DOM manipulations with a declarative syntax.
React, on the other hand, uses JSX so the developer can write for loops, conditionals, and event handlers the usual way with JavaScript. This results in a file containing JavaScript functions at the top and a return function at the bottom. The return function outputs HTML containing any JavaScript variables defined above the function.
import React, { useState } from 'react';function Example() { const [count, setCount] = useState(0); return ( <div> <h2>Click the button, you know you want to</h2> <button onClick={() => setCount(count + 1)}> count is: {count} </button> </div> );}This example does not include any CSS, although it is possible to include CSS in a React component with a library like Styled Components or Emotion.
However, unlike React with JSX, Vue breaks up a single file component into three clearly delineated parts: script, template, and style.
<script setup> import { ref } from 'vue' const count = ref(0)</script><template> <h2>Click the button, you know you want to</h2> <button type="button" @click="count++"> count is: {{ count }} </button></template><style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; margin-top: 3rem; }</style>This roughly corresponds to the three languages used to build all websites: JavaScript, HTML, and CSS. If we were to view this component in a web browser, it would look like the following:
‘Hello world’ Vue project tour
Now that we’ve talked a little bit about the similarities and differences between React and Vue, let’s look at a small Vue project and how it would compare to a React project. To tour the Vue project with me, spin up a Stackblitz by clicking here.
Of course this Vue project requires slightly different dependencies from what you’d see in React, which you can see in the package.json file. You’ll see vue as a project dependency and two development dependencies: vite and @vitejs/plugin-vue.
{ "name": "vite-vue-starter", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.2.33" }, "devDependencies": { "@vitejs/plugin-vue": "^2.3.2", "vite": "^2.9.8" }}If this were a React project, you would see react and react-dom.
For the project files, you’ll see an HTML entry point file, a main function, application entry point, HelloWorld component, and configuration files for Vite. Notice these files in the root of your project directory:
vite.config.js- Vite configuration file for the Vue or React pluginindex.html- HTML entry file for initializing our application
There will also be two files in the src folder (along with two folders):
main.js- Root component that imports the Vue applicationApp.vue- Main application with imports for our components
And finally a single file in the components folder:
HelloWorld.vue-HelloWorldcomponent with stateful logic
Overall, the boilerplate files needed for a Vue application and React application should look very similar, especially if you are leveraging Vite for your React applications.
Vite Configuration File
Since Vite supports multiple front-end frameworks including React, the code below in the vite.config.js file in the root directory tells Vite that you are developing a Vue project specifically.
// vite.config.jsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({ plugins: [vue()]})HTML Entry Point
Like React, Vue also uses an entry HTML file with a div that loads your entire application at once, which you can see in the code below, found in index.html.
<!-- index.html --><!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body></html>If this was a React app, the only difference would be replacing /src/main.js with /src/main.jsx in the script tag.
Root Component
As we saw previously, inside the body tags of our HTML entry file we load main.js as a script using the type attribute to load a JavaScript module. Our main.js file is located in our src folder.
// src/main.jsimport { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')This file is only used to import createApp from the vue library and our App from App.vue, also contained in the src directory. Here is the equivalent file in a React application for comparison:
import React from 'react'import ReactDOM from 'react-dom/client'import App from './App'ReactDOM.createRoot(document.getElementById('root')).render(<App />)createRoot from ReactDOM is used to set the application to root with getElementById. The App is then rendered as a self-closing tag.
Application Component
As we saw earlier, a single file component in Vue contains a script for any JavaScript code, a template for HTML content, and styling for CSS.
// src/App.vue<script setup> import HelloWorld from './components/HelloWorld.vue'</script><template> <HelloWorld msg="Hello World" /></template><style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; text-align: center; margin-top: 3rem; }</style>The equivalent React component would import HelloWorld and then declare an App function that returns the HelloWorld component.
import HelloWorld from './components/HelloWorld.jsx'function App() { return ( <div> <HelloWorld /> </div> )}export default AppWithin these components, the organization of concerns shows one of the major contrasts between React and Vue.
Hello World Component
Our App.vue file is importing the HelloWorld component from HelloWorld.vue. This file is located inside the components folder.
// src/components/HelloWorld.vue<script setup> import { ref } from 'vue' defineProps({ msg: String, }) const count = ref(0)</script><template> <h1>{{ msg }}</h1> <button type="button" @click="count++"> count is: {{ count }} </button> <h2>Documentation</h2> <p> <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a> | <a href="https://v3.vuejs.org/" target="_blank">Vue 3</a> </p></template><style scoped> a { color: #42b983; }</style>And all of this comes together like this:
Vue meta-frameworks
Many React developers are aware of “React meta-frameworks” such as Next.js, Gatsby, or RedwoodJS. Vue has similar meta-frameworks including Nuxt.js and Gridsome. Nuxt.js is heavily inspired by Next.js and includes the majority of the same features including SSR, API routes, serverless function integration, and third-party modules.
These frameworks provide additional features such as static site generation, server-side rendering, and authentication. Some of the requirements that would lead a developer to use a meta-framework include SEO optimization, internationalization, localization, or user management and authentication.
Final thoughts
Despite the differences between the frameworks, a React developer should not have too much trouble picking up a Vue project. It still uses components that include a mixture of JavaScript, CSS, and HTML. However, Vue includes a more concise syntax and a cleaner separation between content, styling, and logic. The build tooling for both development and the production pipeline is nearly identical, especially now as Vite becomes more popular for React projects.
The Vue ecosystem offers higher-level frameworks for building faster and more reliably on real-world applications. Vue does not have as many third-party libraries as React, but there are still options for most of the tools that a React developer would expect including state management, UI libraries, and reusable components. Overall, with a little bit of research and practice, a React developer should feel confident performing just as efficiently with a Vue project as they do on a React project.
You're gonna want to check these out:
- Guide: React SEO Considerations and Solutions Guide: React SEO Considerations and Solutions
- The Easiest Way to Add a CMS to Next.js The Easiest Way to Add a CMS to Next.js
FAQs
Is it easy to learn Vue from React? ›
No, React is not easier than Vue. Vue has well-curated and easy-to-understand documentation, whereas React documentation is slightly more complicated. Also, for React, you will have to put extra effort into understanding JSX. On the other hand, Vue supports both HTML and JSX.
How long does it take to learn Vue from React? ›Learn Vue js will take a complete beginner one to two weeks. However, a more experienced programmer might be able to learn the basic concepts within a few hours. It's recommended that people are fluent in Javascript before attempting to learn Vue js. Learning Javascript will take between six to nine months.
Which is faster to learn Vue or React? ›Vue is faster and smaller, which contributes to better performance. When it comes to hiring developers, both have their advantages and drawbacks. Vue is easier to learn, but React is more popular, and therefore, finding hires is faster.
Why should I choose Vue over React? ›By default, Vue uses HTML templates, but there's an option to write in JSX. In React, on the other hand, there's solely JSX. Vue's traditional separation of concerns into HTML, CSS, and JS makes it easier even for beginner frontend developers to learn how to create Web applications.
Can I learn react JS in 2 weeks? ›ReactJS Basics
If you are a beginner or already have some programming experience, it will take you one to four weeks to completely master the basics. Rendering components based on conditions.
Vue, on the other hand, is a little simpler than React, so it may be easier to learn for new programmers. React, on the other hand, has a steeper learning curve and requires more practice before you can truly master it. Despite this, developers generally regard it as an excellent tool that is more flexible than Vue.
Can I learn React in 4 days? ›For a programmer who is already familiar with HTML and at least one other programming language, learning React will take no more than a single day. React may be learned by a novice programmer in a matter of days. There are more libraries and technologies that may be used with React, such as Redux or Relay.
Can I learn React in 3 weeks? ›The exact amount of time will vary depending on your experience level, but most people can learn React in between two and four months if they dedicate several hours a week to studying the library.
Can I learn React in 30 days? ›Learn React by building Applications
It is structured based on days and the challenge goes form day 1 to 30. In the 30 Days Of React challenge , you will have a chance to practice with small exercises, solve different challenging problems and build more than 30 simple and complex applications.
js. If you need a simple framework that is easy to learn and get started with quickly, then React may be your choice. But if you want something with more flexibility and complexity that can grow with your project over time without having to start from scratch, then perhaps Vue would be better for you.
Is Vue becoming more popular than React? ›
As per StackOverflow Survey 2022, React is the favourite framework of 40.14% of developers, Angular with 22.96%, and Vue with 18.97% of developers.
Is Vue worth learning 2023? ›Yep, Vue. js is a good choice of JavaScript framework to learn in 2023. It's popularity is growing and it's considered as a solid framework for building user interfaces and single-page applications.
Does Netflix use Vue or React? ›React has a much larger user base and community support, and many popular websites and applications are built with React, such as Facebook, Instagram, Airbnb, and Netflix. However, this does not necessarily mean that React is always the better choice than Vue.
Do companies use Vue or React? ›Popularity among companies and React and Vue developers
React is for now definitely more popular among software developers and companies. It is used by over 40% of developers, and liked by almost 70% of them, according to the 2021 Developer Survey by Stack Overflow.
Vue is a great choice for projects that need a lightweight and flexible framework. It's also great for projects that require a lot of interactivity. React is a great choice for projects that need to be highly scalable and maintainable. It's also great for projects that require a lot of customization.
Can I learn React in 5 days? ›The good news is that learning these skills isn't as hard as you might think — you can become proficient at building modern web applications without much time or effort invested. It only takes five days of practice to learn React (and then another few weeks to master it).
Can I learn ReactJS in 10 days? ›Like with any skill, you get better the more you practice. React has a good learning curve compared to other web development frameworks, so you shouldn't have any trouble picking up the fundamentals in a few days or weeks and mastering the language in a few months.
Can I master React in one month? ›On average, you can expect to learn React within one to six months, depending on your prior experience. If you're a complete beginner, you'll need to spend more time learning the prerequisites before you learn React.
Can I mix Vue and React? ›The preferred way to use React inside of a Vue app is to use a Vue plugin. Now, use your React components like you would normally use your Vue components!
Is React more scalable than Vue? ›Scalability in React vs Vue
React is more scalable as it allows developers to write template code in JavaScript. Vue comes with less scalability as it uses regular-old HTML for templating.
Does Vue use JSX? ›
Starting in 3.3, Vue supports specifying JSX namespace via TypeScript's jsxImportSource option.
Is learning React enough to get a job? ›Really depends on the job. Some will be happy to get you on board as longs as you have solid vanilla javascript skills, some would require that + at least a good understanding of how react works, some would require you to master it.
Can I learn React in 15 days? ›I learnt Angular and ReactJS in 10-15 days and made a good move in my career. Here, I am sharing few tips to learn Angular and ReactJS very fast. The React/Angular are leading the frontend development so don't miss the quick learning tips shared in this blog from my own life experiences.
Why is React hard to learn? ›However, React is also difficult because it deals with advanced concepts like functional programming, compartmentalizing and passing state, using it with backend frameworks, and using it in conjunction with 3rd party software. If you want to learn React, the most important thing is to get started today and don't quit.
Is it worth learning React in 2023? ›Learning React in 2023 is a smart investment for developers looking to stay ahead of the curve in the tech industry. With its wide range of benefits, React is a versatile and powerful technology that can help developers achieve their goals.
Should I learn next or React first? ›Many developers find that learning React first is a good place to start before diving into learning next. js. React is a JavaScript library for building user interfaces, and it lets you create reusable components so that your code is easy to read and maintain.
How long does it take to be a React developer? ›Our Skillcrush Front End Developer + React JavaScript Course, for instance, teaches you JavaScript AND React JS (along with critical web developer skills like HTML, CSS, jQuery, and more), and is designed to be completed in 4 months by spending only an hour a day on the materials.
Is React easy to learn hard to master? ›Both HTML and CSS are integral to any web development project. If you have these skills already, then learning React should be a relatively straightforward process. It has its own unique set of challenges, but it is an excellent tool to have in order to start or further your career as a web developer.
Why React takes so long? ›How to identify problems generally Basically always when your React application is slow it's due to too many components re-rendering or too often. React have very useful Developer Tools, where you can profile your App and then find out which components are taking most of the time to render.
How fast can I learn React if I know JavaScript? ›If you've mastered HTML/CSS as well as JavaScript, learning React should take you no longer than a few weeks. React restructures the way you code, but fundamentally many of the concepts will be the same as what you're accustomed to.
Is Vue still relevant? ›
But the main focus for 2023, he said, will continue to be making Vue 3 stable. Even though Vue 3 became the new default last February, one year ago, Vue 2 is still being used by what You termed “legacy projects.” He noted that much of the adoption of Vue 3 has been by “new projects.”
Is Vue 3 easy to learn? ›Easy to learn – Vue. js is intuitive, making it easy to understand and great for beginners thanks to its documentation. All you need to know are the basics of HTML and JavaScript. Easy to scale - The application is easily scalable and can be used to perform a number of local tasks in large projects.
Which is easier to learn Vue or Angular? ›Vue is easier to learn, especially if you are shifting from React or Angular. Vue. js uses pure JavaScript, and the templates in Vue. js are written in HTML.
Does Netflix use Vue? ›Large-Scale Companies Using Vue
Adobe, Netflix, and Nintendo are some more well-known tech companies that use Vue.
There's a clear demand for Vue. js developers to help businesses use the framework in their tech stack. In fact, it's probably one of the most sought after skills in front-end and full stack developers.
When should I choose Vue? ›The reasons for choosing Vue over React are huge. While React is a JavaScript library for web development, Vue is a well-known progressive, open-source framework for creating complex user interfaces. React demands in-depth knowledge of JavaScript, while Vue JS is more geared toward beginning developers.
Which is the best programming language to learn in 2023? ›- Javascript.
- Python.
- Go.
- Java.
- Kotlin.
- PHP.
- C#
- Swift.
You're in the right place. Tickets are always cheaper when you buy online at this venue.
Is Svelte better than React? ›Svelte is a better choice for small to medium-sized projects with simpler components, where fast performance and a small codebase are essential. React is more suitable for large-scale projects with complex components and state management requirements, where a larger ecosystem of tools and libraries is needed.
Which big companies use Vue js? ›- Google. Google Careers.
- Zoom. Sign In - Zoom.
- Microsoft. Microsoft Edge Landing Page.
Is Amazon using react JS? ›
Amazon Clone is a web application developed using React and Firebase technologies. It is a project that replicates the core functionalities of Amazon.com, such as product browsing, searching, adding to cart, and checkout with a great UI experience.
Which is better with Django React or Vue? ›Django has context-driven template views and offers rapid page development directly from back-end model content. Vue. js has modern reactive components that provide powerful tools for building complex UIs within the rich JavaScript ecosystem.
Is Facebook using Vue? ›The fact that Facebook is one of many websites using Vue.
Is Google using Vue? ›Nintendo, Louis Vuitton, Adobe, BMW, Upwork, Alibaba, Gitlab, and Xiaomi are all VueJS users. Even Google built their Careers platform based on VueJS and not their native Angular framework, and Apple built their tutorial website with VueJS.
Is Vue performance better than React? ›Vue. js offers higher performance speed, and many programmers say it is easier to learn than React. js. Its multiple customization features are also a factor that draws developers to Vue.
Which backend is best for Vue? ›- Laravel. ...
- Firebase. ...
- WordPress. ...
- Heroku. ...
- Serverless. ...
- Django. ...
- DigitalOcean App Platform. DigitalOcean cloud computing platform could also be a good choice to develop Vue JS backends. ...
- Rails. If you are looking for a Ruby-based server-side framework for Vue JS, you should consider using Rails.
The recommended IDE setup is VSCode + the Vue Language Features (Volar) extension. The extension provides syntax highlighting, TypeScript support, and intellisense for template expressions and component props. Volar replaces Vetur, our previous official VSCode extension for Vue 2.
Should I learn Vue or React 2023? ›Overall, Vue enables faster project growth and performance, but React. js has a more robust ecosystem, more templates, and more functionality. This is why teams on smaller projects where performance is crucial choose Vue, whereas React is better suited to complex web platforms.
Should you use React or Vue? ›React vs Vue Summary
Both technologies offer great advantages. Being a library, React gives more control to its users, like the manual re-rendering control. It heavily employs the functional programming principles, indicated in the way the library handles the state and the communication between the components.
Overall, Vue might be the best choice if you're a newer developer and not as familiar with advanced JavaScript concepts, while React is quite well suited for experienced programmers and developers who have worked with object-oriented JavaScript, functional JavaScript, and similar concepts.
Should I learn Angular Vue or React? ›
A simple difference between these three is that React is a UI library, and Vue is a progressive framework. However, Angular is a full-fledged front-end framework. As per StackOverflow Survey 2022, React is the favourite framework of 40.14% of developers, Angular with 22.96%, and Vue with 18.97% of developers.
What is the biggest difference between Vue and React? ›The biggest difference between Vue and React. js is their approach to HTML: React is more scalable as it allows developers to write template code in JavaScript. Vue comes with less scalability as it uses regular-old HTML for templating.
What are the pros and cons between React and Vue? ›| Pros | Cons |
|---|---|
| Supports simple integration | Over-flexibility can jeopardize app development |
| Enjoys detailed documentation | Has limited resources |
| Modular and flexible architecture | Finding talent can be an issue |
| Allows bidirectional data flow | Community support is limited |
Learning React in 2023 is a smart investment for developers looking to stay ahead of the curve in the tech industry. With its wide range of benefits, React is a versatile and powerful technology that can help developers achieve their goals.
Which companies use Vue JS? ›- 3.1 Facebook. Facebook is one such reputable company that uses Vue. ...
- 3.2 Netflix. The successful movie streamlining platform was built using Vuejs, no two ways about it! ...
- 3.3 Nintendo. ...
- 3.4 Adobe. ...
- 3.5 Alibaba. ...
- 3.6 BMW. ...
- 3.7 EuroNews. ...
- 3.8 WizzAir.
Learning Curve
Vue is simpler to use than Angular since it has built-in app templates and allows for more flexibility. Furthermore, it is easy to integrate Angular or React-based mobility solutions into the Vue platform as Vue.