Okay. Hello, everyone. Today I will talk to you about migrating your old projects to,
of course, Python. No, just kidding. How many of you are using Python for work? Okay. We
are in the wrong room. We need to go downstairs. So I will talk to you about migration of your
Vue.js projects from version two to version three. And this is not working. Great. Okay. I am
Denny. I work as a full stack developer with JavaScript and Python. Not go. It's fake news.
And work as front-end developer also using, of course, Vue.js. And let's start with a quick
work through the Vue.js versions. They released the version 2.6 in 2029, a lot of time ago.
Then in 2020 they released version three, 3.1, 3.2, one year later. And then last year in February,
the version three became the new default. So when you install, when you run NPM install Vue.js,
you install the version three now. And then in July, 2022, they released version 2.7 in maintenance
mode. So they won't release. They should release a new version of Vue 2. And it will reach the end
of life in the end of this year. So 2023, it will be the end of Vue.js 2. Then let's do a
quick recap of options API. Options API are working with Vue.js 2 as well as Vue.js 3. And you simply
can define a data function. Inside that, you can return an object. And that object will be
exposed in the template as well as methods. So you can define functions. And that functions will
be exposed to the template as well. Then again, 2020, they officially announced Vue.js 3 with
composition API, script setup, experimental at that moment. But now it's official. And I know all
of you are sad about this. No Internet Explorer support. But now it's dead. So who cares? Then at
that time, I was like, oh, wow, nice. Let's drop Vue.js 2 and move everything to Vue.js 3. Well,
it wasn't so simple. So I started to check about the new script setup in composition API. So you
can define a setup function. And if you return a whole constants and function you define in there,
they will be automatically exposed to the template. So, well, not so clear, but nicer than before. So
you can compress constant and function of a single piece of logic in the component and then return
them. So if you want to use this in Vue.js 2.6, you need to install Vue composition API and use it
like this in this example, importing from composition API all ref computed and all functions. And you
can use a kind of setup script like in Vue.js 3. But spoiler alert, your test will break. Because,
well, easy fix, you need to use Vue composition API also in test files in Vue.js or in the local
Vue instance you are using in tests. So, well, easy fix for now. Then the best part about this is the
composition API plus script setup. So you can define a script setup in your single file component
and define in constants and functions. They will be automatically exposed to the template. So,
well, easy, clearer than the setup script, in my opinion. And everything is clear and needs.
So, another big news, 2022. They released Vue 2.7 with support for composition API and again,
partial but nice script setup. So, again, I was like, well, great, let's try Vue.js 2.7 before
everything else. And, yeah, it was really nice. Now it's working with basically all components and
you can look at the documentation for this. So you can upgrade your Vue.js dependency to 2.7 and
it should be it. It should work. And you can change in your 2.7 projects your script setup like
this. So removing the script, changing to script step and changing it like that. And if the component
is not too complicated, well, everything should work as expected and it will be ready for Vue.js 3.
Yes, now we can get commit push and deploy to production. Well, maybe not because if you are
using Vue Router, then it will break. So you need to use the new version of Vue Router, at least
3.6.5. And you need to import use route and use router like this. And instead of using this dot
route and router, you need to use route and route like this. Pretty much the same for Vuex store.
Well, not the same, but you need to import your store from your definition and use the store like
this. So store.state.propertyname and not this.store anymore. Then everything is great.
But another problem is tests. Well, tests will return a lot of errors because of this Vue.js
compatibility with Jest. It's not working with the version installed with the UCLI, that is 27,
because they released in September 2022 support for that, but just for Jest 29. So not a good
news. But we have a workaround for this. We can remove the usage of Vue CLI service and use Jest
directly. It's not so nice to do. We need to copy and paste the default Jest config file from the
plugin used by the UCLI plugin in our Jest config file. And then we need to update our
package JSON test script using Jest instead of the UCLI service test unit. And everything should
work kind of like before. And then we need to remove CLI plugin of Jest and install everything
the CLI plugin was installing automatically. But at version 29, like we can see over there,
fix a couple of deprecation warnings, like this one, just a minor change. And that's it. We are
ready to work with Vue.js 2.7 and test working. Now it's time to move to Vue.js 3. They released
an entire whole website for explaining new features, breaking change, recommendation,
and migration build. So tonight, before going to bed, I suggest you to take a look at this,
and maybe every night before going to bed, because it's really interesting. And let's skip
breaking changes, because there will be a lot, but it depends on the user usage. And let's have a
look at new recommendations. They're recommending to use new version, of course, of router,
depth tools, test duties, all of them with Vue.js 3 support. They have a new build toolchain. So
they are suggesting to use VIT instead of UCLI. And this is great, but not at the moment. And
they are also suggesting to use PINIA instead of VUEX. And VUEX is there to remain, but for now
they are suggesting a new default. So PINIA, move to PINIA. And a new ID support. So instead of using
VETUR, for example, for VS Code, you need to use VOLAR. So easy migrations. Well, depth tools,
just update your depth tooling from browser. In the support, same as before, just remove or keep
VETUR, but install VOLAR, and that's it. Then you, of course, have a lot of mandatory migrations,
for example, Vue.outer, new version compatible with Vue.js 3, VUEX, test duties, and of course,
third-party libraries, for example, Vue.t5, Quasar, ElementUI, before starting your task to
upgrade the Vue.js from 2 to 3, you need to check all your dependencies and check if they release
the version compatible with Vue.js 3. They should, because, well, one year from now. But it depends
on the library. So you need to check that first. For now, you can avoid to migrate from UCLI to
VIT and from Jest to VITEST, even if they are a great tool. If you just want to move from Vue.js 2
to Vue.js 3, for the moment, you can avoid to migrate them, but maybe in the future, you should
migrate to them because they are a great tool and they are the new default. And now it's time to
talk about the migration build. So they released a new dependency, Vue.compat, that is a build of
Vue.js 3 with a configurable Vue.2 compatible behavior. And it runs in Vue.js 2 mode by default.
And it will display a lot of runtime warnings about changes and deprecated features used in
your code. It has no limitations, for example, dependencies that rely on Vue.js 2 internal
APIs or undocumented behavior, for example, beautify. Same for usage of private properties
on VNodes, again, beautify, Puzzar, ElementUI. So if you are using server-side rendering in
production, well, you should complete the migration before releasing to production because, well,
it won't work anymore with Vue.compat. And so let's start our workflow of migration. So at first,
we need to upgrade our Vue.CLI using this command here, or just CLI Vue.upgrade. And if you are
using just a custom Webpack setup, you need to upgrade your Vue.loader to version 16. After
upgrading, you need to update and install your Vue.js instance and install Vue.compatibility
mode. You can drop, for the moment, Vue.template compiler. It's useful in tests, too, but for the
moment, we can remove it. And then we need to create an alias for Vue.js. So every time we
import from Vue stuff, we will import instead of Vue.js from Vue.compatibility mode. And again,
in our configuration file, we need to enable, of course, compatibility mode via the Vue.compiler
options using the version 2 for now. If you are using TypeScript, you need to upgrade your
U.S. typing file using this. Again, this is explaining in their website that you will read
tonight. And now you can run your code using npm run serve, for example. And if you see compile
time errors, you should fix them. And when they are fixed, they should be, for example,
your configuration issues or, well, small changes, you can switch your compatibility
configuration to use UJS3. And you can run the app. It should work. You can open your
DevTools, look at the console. And you might see a bunch of errors, a lot of them. And
now you need to focus on that errors and you need to fix them one by one. What I'm suggesting
is that you need to focus on fix your own source code errors and warnings, mainly, because
you will have a lot of errors and warnings from Vuex, router, and so on. But they are
from Vuex and from Vueouter, for example. And we will update them in a moment. So, first
of all, update your own code warnings. And then update a couple of things that won't
display warnings. For example, transition. If you are using transition, you need to find
and replace and replace them with this. And then, okay, working. You need to update your
application entry in your main.js file. So, instead of using new Vue, you can use create
app, because this is the Vue3 way. And for the moment, we can pass to create app, router,
store, and everything else. But we will remove them in a moment. So, now it's time to upgrade
Vuex to version 4. It is the version compatible with Vuejs 3. And we need to upgrade our Vuex
store definition using create store. And moving from an object in state to a function. This
is the main change, I think. And then, we can remove the parameter from create app and
use the app.use store instead. And in all components using the store, we need to change
to this. So, again, like before, instead of using this.store, we need to import the store
in this way for Vuejs 3 and use it in the store constant. Same for Vue router. So, we
need to upgrade to Vue router version 4. We need to upgrade our configuration, importing
create router and create WebEaster, because it's a new breaking change. And change them
in this way. Then, again, we can change our main.js, removing the router from create app
parameter and using app.use router. And change everything in the components. So, importing
user router and or user out and using them in the components. And after this, you should
pick off individual warnings if any remaining and fix them one by one. For example, upgrading
Vue T5, upgrading Element UI, Quasar or other dependencies. Just solve them one by one in
order to isolate your problem in a single way. After this, you can remove the migration
build and switch everything to the official Vuejs 3, just when all warnings are fixed.
And if you have dependencies that rely on Vuejs 2, you may not be able to do so, so
please check all of your dependencies before doing this last step. And that's it. Now it's
time to get commit, push and deploy to production. Well, maybe not. Maybe not. You should update
your Vue test setup, too. So, you need to remove Vue 2.js and move to Vue 3.js at version
29, hopefully. And update also Vue test to version 2, changing it in the just configuration
and everything should work. Apart from a couple of breaking changes in Vue test tutorials,
because now props data, when you force a prop into component mounting, you will have to
change from props data to props. There won't be a create local Vue anymore, because everything
is an isolated instance of Vue. You need to move mocks and stubs inside of global options.
And findall.at finally has been removed. So, now you can use findall like a proper array
finally. And for all other problems in your test, you should go to this website and look
at problems and warnings, for example, and solve them with their great documentation.
And that's it. Now we can be happy with our Vue.js 3 instance. So, as a quick recap, if
you want to stick to Vue 2.6, for example, you can use Vue Composition API so you can
test and try with Composition API in setup only. If you want to try the new Composition
API in script setup, you can upgrade to Vue.js 2.7, waiting for dependency to date their
compatibility with Vue.js 3. But if you need to longer support your code base, your projects,
then now it's the time to migrate from Vue.js 2 to Vue.js 3 properly. So, here's the link
to the feedback for Fosden, if you want to leave a feedback for this talk. And thank
you very much for being here.
Thank you. So, if you have a first question, please raise your hand higher than this because
I can't see it. Don't be shy. While you think if there is a seat that is empty, we aim for
this at the center. Please don't stay at the sides of the ails. Defrag the rows, please.
Questions, hands up. If you are a next speaker also, please come to the front now. We're
waiting for you. Hello. That was helpful. I haven't really got an app to upgrade. I did
one app in Vue.js 2. Can you hear me? Can you hear me? I did one app in Vue.js 2 years
ago, which I've left. Now I'm trying to learn Vue.js 3. That was really helpful. I'll use
your links because I'm mentally upgrading if not upgrading the code yet. So, not really
a question, but one of the problems I've found is finding examples that are only Vue.js 3
and getting mixed up with examples from Vue 2. Is there a good place to go? I mean, obviously
Vue.js.org is good, but like Stack Overflow is full of mixed examples and mess. Any help?
Of course, the official Vue.js 3 website contains a lot of examples of Composition API and Options
API. So you can switch, I think, in the on-page, your preference if you prefer Options API
or Composition API. And all examples in there will be switched to use that kind of option
or position. But other places, well, it depends. If you go, for example, to Vue.js website,
they have two versions of the website. So the old version, it's all about Vue.js 2,
so just Options API examples. And instead, the new version contains example about Options
API, but a smaller section of the website contains also Composition API example. I don't
know why they are not upgrading all of their website to Composition API because I think
it's great. But maybe it's just because now we are also, again, we are in a passage between
Vue.js 2 and Vue.js 3, so they prefer to leave Options API examples just to involve everyone
from Vue.js 2 to Vue.js 3. But I don't have an explanation of this.