Migrate to Vue 3

[dixsie]

Overview

Migration docs

Requirements

• Update Bootstrap Vue for Vue 3
• Add emits property for custom component events
• Import nextTick
• Move child :key value in v-for loop into wrapper <template>
• Remove global filter registration
• Remove unnecessary container elements
• Remove Vue2 transition names
• Update "this" reference in component props
• Update Vue i18n to support Vue 3
• Use new createApp API to create app instance

UI Checklist

Browser Tests (Chrome, Firefox, Safari (Mac), Edge (Windows))

• Tested responsive layout on supported viewport sizes
• Verified functionality works as expected, e.g. success and failure use cases
• Resolved any JavaScript errors thrown to the console

[dixsie]

@edtanous's proposal/discussion: https://gerrit.openbmc.org/c/openbmc/webui-vue/+/55438

[dixsie]

Dixsie's attempt April 4, 2021

All official libraries and tools now support Vue 3, but @vue/test-utils is still in release candidate status.

Breaking changes observed:

• The beforeDestroy lifecycle hook is deprecated. Use beforeUnmount instead
• Filters deprecated
• VueCompilerError: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.
• VueCompilerError: v-if/else branches must use unique keys.
• Props default value factory functions no longer have access to this

[dixsie]

BootstrapVue currently does not support Vue3

https://bootstrap-vue.org/docs

Vue.js v2.6 is required, v2.6.12 is recommended

[edtanous]

It looks like bootstrap-vue-3 exists in an early state?

https://www.npmjs.com/package/bootstrap-vue-3

[edtanous]

The beforeDestroy lifecycle hook is deprecated. Use beforeUnmount instead

This is handled in my patch

Filters deprecated

VueCompilerError: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.

I didn't see this one in my tests; Maybe it was a regression that was fixed later?

VueCompilerError: v-if/else branches must use unique keys.
Props default value factory functions no longer have access to this

There was one instance of this, and I think I resolved it by moving to the more common pattern (I think). I added a comment on my review on this line for someone with more knowledge to review.

[laoshaw]

what about vuetify3, it's now fully vue3 ready with MIT license.

[kirankumarb07]

Raised following WIP PR for Vue3 migration.

https://gerrit.openbmc.org/c/openbmc/webui-vue/+/67959

@gtmills @Nikhil-Ashoka @Renuka9527 @sivaprabug

[Renuka9527]

Pushed one commit to the https://gerrit.openbmc.org/c/openbmc/webui-vue/+/67959
1.Added Global Mixins
2.Added Global styles and sass configuration in vite config
3. Implemented Appheader with composition Api with setup attribute
Screenshot:
Header

Mixins

Styles:

@gtmills @Nikhil-Ashoka @kirankumarb07 @sivaprabug

[Renuka9527]

Pushed the below changes

1. Removed Mixins Folder.
2. Implemented Composables.
3. Implemented Date filters and eventBus( We can use event Bus for emitting the global events).
4. Added Toast implementation, can be removed when we change the styling library.
   @gtmills @Nikhil-Ashoka @kirankumarb07 @sivaprabug

[suryav9724]

Pushed below changes to the https://gerrit.openbmc.org/c/openbmc/webui-vue/+/67959

1. Search global component.
2. Table cell count global component.
3. Table row action global component.
4. Table toolbar global component.
5. Session page.

Session Page:

@kirankumarb07 @sivaprabug @gtmills @Renuka9527 @Nikhil-Ashoka

[Renuka9527]

Pushed below changes. https://gerrit.openbmc.org/c/openbmc/webui-vue/+/67959

1. Added CSP.
2. Added build build chunksize limit, The build time is reduced from 6mins to 25 secs.Application Loads faster
3. As we are sticking to the bootstrap-vue-next, added the functionlaity of Toast as-well.

[suryav9724]

Pushed below changes https://gerrit.openbmc.org/c/openbmc/webui-vue/+/55438/5..6

1. The above PR is not built in the local development, fixed that issue by configuring i18n legacy as false.
2. The translation function t is called using the useI18n in the Login page, Overview page, App Header, App Navigation, and respective file for those pages.
3. In the script tag, we can't use this.$t() function for translation. we should use the i18n.global.t() function from i18n. So the page title issue is fixed by this function.
4. Fixed the event bus error that occurred during logout.

[kirankumarb07]

Pushed below changes https://gerrit.openbmc.org/c/openbmc/webui-vue/+/55438/5..6

1. i18n for the Login page, Overview page, and app navigation.
2. Page title.
3. logout error.

@suryav9724 As discussed, please explain the issues/fixes in detailed manner for the latest pushed the code changes.

[suryav9724]

Pushed below changes to https://gerrit.openbmc.org/c/openbmc/webui-vue/+/72552/3..4

1. upgrade vue-router to "4.4.0", upgrade vuex to "4.1.0".
2. App navigation issue fixed by index configuration for router.
3. I18n implemented in the Event log page and Global component that are used in the Event log page.

[suryav9724]

Pushed below changes to PR https://gerrit.openbmc.org/c/openbmc/webui-vue/+/72701

1. i18n Issues fixed in all pages that occur while navigating.
2. vuelidate $v changed to v$ to support vuelidate in vue 3 on all pages.
3. Filter function for date and time format declared in main.js
4. To use the filter function in Vue 3 pipe can't be used. We have to call the filter function using the $filters, that changes has been implemented in the pages that used the filters.

[suryav9724]

Cherry-pick the master commits to the vue3 branch

vue3 #PR	Master commit ID
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/73124	bc49e09
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/73188	1ff8e89
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/73189	582e954

[suryav9724]

Add user validation in the user management page code changes push to the PR#73249 in Vue3 branch
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/73249

[suryav9724]

Cherry-pick the master commits to the vue3 branch

vue3 #PR	Master commit ID
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74016	6de0341
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74023	b2acbca

[suryav9724]

Cherry-pick the master commits to the vue3 branch

vue3 #PR	Master commit ID
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74280	09a3b9e
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74281	db2940a
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74282	0018592
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74283	8876ece

[suryav9724]

The below PR are posted for the functionality issue in vue 3 branch

74566: Firmware page vuelidate and form file error fix | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74566
74803: Factory reset modal popup and validation issue | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74803
74809: LDAP and server power operation page fix | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74809
74816: Invalid feedback if condition change | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74816
74864: Date and time page helper issue | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74864
74733: Network page validation and i18n issue fix | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74733
74735: Locale gets undefined in the login page | https://gerrit.openbmc.org/c/openbmc/webui-vue/+/74735

[suryav9724]

Cherry-pick the master commits to the vue3 branch

vue3 #PR	Master commit ID
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/75029	e2c716a
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/75032	ccf5c5c
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/75035	f4e7973
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/75036	51feb35
https://gerrit.openbmc.org/c/openbmc/webui-vue/+/75037	4130397