Version 5 migreringsguide
Vue 3
@fkui/vue is migrated to Vue 3 and requires your app to be migrated as well.
Prerequisites
Before you begin make sure to read:
- Official Vue 3 migration guide
- Official vue-router migration guide (if your application uses routing)
Additionally some changes has to be made to your build toolchain:
@forsakringskassan/jest-configmust be updated to 29.3.0 or later.- Toolchain migrated to Vite
- Optional: If your application uses vue-styleguidist to generate documentation it must be migrated to
@forsakringskassan/docs-generator
If you are using vue-stylegudist:
vue-stylegudist does not support Vue 3 and must be replaced.
Suggested replacement is @forsakringskassan/docs-generator.
Broad instructions
- Replace
new Vue(..)withcreateApp(..).
-import Vue from "vue";
+import { createApp } from "vue";
-const vm = new Vue(MyAwesomeApp);
+const app = createApp(MyAwesomeApp);
- Plugins are applied per instance and not global:
-Vue.use(MyAwesomePlugin);
const app = createApp(MyAwesomeApp);
+app.use(MyAwesomePlugin);
- Replace
Vue.extend(..)withdefineComponent(..)in Single File Components (SFCs):
-import Vue from "vue";
+import { defineComponent } from "vue";
-export default Vue.extend({
+export default defineComponent({
/* ... */
});
Set running app context
FKUI requires knowledge about the running app instance.
+import { setRunningContext } from "@fkui/vue";
const app = createApp(App);
+setRunningContext(app);
Note: you can still create multiple Vue applications, just make sure to call setRunningContext for each app you create.
mountComponent cleanup
mountComponent(..) returns an App instance instead of Vue 2 Vue instance and thus uses the unmount() method instead of $destroy().
-const vm = mountComponent(..);
-vm.$destroy();
+const app = mountComponent(..);
+app.unmount();
Additionally you no longer need to manually remove the target element:
const targetElement = document.createElement();
const app = mountComponent(MyAwesomeComponent, { attachTo: targetElement });
-targetElement.removeChild(vm.$el);
app.unmount();
mountComponent requires calling instance
mountComponent and related functions needs the calling instance to be passed as a parameter.
This change affects the following functions:
mountComponentopenModalconfirmModalformModalmountFOffline
For instance, when using mountComponent(..):
-mountComponent(MyAwesomeComponent, { ... });
+mountComponent(this, MyAwesomeComponent, { ... });
mountComponent options now follow Vue3 $attrs structure
Passing props:
For instance, when using mountComponent(..):
mountComponent(this, MyComponent, {
attachTo: targetElement,
- props: {
- foo: "bar",
- },
+ foo: "bar",
});
Listening to events:
mountComponent(this, MyComponent, {
attachTo: targetElement,
- on: {
- submit(): void {
- /* do something */
- },
+ onSubmit: void {
+ /* do something */
+ },
});
<i-popup-target> removed
If your application includes the <i-popup-target> component you must remove it.
By default any IPopup will be mounted as a child of <body> but this can be customized by the Config.popupTarget selector.
mountOffline(...) removed
mountOffline(...) is no longer available. For EXP-applications it´s not needed, as the feature is now included in Sitevision.
If you are creating a GHS-application with the need for the FOffline component, just add <f-offline> Custom Message </f-offline> to your application template.
#tooltip slot in custom components
If you have an application specific input field wrapping the #tooltip slot from FLabel you must now add v-if="$slots.tooltip" to the component:
-<template #tooltip>
+<template v-if="$slots.tooltip" #tooltip>
<!-- @slot Slot for tooltip. -->
<slot name="tooltip"></slot>
</template>
Class on components
<f-text-field class="foo"></f-text-field>
Classes used to be set on the root element of the component.
It is now transparently set on the <input> element instead.
Vue Runtime
The @fkui/vue-runtime package has been removed.
Instead each package has to be manually installed:
npm install @fkui/{css-variables,logic,date,vue}
npm rm @fkui/vue-runtime
If you use additional packages such as @fkui/vue-labs you need to install it as well.
Replace imports from @fkui/vue-runtime to respective package directly:
-import { foo } from "@fkui/vue-runtime/logic";
-import { bar } from "@fkui/vue-runtime/vue";
+import { foo } from "@fkui/logic";
+import { bar } from "@fkui/vue";
Personnummer displays 10 digits instead of 12
Personnummer is extended to understand both 12- and 10-digit strings.
Personnummer is still saved with 12-digits but displayed with 10 digits. Textkeys have been replaced in order to not interfer with already-deployed applications using former 12-digit display.
Read more about personnummer format at Skatteverket.