/
Vue3 Migration - March 2025

Vue3 Migration - March 2025

Owned by Steve Morrell
Last updated: about 8 hours ago by Alice Henderson-Roche
3 min read

We will be updating Refined Sites for Confluence and JSM Cloud on the week of March 3, 2025 to use the Vue3 JavaScript framework. This is an important and necessary update that will give significant benefits. 

Vue3 is faster and more efficient than the Vue2 framework that Refined currently uses, and allows us to deliver new features and functionality that wouldn’t be possible otherwise. 

Concurrently with the upgrade to Vue3, we will also be moving any remaining page layouts from the legacy Layout Editor to the new Page Builder. 

Due to these changes, sites implemented using the following custom code may see changes in visual appearance and/or behavior:

  • Custom CSS

  • Custom HTML to apply styling

  • Custom HTML to modify page behavior

We cannot predict exactly how these changes might present themselves, as this depends on the specifics of the customization.

There are some additional steps that can be taken in advance to minimize disruptions: 

  • Any sites that have not been moved to the Page Builder already should be moved before the Vue3 migration. Please see this page for further details.

  • Selectors written to target particular elements, which will no longer work after the change to Vue3, can be written temporarily to also target the new elements.

In our internal testing at Refined, we have identified the following possibilities that could break the custom code and will need proactive attention. These are summarized in the table below. We will also update this page with any further solutions that we discover.

Affected custom code

Resolution

Affected custom code

Resolution

Custom code targeting elements with a selector starting with “ext” or “ext_ui”, for example .ext_ui_dropdown or “ext_popover. 

These will be changing, and as a result will cause your code not to find the element on the page it is looking for.

In general, if you replace the “ext” and “ext_ui” with “r” (changing .ext_ui_dropdown in to .r_dropdown and #ext_popover to #r_popover) then the custom code on the site should start working again.

Any selectors written to target particular elements on the page that might be written as follows;

.ext_ui_dropdown {background-color: green; }

Can be modified to the following;

.ext_ui_dropdown, .r_dropdown {background-color: green; }

In order for both to be targeted at once.

This means that when the migration happens the page content will transition from .ext_ui_dropdown to .r_dropdown, but because the selectors are targeting both options they should still apply.

References in the style of “el-xxx”, “[data-v-xxx]” and “rw_xxx_module”.

Unfortunately these kinds of references will need to be removed as they are being removed as part of the migrations that are being applied.

This means that if there is code targeting for example div.rw_content_module , this will need updating to just div, or will need a different selector identifying that is as specific to target the same elements (which may vary from case to case).

Alerts in the style of .ext_ui_alert and type determined by .el-alert--info , .el-alert--warning, .el-alert--erroretc.

As previous advice recommendations, .ext_ui_alert can become .r_alert.

The severity tags have been updated to .alert_info, .alert_warning, .alert_erroretc.

In cases where none of the above suggestions are able to resolve your issue, please make sure that the selector you are using is still finding the element that you mean it to after the migrations are completed.

If you have any questions or concerns, please contact the Refined Support Team for assistance.