Nowadays, there is a lot of frontend framework which can solve your problem (React, Svelte, Angular, …) so this article will focus on the strength of Vue JS but at the end I advise you to choose the framework you are the most comfortable with.
This is not a Vue tutorial and the code examples are here to illustrate what I am saying more than teaching you something about Vue itself.
Easy to learn
Something everyone will probably tell you when you think about Vue is that the learning curve is really good. It is known to be easy to learn with a clear documentation and a lot of short but complete tutorials. I often recommend using Vue for projects with people who are not familiar with JS frameworks already or students in web development.
The interesting thing to know as well is that once you know Vue, even if you do not like it, it will give you a really good base to learn another framework. Even though each framework have their own specificities, they all follow similar patterns.
Let’s come back to Vue here. You have 2 ways of working with Vue : the Options API and the Composition API. We will give examples here with the Options API.
Let’s have a look at a basic code :
Here you can easily understand what I am doing even if you have never used Vue JS but have a small JS background. The most interesting part is code splitting. All of your JS logic will target the template HTML and this HTML will be customized by the style block. Even in your JS part, the code is splitted between your functions, variables, reactive variables, …
Something which can be appreciated by developers is the style included in the component file as well and not separated in multiple CSS files like many people are doing with React. One difference with React as well is that Vue is not primarily using JSX (it is possible though). So if you do not like to put HTML next to your JS code, this will be the perfect solution for you.
With all these tools you might be able to write simple reactive templates in no time.
Vue JS has an amazing story and if you are interested in this part just have a look at the really nice documentary made by honeypot.
Even though it is younger, Vue has the highest number of stars on Github (189k) in front of React (176k) or Angular (77k). It has grown a lot during the past years and it is still growing.
With a large community, we have seen a lot of plugins being created to improve the Vue experience like VueX (to have a store like Redux) or Vue Router. These 2 plugins have also been combined to create a Vue framework called Nuxt which is simplifying even more the way of coding with Vue.
Of course, people might say that React for example is older and has more mature plugins but most of the time you do not feel it. I use Vue daily on huge projects and I have never felt any lack of plugins. I think that it is a problem for really specific case but that for the majority of developers, you will never miss anything you need.
If you have watched the documentary I linked above, you might have seen that Taylor Otwell (creator of Laravel) gave a big thumbs up to Vue and work closely with the Vue dev team for new feature. This fact gave a boost to Vue and helped it to grow. Taylor made this choice because he wanted to learn a frontend framework fast but React was too complicated for him compared to Vue (+1 to the first section about “Easy to learn”).
Some people are afraid of the lack of support over the years. The growing popularity and community are ensuring you that this technology is made to last for years.
So if you are a Laravel developer and you are looking for a good fit to your project, maybe Vue JS can be the solution you are looking for.
We know it, performance comparison is an abstract concept, considering that it will always depend on code quality. So a good React developer can easily release the same app as a Vue beginner with better performances because his code will be optimized. So this part can fluctuate and should not be taken as “Vue JS is definitely faster” but more like “It is possible to get better performances with this tool if I do it right”.
Since the release of Vue 3.2, the Vue dev team says proudly that their framework is faster than the other main frameworks (React and Angular). And it is true if you refer to benchmarks like bellow.
You can use vite for Vanilla, React or Svelte projects as well but it was made first for Vue and optimized for it.
Last but not least, earlier this year, petite vue has been released. This package is a lightweight version of Vue for small to middle-sized projects. So if you want to use the basic tools of Vue with better performances just try it out. It can be interesting for you if you do not need the all Vue ecosystem. Also it might be useful to start learning Vue or for developers coming from Svelte.
Different ways of coding
As I mentioned above, there are 2 ways of coding in Vue. We saw the Options API which is the perfect fit for web development beginners or for people learning a JS framework for the first time. But what about the others ? What if I come from a React background ? What if I am used to Vanilla and want to stay close to this way of coding ? No problem. With the release of Vue 3, the dev team gave you a second way of writing your JS code which is closer to React or Vanilla way of doing.
Here we will have a focus at the script code. Let’s have a look at the code example from above.
So as I said before you can see the code splitted in different sections which makes it easy to write and to organize for beginners. But now let’s have a look at the other way of doing with the Composition API .
Here you can see a different way of doing. the ref method might remind you a bit of the useState way of doing in React and the code itself look closer to Vanilla. This way of doing is better for experienced developers and will allow people coming from other frontend technologies not being confused after they make the switch.
To conclude this part, you are not forced to use JS or CSS with Vue of course. You can write Typescript and SASS as well in your components.
Vue is not better than any other framework. Each one has their own strength and you might choose another one after considering the job offers or your favorite way of working.
With Vue you can find a good tool to start with. Easy to learn, easy to use and easy to maintain, this technology might be the next one you will love using daily.
Vue will solve the majority of problems you can face especially if you need a SPA (Single Page Application) separated from your backend.