Migrating to XBase UI 3 # 

Overview # 

XBase UI v2 library previously is developed using Vue 2. But, since Vue 2 will reach End of Life (EOL) on December 31st, 2023 and no more updates,

XBase UI released a new version which is v3 that is developed using Vue 3, the latest version of Vue.

The previous XBase UI v2 components are built on top of Buefy (Which also will no longer have any update and not support Vue 3).

Hence, XBase UI v3 adopts Oruga as the UI component library that already supports Vue 3.

The main reason that XBase UI v3 components are built using Oruga is because Oruga developers are the same as Buefy, and also the components share similarities in terms of visuals and behavior.

This section will guide you to do migration to XBase UI v3.

Migration Steps # 

Introduction # 

The previous XBase UI v2 provides two ways to use it:

Modify XBase UI to become a new independent project's by cloning XBase UI v2 Boilerplate and publish it as npm package Reference: https://html.dev.xtremax.com/sites/xbase-ui-develop/#/xbase-boilerplate/customization/style

Use XBase UI as what it is (as dependency) Reference: https://html.dev.xtremax.com/sites/xbase-ui-develop/#/xbase-ui/start

Additional Information

But, the existing condition in some of xbase projects is using an independent UI library package by cloning it using the old xbase styleguide project. (e.g. cloning xbase-buefy project repo and creating a branch of the corresponding project)

Unlike XBase UI v2, XBase UI v3 only provides one way to use it: Use XBase UI as what it is (as dependency)
Reference: https://xbase-ui.dev.xtremax.com/documentation/setup/

Implementation # 

Architecture Refinement # 

Some of xbase projects also still use the old/legacy architecture which means the UI Common - UI Service relationship is coupled. The UI Common and UI Service use and share the same Vue instance and Vuex state between them. (deviates from the original purposes of micro-frontend)

Hence, you should refine the architecture with proper implementation to decouple UI Common and UI Service by applying these enhancements:

  • Decouple Vue instance between UI Common and UI Service by reorganizing the usage of global mixins, components, plugins, directives, etc.
  • Decouple Vuex state management between UI Common and UI Service
  • Decouple any other form of dependency between UI Common and UI Service

But, If the project has not implemented the micro-frontend in the previous architecture Please follow these tutorials as a guide to implement it.

Using XBase UI v3 # 

This section will guide you about tasks you should do in order to use the current XBase UI v3 library.

For a more detailed explanation, please refer to the wiki in TRG - XBase - Tutorial - Confluence

Install @xtremax/xbase-ui version 3 and @oruga-ui/oruga-next
Entry file script

Using Default Oruga Theme

Using XBase UI default theme or create your own theme

Because Oruga is an agnostic framework (no dependency on CSS framework), XBase UI also adopts the concept of not being binded to any CSS framework.

There are 2 ways to add a theme to your project's UI, either by utilizing our developed theme or by creating your own.

For a more detailed explanation, please refer to the wiki in TRG - XBase - Tutorial - Add a theme to the UI components - Confluence

Components breaking changes

XBase UI v3 components code prefix

You should change component code prefix:

  • xbase- to xb-
  • Xbase to Xb
  • From Buefy to Oruga: b- to o-

Changes in some components

Some of Buefy components is changed or not explicitly available in Oruga.

For a more detailed information, please refer to the Oruga Documentation

Other than that, some of the components also have been moved into the Recommendations Page

Powered by XBase 2.0

© 2023 Xtremax Pte Ltd