Vue 3

[kinow]

Updated Jan 2023

Placeholder to keep track of information for upgrading to Vue 3. https://v3-migration.vuejs.org/breaking-changes/

Progress

Already done with Vue 2

• Remove event bus (replaced with mitt mutations in the tree view #504)
• Vuex v4 - https://vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#installation-process
• vue-router v4 - https://router.vuejs.org/guide/migration/index.html#removed-star-or-catch-all-routes
• vue-i18n v9 - https://vue-i18n.intlify.dev/guide/migration/breaking.html
• Vue Dev Utils (browser extension) - vue 3/ vue next vuejs/devtools-v6#1199 & the next branch

Vue 3

• Fix Lumino component
• Re-implement resizable drawer (can't really use Vuetify navigation drawer anymore as border element has gone)
• Fix missing data when switching workflows (Fix bug where subscriptions would not update on query change #1249)
• Replace vue-meta with @unhead/vue (provision for setting page title etc.)
• Fix font size selection
• Update cypress e2e tests
• Update cypress component tests
• Update unit tests
• Ensure coverage is measured (code instrumented)
• Address Babel transcompilation (Browser compatibility post-Vue-3 #1270)
• Vue compatibility build -> normal build
• vue cli -> vite #1215

Vuetify 3

• Vuetify v3.1 - https://next.vuetifyjs.com/en/getting-started/upgrade-guide/
• Data Table out of "labs" and production-ready
• Fix mutations menu
• Fix mutation edit form
• Fix dropdown selects (e.g. in task filtering)
• Remove all obsolete Vuetify utility components (v-list-item-content etc.)
• Fix all styling
• Tree-shaking of Vuetify library (Should be handled by webpack-plugin-vuetify or whatever, but not working for some reason. Update: looks like this can only be solved by moving to vite?)
• Skeleton Loader Bring back skeleton loaders #1272

Additional context

We can plan a bit ahead, and try to make the code as easy to be ported as possible. For Vue 4, it will probably force more users to migrate to TypeScript. So adopting TypeScript earlier than that might be a good idea. A project doesn't need to be written only in ES6, or in TS.

Pinia is now the preferred Vue store module (replacing Vuex). However this can be tackled later.

[kinow]

The roadmap for Vue 3 has that it should be released at the Q1 2020: https://github.com/vuejs/vue/projects/6

Vue 3 should be the stable version until 2021 or 2022 I think. I guess Vue 4 should be an issue in 2022, so we should have plenty of time. Thankfully they are not repeating the mess of Angular 2 going to Angular 4 and in a short time reaching version 6/7, which caused issues to several developers (including some at NIWA): https://www.infoworld.com/article/3150716/forget-angular-3-google-skips-straight-to-angular-4.html

[kinow]

Beta version number 20 is out I think, with target date set to August if I recall correctly. Their docs are the number one source of information for upcoming changes. I think the second best place would probably be this course: https://www.vuemastery.com/courses/from-vue2-to-vue3, which should get updated over the next months.

[kinow]

Vue 3 is now RC (release candidate) after some 20 beta versions 🎉

vuejs/rfcs#189

[kinow]

From the Hacker News thread: https://news.ycombinator.com/item?id=23878029

Vue 3 introduces breaking changes, e.g. filters and event bus ($emit, $on, $off) are removed as far as I know. The Vue documentation team will release a migration guide when Vue 3 is released.

Which we use

From another comment:

It's mostly backward compatible, it depends on how complex your project is and what dependencies you rely on. Simple projects should be fairly straightforward - If you rely on the EventBus install mitt instead, will take you maybe 10 mins to replace. Rewriting your filters so they are plain methods instead should also be straightforward.

So much simpler than Python 2 to Python 3, but will have to happen before Vue 4 (which will remove deprecated API). Probably for Cylc 8.1 or Cylc 9. Unless we have a break between tasks (e.g. waiting for reviews, waiting for Python changes, etc).

[kinow]

Reading the Vue newsletter by Revue this morning, filled with articles about Vue 3. I noticed some libraries and other components of Vue are also getting ready for Vue 3. Looks like they will release it soon. Below are the links I've read while waiting for Conda Forge to sync. Will update the first comment with checks for what needs to be done later.

• Be prepared to migrate your Vue app to Vue 3
• How to test your library for vue 2 and vue-next
• You Might Not Need Vuex with Vue 3 ⭐ will read it again later, with more calm. In the beginning I found Vuex like a great solution, but with time the more I am able to just pass props down and events up, and use Vue reactivity, the simpler the solution looks (and writing tests is also heaps easier)

[kinow]

New version of Vue CLI now supports Vue 3: https://github.com/vuejs/vue-cli/releases/tag/v4.5.0

[kinow]

Watched the VueMastery Vue 3 Composition API training this weekend (it was free until Sunday). They talked about several things that we will have to use later, when updating to Vue 3. But also two other features that might be useful for Cylc UI.

Suspense

It is a Vue 3 component. It works by having two templates passed, one <template #default />, and another <template #fallback />. It works similarly to the Skeleton Loader of Vuetify. If the component has promises executing asynchronously, the Suspense will show fallback until all promises have been resolved.

While Skeleton loaders give us a similar behaviour, it gets tricky to keep track of what is loading. You need the views, services, and components to collaborate and tell each other (via events, Vuex, or passing down props).

With Suspense you can just wrap code in Promises and let Vue take care of the hard work. I guess Vuetify might update their components, or release new components later that will simplify the loading state per-component, and global in the application.

Teleport

The Teleport allows components to move UI template to parts of the HTML that are outside of the application main component. In our case, we have <div id="app" /> at the top of our application.

In the Workflow view, we use the Lumino component which creates widgets in another part of the HTML, wraps Vue components in these widgets, and does a document.appendChild(vueElement), effectively moving the location of the Vue HTML element.

While this works, using the <teleport to="#lumino"><tree-component ... /><graph-component /></teleport> would be simpler, and we wouldn't have to handle keeping HTML DOM and Vue Virtual DOM synced.

[kinow]

Vue 3.0.0 is out https://github.com/vuejs/vue-next/releases/tag/v3.0.0

We do not need to update immediately. The jump from 2 to 3 should be much much easier than Python 2 to 3. The dev team did an amazing job of keeping other devs aware what was going to change, and updated docs along the way.

Very few things must be done in order to update to v3. Most are recommendations, like removing the Event Bus, things deprecated in Vue 3, to be removed in Vue 4.

I guess Vue 4 should come either by the end of next year, or somewhere around Q3 2022. So we have time to start moving to Vue 3, and take note of the deprecation warnings. If we manage to eliminate all the deprecation warnings while using Vue 3, updating to Vue 4 should—in theory—be simple too.

[kinow]

Thanks to NZ timezone, I was able to watch the Vue 2 to Vue 3 training that was free over the weekend in the US: https://www.vuemastery.com/courses/from-vue2-to-vue3/from-vue-2-to-vue-3/ 🤓

[kinow]

Vue 3.0.1 is out with over 20+ bug fixes 🐛 👀 https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md

[kinow]

And now 3.0.2 (their release pace is quite fast), another 10 bug fixes 🪲 https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md

[kinow]

A blog post with some issues found by a dev migrating to Vue 3 (might be useful later):

• My top 3 problems switching to Vue 3
• The reddit thread with more comments

[kinow]

Vue 3 drops event buses. We removed it in the tree view, where we could instead pass the $listeners from parent to children, this way avoiding the need of a global event bus.

For the mutations work at #504 that's not as simple, as the menu is elsewhere, out of the component hierarchy.

Instead I'm using mitt, which is recommended in Vue3 migration docs. GitLab guys also did a great job documenting how they would migrate their code base: https://docs.gitlab.com/ee/development/fe_guide/vue3_migration.html

Might be useful for us too 👍

[kinow]

Vue Router 4 was released, and it supports Vue 3. Vuetify still in the works.

https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0

[kinow]

Not directly related to Vue 3, but by the time we migrate to Vue 3 vue-cli could have been replaced by vite.

https://github.com/vitejs/vite

French for fast, pronounced "veet" I think? Evan You is an author there too, in the vitejs/vite repo. Not sure how that works regarding babel/webpack… but hopefully they will add a migration guide too.

[kinow]

Could we get a devtools published that works w/ vue3. If we're having backwards compatibility issues, could we get a separate extension until they can be done together. e.g. vue devtools next?

Wrong repo.??

[kinow]

Vuetify announced an alpha release https://next.vuetifyjs.com/en/getting-started/installation/. Once we have a final release after these alpha/beta/RC/etc, we should be ready to start working on Vue 3 for Cylc UI.

[kinow]

Another resource: https://www.vuemastery.com/blog/vue-3-migration-build/

[kinow]

BTW, I ended up in a similar situation in an Apache project. In Apache Jena we rewrote the old BackboneJS in VueJS, with BootstrapVue. Turns out they didn't upgrade to Vue 3. Vuetify at least had a timeline, but none for BootstrapVue 😅

I rewrote the Bootstrap Vue into pure Bootstrap CSS and components, but found another blocker: vuejs/router#454

The issue arises when you have a mixin with navigation guards, which is used in Cylc UI by a few mixins, e.g.

cylc-ui/src/mixins/subscriptionView.js

Lines 35 to 43 in 8d64d33

	beforeRouteEnter (to, from, next) {
	next(vm => {
	vm.$workflowService.startSubscriptions()
	})
	},
	beforeRouteUpdate (to, from, next) {
	next(vm => {
	vm.$workflowService.startSubscriptions()
	})

.

I think Vuetify is still working on the Vue 3 compatibility (e.g. vuetifyjs/vuetify#14984 (comment)). But even if the Vuetify dependency is removed, we would still have the vue-router issue above as a blocker for Cylc UI 👍

[MetRonnie]

3.1.0 is out now.

However, I have found another missing component, v-skeleton-loader, that is not coming until 3.2: vuetifyjs/vuetify#13504. Not a hugely important one though, could be temporarily replaced with a more basic thing in the mean time.

[kinow]

https://mobile.twitter.com/zeroskillz/status/1611745149788524544 (Vuetify author.)

And the reddit thread: https://www.reddit.com/r/vuejs/comments/105vd1n/it_was_a_good_run/

[kinow]

I re-wrote the Jena BackBone.js app in Vue.js about the time I left NIWA. Recently migrated to Vue 3, and today I finished replacing webpack by vite. I forgot to measure the size of the artefacts (not important in Jena, really), but the build is faster and the configuration is simpler & number of dependencies is smaller. Vite is also recommended/adopted by Vue 3 (and gaining a lot of users from React, ThreeJS, etc): apache/jena#1718 👍

[oliver-sanders]

Raised an issue to track this, @MetRonnie is making progress with the Vue 3 migration 👍.

[MetRonnie]

I've updated the OP with the current progress (not yet opened a PR)

[kinow]

A FOSDEM talk giving a general overview of the 2 -> 3 migration progress, good overview of what happened, changed, etc.

“Is it time to migrate to Vue 3? TLDR: it depends”
https://fosdem.org/2023/schedule/event/vue3/

[MetRonnie]

On the branch I have replaced vue-meta with @unhead/vue. This is because vue-meta's support for Vue 3 is still in a alpha state and development has ground to a halt since 2021

[MetRonnie]

@kinow The PR is now up at #1269. I'm not expecting you to review obviously, just thought you might be interested in some bits of it 😁

[oliver-sanders]

@MetRonnie Are skeleton loaders for Vuetify out yet? It look like the PR is merged and a new maintenance release is out.

[MetRonnie]

They added them in "labs" about the time I opened this PR, I haven't got round to upgrading Vuetify and adding them back in. However there is a slightly annoying issue at the moment which is sort of blocking us: vuetifyjs/vuetify#17013, but not a biggie