Vue 2 Or 3

Posted on  by admin

With the speed of change that is currently taking place in the programming world, with a framework and even language versions being updated much more regularly than before, many programmers who are approaching these frameworks and languages are now asking the question of whether or not it is worth the time to learn the soon to be overtaken framework or language in favor of the new one.

In this post, we will attempt to answer the question, using the example of the upcoming VueJS 3 framework update, of whether or not it is better as a newbie to learn the current version or to simply skip over it and learn the new version of the framework.

What’s your situation?

When Learning The Old Framework First Is Better. When it comes to making a decision about what technology is worth learning, the primary concern should be whether or not that technology is still being widely used, as this is what, ultimately, gives knowing a technology most of its leverage. When a technology, in this case, the VueJS 2 version of the framework, is in wide enough use, there is active attention focused on it. Therefore the benefits of an ecosystem such as support, plugins, available jobs and just generally having people around who can help or answer your questions when you run into a problem (such as on StackOverflow) are all there. The level of usage that a technology such as a web framework has is largely correlated with where that technology sits in between its previous update and its upcoming version.

What we'll cover in this article

The longer a version of a technology has been around, without an update, the higher its relative use in comparison to older versions. Because it takes a while for the active attention that is focused on the more widely used version to transfer over to a newer update, when the newer update is yet to be released (as is the case with Vue 2 in relation to Vue 3) or has only been released recently, it makes the most sense to learn the current version while waiting for the upcoming update.

What doing this does is give you a firm knowledge base in the technology, from which you may later build and add to once the new version is released, as well as a firm grasp of the ecosystem that you’ll be participating in once the new version is released. When Learning The New Framework And Ignoring The Old Framework Is Better.

Why should I migrate to Vue3?

I think that most times it is always going to be advantageous to know the previous versions of languages and frameworks when new ones are emerging onto the scene, if only at a basic level. This because knowing the previous framework, helps in preparing your brain for the new one. It gives you, as we’ve mentioned above, a knowledge structure to build on top of. But are there times when spending the time to learn the framework version will do more harm than good. When it is simply better to just jump in and start learning the new framework version? I think there is one case where this is true. And this is when for one reason or another, whether that reason is a security vulnerability or simply a deep philosophical change in terms of code and structure/way of operating, the previous framework version is being deprecated.

Should I learn Vue 2 or Vue 3 in 2021?

In this case, if you have had no previous exposure to the framework before, then it is probably better to become familiar with the new version at the outset, and then whenever necessary, simply fill your knowledge gaps from the old version over time.

  • Why You Should Start With Vue 2. The fact is, even when we consider that there may be times when learning the new framework version first is your best bet, we can now see that in the vast majority of cases, starting with the previous framework and then transitioning from that into the new framework is your best bet.
  • That’s why in this article, I recommend starting with Vue 2.
  • It is still very much widely used, has no serious security vulnerabilities and is similar enough to the new Vue 3 framework version that it can easily serve as a foundational ‘knowledge structure’ to build on top of.

What To Expect From Vue 3. Before we wrap up this article, let’s quickly go over what we can expect from the upcoming Vue 3 version. New features will include:. Smaller Size – Vue 3 is comparatively smaller compared to Vue 2, almost half as big as the previous version at runtime. Composition API – while this is currently available as a Vue 2 plugin, the Composition API in Vue 3 will allow you to have much more flexibility within your vue component’s code,.

Speed – overall Vue 3 is offering a lot more in terms of speed. As this is currently the direction that the web is going, this is probably the biggest new feature. And much more not mentioned here. But that you can find out here. It’s always a tough question knowing what to learn when it comes to technology, the fact that we are right now in the most prolific period that we’ve ever seen makes it that much harder.

What is Vue.js?

But I believe that with the considerations above, namely to look at how prevalent a piece of technology is in terms of the amount of other people’s attention that is focused on it, determines the amount to which you should want to learn that technology if you want to be effective.

Vue.js is a progressive JavaScript frontend framework written by Evan You.

  • It's one of the most powerful and easy to learn frameworks, and it has over 9.5 million downloads per month.
  • In September 2020, Vue 3 core was released.
  • The new Vue.js release introduces some cool new features but also some breaking changes.
  • As the tech industry evolves, so do libraries, languages, and frameworks.
  • At each release, bugs are fixed and new features introduced.
  • And often with any major release, your workflow is enhanced.

New features can give you the opportunity to do things that were tedious before. Vue 3 is still relatively new.

You don't have to migrate all your projects over, but as time goes by, support for version 2 might end. Because of this it's a good idea to know the steps you'll need to take to migrate your projects.

In this guide, I'll walk you through the basic steps you will need to follow to approach the migration.

We will take a simple project and migrate it to Vue 3. The project that we will use is intentionally simple, and so anyone can follow along. The more complex your project is, the more carefully you'll want to plan for the migration.

When is the Vue 3 Masterclass coming?

The new Vue.js version does come with quite a few breaking changes and new features. Also, popular libraries like Vue Router have been updated to support the new Vue version. If you already know Vue 2, the basics are quite the same. But before you can migrate a project to Vue 3 there are changes you need to take into account.

Depending on the size of the project you want to migrate, make sure to consider all the changes introduced with the new release so that your application will still work after the migration. For this tutorial, I'll keep things simple and show you how to migrate a Vue.js project that currently uses the Vue 2 CDN. I'm taking the project from the book I wrote for freeCodeCamp, which you can find here.

What you need to follow along with this article

In that project we used Vue Router, so we will also look at Vue router's changes in this article. To follow along you need a basic knowledge of Vue.js and Vue Router. If you don't have that. then I suggest you start by checking out my book available on freeCodeCamp. You can also find the playlist with the full 8 hour course available for free on my YouTube channel. This tutorial is organised into three main chapters. First, we will have a look at the changes in Vue.js v3.x then a quick overview of Vue Router v4.x.

And finally, we will start planning the migration of a real project.

Vue v3.x Overview

Vue v3.x overviewbreaking changes. breaking changes. Vue Router v4.x overviewbreaking changes. breaking changes. Portfolio Project MigrationClone the RepoUpdate CDN scriptsUpdate Vue instanceUpdate Vue Router instance. Update CDN scripts. Update Vue instance. Update Vue Router instance. Here's the video version of this article if you want to follow along there:. Watching the video will help you reinforce your learning while reading the steps below.

  • Conclusion

  • Bonus: Why does it take time for the ecosystem to be ready for Vue 3?

  • How to Migrate a Portfolio Project from Vue 2 to Vue 3

  • Vue Router v4.x Overview

  • But… they’re very similar

  • Intro

  • Vue V3.x Breaking Changes

Here you can find the final repository for the project. Vue 3 introduces a few new features and a bunch of breaking changes.

Vue Router 4 Changes