This release upgrades the UI to Vue 3 and also includes under the hood refactor
for a few core components. We've tried to maintain overall component compatibility
and done our best to document the breaking changes.
Depending on how complex the UI for your project is, the upgrade may take
anywhere from a 1.5h to many days, so please take your time to go through the Enso changelog,
especially the upgrade steps AND also the Vue3 upgrade guide linked below.
All packages have had their dependencies and dev dependencies updated and pruned.
Many packages have had linter recommended fixes.
Please read the official documentation linked above, so you have a better understanding of the process.
The package & snippets are already present in the Enso release, but they will be commented out, so in order to enable the migration build, open the relevant files and uncomment the blocks above.
In addition to upgrading the Enso UI to make it Vue3 compatible, we've also made some other changes to a few Enso components some of which may impact your local code.
-
update the following files with the latest versions
.babel.config.js
.eslintrc.js
vue.config.js
client\src\js\enso.js
client\package.json
client\src\sass\enso.scss
-
enable the migration mode, as noted above
-
run yarn && yarn upgrade
and start HMR
-
you should be able to login into the application and will probably have some (lots of) errors and warnings
-
the deprecated legacyBuild
flow for building the application state has been removed entirely store.js
-
we have aimed to remove global components and instead import them for each use case
- the
fa
component is no longer global and needs to be imported locally, where used
import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
...
components: { ..., Fa, ... },
- the global
http
axios alias is no longer available,
instead it should be injected as required:
Update:
myMethod() {
axios.post(...);
}
to
inject: ['http']
...
myMethod() {
this.http.post(...);
}
-
if using any @hook:...
hooks, replace all usages with @vnode-...
docs
-
in all of your renderless components you can set the inheritAttrs: false,
attribute to eliminate warnings about inherited attributes
-
$listeners
has been removed / merged into $attrs
. See docs
You need to remove v-on="$listeners"
usages.
Note that in such cases, you will probably need to cascade events, either directly or via v-bind="$attrs"
if applicable.
-
$scopedSlots
property is removed and all slots are exposed via $slots
as functions. See docs.
You should replace this.$scopedSlots.xxx
with this.$slots.xxx
in your render functions
-
update the slot syntax, by replacing v-slot:xxx
with #xxx
-
if you are still using the deprecated named / scoped slot syntax, update it to the latest syntax first (which is already supported in 2.6)
For example, replace
<template slot-scope="{ count }">
to
<template #default="{ count }">
-
the beforeDestroy
hook has been renamed to beforeUnmount
- you should replace all usages project wide. See docs
-
when using $el
within components, ensure that there is a single root within the element (e.g. <div>
)
-
when emitting events in components (e.g. $emit('click')
), it is recommended to declare/list the emitted events:
emits: ['click'],
-
for components, the value
property has become modelValue
and the input
event has been replaced with update:modelValue
. See docs
When listening on 'value' changes on components, you need to replace @input="xxx"
with @update:model-value="xxx"
.
In Vue3 you can also have multiple v-model bindings on the same component. See docs
-
in all of your renderless components you can set the inheritAttrs: false,
attribute to eliminate warnings about inherited attributes
-
note that in Vue3 you can no longer programmatically destroy components as the $destroy()
method has been removed. See docs
-
HTML bound attributes such as :disabled
will be rendered as disabled="false"
for false values, and if you need to not have them rendered, the bound attribute value needs to be evaluated to null
or undefinded
. See docs
-
if using watch on arrays, you need to add deep: true
otherwise the callback may not be triggered. See docs
-
you no longer need to use $set
& $delete
to manage object attributes in order to keep responsiveness, you can use regular JS syntax. See docs.
-
if asynchronously loading components, the syntax has changed. See docs.
-
transitions have suffered a few changes. See docs
-
the render function API has changed. See docs
-
if using DateFilter
or EnsoDateFilter
please note:
- the
default
property has been removed
- the
disabledOptions
property has been renamed to excluded
- the
default
property has been removed
- value/v-model has become
filter
- using
v-model
for filter
& interval
is now required
For example, replace
v-model="params.dateInterval"
with v-model:filter="params.dateInterval"
:interval="intervals.products.date"
with v-model:interval="intervals.products.date"
where the attributes look like this
params: {
dateInterval: 'thisMonth',
},
intervals: {
products: {
date: {
max: null,
min: null,
},
},
},
-
if emitting/listening to global events, you should import and refactor to using the eventBus
instead. See docs.
import eventBus from '@enso-ui/ui/scrc/core/services/eventBus';
...
eventBus.$emit('my-event');
eventBus.$on('my-event', this.myHandler);
-
the <modal>
component no longer needs a portal
attribute/property, and you should delete all its usages
-
the AutosizeTextarea
component has been updated and no longer needs to wrap around a textarea. Update:
<autosize-textarea>
<textarea v-model="..."/>
</autosize-textarea>
to
<autosize-textarea v-model="...">
-
filters are no longer supported, refactor as needed (you may use methods instead). For example, update:
{{ value | numberFormat(2) }}
to
{{ numberFormat(value, 2) }}
-
if you're using the automatic component registration, the syntax has changed from
Vue.component('navbar-notification', Notification);
App.registerNavbarItem('navbar-notification', 300, 'core.notifications.count');
to
App.registerNavbarItem('navbar-notification', Notification, 300, 'core.notifications.count');
-
the v-tooltip
library has been updated:
Import has been updated from
import { VPopover } from 'v-tooltip';
to
import { Dropdown } from 'v-tooltip';
Component has been updated:
<v-popover trigger="hover"
to
<dropdown :triggers="['hover']"
The slot name has been updated:
<template v-slot:popover>
to
<template #popper>
-
we've switched to the standard (non compatibility) syntax for the animate animations. You should prefix animate related classes with animate__
.
For example, update:
<enso-form class="box animated fadeIn">
to
<enso-form class="box animate__animated animate__fadeIn">
Alternatively, refactor using transition components.
-
the @enso-ui/bulma
package has been deprecated and will no longer be maintained. You should refactor your components and import components from their respective packages.
Once you've migrated your local pages/components and packages,
you may switch from the migration build to the regular Vue3 build.