[00:00.000 --> 00:12.520]  Okay. Hello, everyone. Today I will talk to you about migrating your old projects to,
[00:12.520 --> 00:20.120]  of course, Python. No, just kidding. How many of you are using Python for work? Okay. We
[00:20.120 --> 00:26.280]  are in the wrong room. We need to go downstairs. So I will talk to you about migration of your
[00:26.280 --> 00:34.400]  Vue.js projects from version two to version three. And this is not working. Great. Okay. I am
[00:34.400 --> 00:41.520]  Denny. I work as a full stack developer with JavaScript and Python. Not go. It's fake news.
[00:41.520 --> 00:51.040]  And work as front-end developer also using, of course, Vue.js. And let's start with a quick
[00:51.040 --> 01:00.040]  work through the Vue.js versions. They released the version 2.6 in 2029, a lot of time ago.
[01:00.040 --> 01:09.760]  Then in 2020 they released version three, 3.1, 3.2, one year later. And then last year in February,
[01:09.760 --> 01:17.440]  the version three became the new default. So when you install, when you run NPM install Vue.js,
[01:17.440 --> 01:25.360]  you install the version three now. And then in July, 2022, they released version 2.7 in maintenance
[01:25.360 --> 01:34.800]  mode. So they won't release. They should release a new version of Vue 2. And it will reach the end
[01:34.800 --> 01:43.160]  of life in the end of this year. So 2023, it will be the end of Vue.js 2. Then let's do a
[01:43.160 --> 01:52.720]  quick recap of options API. Options API are working with Vue.js 2 as well as Vue.js 3. And you simply
[01:52.720 --> 01:59.560]  can define a data function. Inside that, you can return an object. And that object will be
[01:59.560 --> 02:06.720]  exposed in the template as well as methods. So you can define functions. And that functions will
[02:06.720 --> 02:17.000]  be exposed to the template as well. Then again, 2020, they officially announced Vue.js 3 with
[02:17.000 --> 02:23.640]  composition API, script setup, experimental at that moment. But now it's official. And I know all
[02:23.640 --> 02:32.440]  of you are sad about this. No Internet Explorer support. But now it's dead. So who cares? Then at
[02:32.440 --> 02:39.720]  that time, I was like, oh, wow, nice. Let's drop Vue.js 2 and move everything to Vue.js 3. Well,
[02:39.720 --> 02:50.240]  it wasn't so simple. So I started to check about the new script setup in composition API. So you
[02:50.240 --> 02:57.400]  can define a setup function. And if you return a whole constants and function you define in there,
[02:57.400 --> 03:06.520]  they will be automatically exposed to the template. So, well, not so clear, but nicer than before. So
[03:06.520 --> 03:13.160]  you can compress constant and function of a single piece of logic in the component and then return
[03:13.160 --> 03:23.480]  them. So if you want to use this in Vue.js 2.6, you need to install Vue composition API and use it
[03:23.480 --> 03:32.880]  like this in this example, importing from composition API all ref computed and all functions. And you
[03:32.880 --> 03:44.480]  can use a kind of setup script like in Vue.js 3. But spoiler alert, your test will break. Because,
[03:44.480 --> 03:53.840]  well, easy fix, you need to use Vue composition API also in test files in Vue.js or in the local
[03:53.840 --> 04:02.360]  Vue instance you are using in tests. So, well, easy fix for now. Then the best part about this is the
[04:02.360 --> 04:09.440]  composition API plus script setup. So you can define a script setup in your single file component
[04:09.440 --> 04:16.640]  and define in constants and functions. They will be automatically exposed to the template. So,
[04:16.640 --> 04:25.480]  well, easy, clearer than the setup script, in my opinion. And everything is clear and needs.
[04:25.480 --> 04:36.960]  So, another big news, 2022. They released Vue 2.7 with support for composition API and again,
[04:36.960 --> 04:46.760]  partial but nice script setup. So, again, I was like, well, great, let's try Vue.js 2.7 before
[04:46.760 --> 04:54.240]  everything else. And, yeah, it was really nice. Now it's working with basically all components and
[04:54.240 --> 05:03.200]  you can look at the documentation for this. So you can upgrade your Vue.js dependency to 2.7 and
[05:03.200 --> 05:14.960]  it should be it. It should work. And you can change in your 2.7 projects your script setup like
[05:14.960 --> 05:21.880]  this. So removing the script, changing to script step and changing it like that. And if the component
[05:21.880 --> 05:30.960]  is not too complicated, well, everything should work as expected and it will be ready for Vue.js 3.
[05:30.960 --> 05:41.760]  Yes, now we can get commit push and deploy to production. Well, maybe not because if you are
[05:41.760 --> 05:49.960]  using Vue Router, then it will break. So you need to use the new version of Vue Router, at least
[05:49.960 --> 05:58.600]  3.6.5. And you need to import use route and use router like this. And instead of using this dot
[05:58.600 --> 06:09.720]  route and router, you need to use route and route like this. Pretty much the same for Vuex store.
[06:09.720 --> 06:17.880]  Well, not the same, but you need to import your store from your definition and use the store like
[06:17.880 --> 06:28.360]  this. So store.state.propertyname and not this.store anymore. Then everything is great.
[06:28.360 --> 06:44.560]  But another problem is tests. Well, tests will return a lot of errors because of this Vue.js
[06:44.560 --> 06:54.560]  compatibility with Jest. It's not working with the version installed with the UCLI, that is 27,
[06:54.560 --> 07:08.920]  because they released in September 2022 support for that, but just for Jest 29. So not a good
[07:08.920 --> 07:17.560]  news. But we have a workaround for this. We can remove the usage of Vue CLI service and use Jest
[07:17.560 --> 07:29.720]  directly. It's not so nice to do. We need to copy and paste the default Jest config file from the
[07:29.720 --> 07:38.920]  plugin used by the UCLI plugin in our Jest config file. And then we need to update our
[07:38.920 --> 07:46.080]  package JSON test script using Jest instead of the UCLI service test unit. And everything should
[07:46.080 --> 07:57.600]  work kind of like before. And then we need to remove CLI plugin of Jest and install everything
[07:57.600 --> 08:05.760]  the CLI plugin was installing automatically. But at version 29, like we can see over there,
[08:05.760 --> 08:14.600]  fix a couple of deprecation warnings, like this one, just a minor change. And that's it. We are
[08:14.600 --> 08:27.200]  ready to work with Vue.js 2.7 and test working. Now it's time to move to Vue.js 3. They released
[08:27.200 --> 08:34.720]  an entire whole website for explaining new features, breaking change, recommendation,
[08:34.720 --> 08:42.840]  and migration build. So tonight, before going to bed, I suggest you to take a look at this,
[08:42.840 --> 08:50.440]  and maybe every night before going to bed, because it's really interesting. And let's skip
[08:50.440 --> 09:00.520]  breaking changes, because there will be a lot, but it depends on the user usage. And let's have a
[09:00.520 --> 09:06.440]  look at new recommendations. They're recommending to use new version, of course, of router,
[09:06.440 --> 09:15.280]  depth tools, test duties, all of them with Vue.js 3 support. They have a new build toolchain. So
[09:15.280 --> 09:23.960]  they are suggesting to use VIT instead of UCLI. And this is great, but not at the moment. And
[09:23.960 --> 09:33.520]  they are also suggesting to use PINIA instead of VUEX. And VUEX is there to remain, but for now
[09:33.520 --> 09:40.240]  they are suggesting a new default. So PINIA, move to PINIA. And a new ID support. So instead of using
[09:40.240 --> 09:47.680]  VETUR, for example, for VS Code, you need to use VOLAR. So easy migrations. Well, depth tools,
[09:47.680 --> 09:56.440]  just update your depth tooling from browser. In the support, same as before, just remove or keep
[09:56.440 --> 10:05.160]  VETUR, but install VOLAR, and that's it. Then you, of course, have a lot of mandatory migrations,
[10:05.160 --> 10:13.760]  for example, Vue.outer, new version compatible with Vue.js 3, VUEX, test duties, and of course,
[10:13.760 --> 10:22.000]  third-party libraries, for example, Vue.t5, Quasar, ElementUI, before starting your task to
[10:22.000 --> 10:30.120]  upgrade the Vue.js from 2 to 3, you need to check all your dependencies and check if they release
[10:30.120 --> 10:40.400]  the version compatible with Vue.js 3. They should, because, well, one year from now. But it depends
[10:40.400 --> 10:50.920]  on the library. So you need to check that first. For now, you can avoid to migrate from UCLI to
[10:50.920 --> 10:59.880]  VIT and from Jest to VITEST, even if they are a great tool. If you just want to move from Vue.js 2
[10:59.880 --> 11:07.080]  to Vue.js 3, for the moment, you can avoid to migrate them, but maybe in the future, you should
[11:07.080 --> 11:14.360]  migrate to them because they are a great tool and they are the new default. And now it's time to
[11:14.360 --> 11:23.000]  talk about the migration build. So they released a new dependency, Vue.compat, that is a build of
[11:23.000 --> 11:31.760]  Vue.js 3 with a configurable Vue.2 compatible behavior. And it runs in Vue.js 2 mode by default.
[11:31.760 --> 11:44.320]  And it will display a lot of runtime warnings about changes and deprecated features used in
[11:44.320 --> 11:54.320]  your code. It has no limitations, for example, dependencies that rely on Vue.js 2 internal
[11:54.320 --> 12:03.000]  APIs or undocumented behavior, for example, beautify. Same for usage of private properties
[12:03.000 --> 12:17.280]  on VNodes, again, beautify, Puzzar, ElementUI. So if you are using server-side rendering in
[12:17.280 --> 12:24.880]  production, well, you should complete the migration before releasing to production because, well,
[12:24.880 --> 12:35.360]  it won't work anymore with Vue.compat. And so let's start our workflow of migration. So at first,
[12:35.360 --> 12:44.720]  we need to upgrade our Vue.CLI using this command here, or just CLI Vue.upgrade. And if you are
[12:44.720 --> 12:52.880]  using just a custom Webpack setup, you need to upgrade your Vue.loader to version 16. After
[12:52.880 --> 12:59.720]  upgrading, you need to update and install your Vue.js instance and install Vue.compatibility
[12:59.720 --> 13:07.040]  mode. You can drop, for the moment, Vue.template compiler. It's useful in tests, too, but for the
[13:07.040 --> 13:16.800]  moment, we can remove it. And then we need to create an alias for Vue.js. So every time we
[13:16.800 --> 13:26.600]  import from Vue stuff, we will import instead of Vue.js from Vue.compatibility mode. And again,
[13:26.600 --> 13:34.440]  in our configuration file, we need to enable, of course, compatibility mode via the Vue.compiler
[13:34.440 --> 13:45.280]  options using the version 2 for now. If you are using TypeScript, you need to upgrade your
[13:45.280 --> 13:53.320]  U.S. typing file using this. Again, this is explaining in their website that you will read
[13:53.320 --> 14:05.440]  tonight. And now you can run your code using npm run serve, for example. And if you see compile
[14:05.440 --> 14:13.360]  time errors, you should fix them. And when they are fixed, they should be, for example,
[14:13.360 --> 14:20.400]  your configuration issues or, well, small changes, you can switch your compatibility
[14:20.400 --> 14:29.600]  configuration to use UJS3. And you can run the app. It should work. You can open your
[14:29.600 --> 14:40.920]  DevTools, look at the console. And you might see a bunch of errors, a lot of them. And
[14:40.920 --> 14:48.160]  now you need to focus on that errors and you need to fix them one by one. What I'm suggesting
[14:48.160 --> 14:56.240]  is that you need to focus on fix your own source code errors and warnings, mainly, because
[14:56.240 --> 15:05.520]  you will have a lot of errors and warnings from Vuex, router, and so on. But they are
[15:05.520 --> 15:12.120]  from Vuex and from Vueouter, for example. And we will update them in a moment. So, first
[15:12.120 --> 15:22.000]  of all, update your own code warnings. And then update a couple of things that won't
[15:22.000 --> 15:27.960]  display warnings. For example, transition. If you are using transition, you need to find
[15:27.960 --> 15:39.440]  and replace and replace them with this. And then, okay, working. You need to update your
[15:39.440 --> 15:47.760]  application entry in your main.js file. So, instead of using new Vue, you can use create
[15:47.760 --> 15:56.240]  app, because this is the Vue3 way. And for the moment, we can pass to create app, router,
[15:56.240 --> 16:05.120]  store, and everything else. But we will remove them in a moment. So, now it's time to upgrade
[16:05.120 --> 16:15.240]  Vuex to version 4. It is the version compatible with Vuejs 3. And we need to upgrade our Vuex
[16:15.240 --> 16:23.760]  store definition using create store. And moving from an object in state to a function. This
[16:23.760 --> 16:33.040]  is the main change, I think. And then, we can remove the parameter from create app and
[16:33.040 --> 16:43.200]  use the app.use store instead. And in all components using the store, we need to change
[16:43.200 --> 16:49.880]  to this. So, again, like before, instead of using this.store, we need to import the store
[16:49.880 --> 17:00.320]  in this way for Vuejs 3 and use it in the store constant. Same for Vue router. So, we
[17:00.320 --> 17:08.160]  need to upgrade to Vue router version 4. We need to upgrade our configuration, importing
[17:08.160 --> 17:15.000]  create router and create WebEaster, because it's a new breaking change. And change them
[17:15.000 --> 17:23.360]  in this way. Then, again, we can change our main.js, removing the router from create app
[17:23.360 --> 17:31.160]  parameter and using app.use router. And change everything in the components. So, importing
[17:31.160 --> 17:39.240]  user router and or user out and using them in the components. And after this, you should
[17:39.240 --> 17:46.400]  pick off individual warnings if any remaining and fix them one by one. For example, upgrading
[17:46.400 --> 17:54.440]  Vue T5, upgrading Element UI, Quasar or other dependencies. Just solve them one by one in
[17:54.440 --> 18:04.040]  order to isolate your problem in a single way. After this, you can remove the migration
[18:04.040 --> 18:12.360]  build and switch everything to the official Vuejs 3, just when all warnings are fixed.
[18:12.360 --> 18:19.480]  And if you have dependencies that rely on Vuejs 2, you may not be able to do so, so
[18:19.480 --> 18:28.040]  please check all of your dependencies before doing this last step. And that's it. Now it's
[18:28.040 --> 18:36.280]  time to get commit, push and deploy to production. Well, maybe not. Maybe not. You should update
[18:36.280 --> 18:47.480]  your Vue test setup, too. So, you need to remove Vue 2.js and move to Vue 3.js at version
[18:47.480 --> 18:57.920]  29, hopefully. And update also Vue test to version 2, changing it in the just configuration
[18:57.920 --> 19:05.360]  and everything should work. Apart from a couple of breaking changes in Vue test tutorials,
[19:05.360 --> 19:12.160]  because now props data, when you force a prop into component mounting, you will have to
[19:12.160 --> 19:19.440]  change from props data to props. There won't be a create local Vue anymore, because everything
[19:19.440 --> 19:27.880]  is an isolated instance of Vue. You need to move mocks and stubs inside of global options.
[19:27.880 --> 19:35.920]  And findall.at finally has been removed. So, now you can use findall like a proper array
[19:35.920 --> 19:45.400]  finally. And for all other problems in your test, you should go to this website and look
[19:45.400 --> 19:55.760]  at problems and warnings, for example, and solve them with their great documentation.
[19:55.760 --> 20:04.480]  And that's it. Now we can be happy with our Vue.js 3 instance. So, as a quick recap, if
[20:04.480 --> 20:12.680]  you want to stick to Vue 2.6, for example, you can use Vue Composition API so you can
[20:12.680 --> 20:22.320]  test and try with Composition API in setup only. If you want to try the new Composition
[20:22.320 --> 20:31.760]  API in script setup, you can upgrade to Vue.js 2.7, waiting for dependency to date their
[20:31.760 --> 20:40.000]  compatibility with Vue.js 3. But if you need to longer support your code base, your projects,
[20:40.000 --> 20:48.240]  then now it's the time to migrate from Vue.js 2 to Vue.js 3 properly. So, here's the link
[20:48.240 --> 20:55.600]  to the feedback for Fosden, if you want to leave a feedback for this talk. And thank
[20:55.600 --> 21:04.720]  you very much for being here.
[21:04.720 --> 21:11.840]  Thank you. So, if you have a first question, please raise your hand higher than this because
[21:11.840 --> 21:27.760]  I can't see it. Don't be shy. While you think if there is a seat that is empty, we aim for
[21:27.760 --> 21:41.000]  this at the center. Please don't stay at the sides of the ails. Defrag the rows, please.
[21:41.000 --> 21:52.760]  Questions, hands up. If you are a next speaker also, please come to the front now. We're
[21:52.760 --> 22:04.400]  waiting for you. Hello. That was helpful. I haven't really got an app to upgrade. I did
[22:04.400 --> 22:15.640]  one app in Vue.js 2. Can you hear me? Can you hear me? I did one app in Vue.js 2 years
[22:15.640 --> 22:23.400]  ago, which I've left. Now I'm trying to learn Vue.js 3. That was really helpful. I'll use
[22:23.400 --> 22:31.440]  your links because I'm mentally upgrading if not upgrading the code yet. So, not really
[22:31.440 --> 22:39.720]  a question, but one of the problems I've found is finding examples that are only Vue.js 3
[22:39.720 --> 22:47.400]  and getting mixed up with examples from Vue 2. Is there a good place to go? I mean, obviously
[22:47.400 --> 22:56.320]  Vue.js.org is good, but like Stack Overflow is full of mixed examples and mess. Any help?
[22:56.320 --> 23:05.720]  Of course, the official Vue.js 3 website contains a lot of examples of Composition API and Options
[23:05.720 --> 23:13.720]  API. So you can switch, I think, in the on-page, your preference if you prefer Options API
[23:13.720 --> 23:21.760]  or Composition API. And all examples in there will be switched to use that kind of option
[23:21.760 --> 23:30.640]  or position. But other places, well, it depends. If you go, for example, to Vue.js website,
[23:30.640 --> 23:36.840]  they have two versions of the website. So the old version, it's all about Vue.js 2,
[23:36.840 --> 23:45.200]  so just Options API examples. And instead, the new version contains example about Options
[23:45.200 --> 23:52.240]  API, but a smaller section of the website contains also Composition API example. I don't
[23:52.240 --> 23:59.880]  know why they are not upgrading all of their website to Composition API because I think
[23:59.880 --> 24:08.680]  it's great. But maybe it's just because now we are also, again, we are in a passage between
[24:08.680 --> 24:17.400]  Vue.js 2 and Vue.js 3, so they prefer to leave Options API examples just to involve everyone
[24:17.400 --> 24:31.120]  from Vue.js 2 to Vue.js 3. But I don't have an explanation of this.