We will be updating Refined Sites for Confluence and JSM Cloud on the week of March 3rd 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.
In our internal testing at Refined, however, we have identified two main possibilities that could break the custom code and will need proactive attention. These are summarized below. We will also update this page with any further solutions that we discover.
When custom code is targeting elements with a selector starting with “ext” or “ext_ui”, for example “.ext_ui_dropdown” or “#ext_popover”.
When there are references in the style of “el-xxx”, “[data-v-xxx]” and “rw_xxx_module”. These kinds of references will need to be removed as they are being changed as part of the migrations that are being applied.
In cases where neither of these 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.
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.
If you have any questions or concerns, please contact the Refined Support Team for assistance.
The first issue that we expect may happen is when custom code is 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. |
The second issue that we’ve been able to identify is 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 changed as part of the migrations that are being applied. In cases where neither of these 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. |
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. |