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