{
just
a major update
}
or why the hack
does it take so long
09.2020
vue 3
first release
02.2022
vue 3
is the new default
10.2022
vuetify 3
offered finally a
stabel release
08.2023
220 commits later
branch is running again
06.2023
first commit
09.2023
consumer credit funnel up to date again
Idea: Do it in iterations
3 Party update
1.
2.
Test
3.
Deploy
All 3rd parties which relay on vue3 needs to be updated at the same time !
vue 3 -
combat mode
(aka "the migration build") is a build of Vue 3 that provides configurable Vue 2 compatible behavior.
- complexity: easy going
- future step: use pinia - new recommended store library
vuex
- complexity level: easy going
router
- complexity level: complicated
- missing documentation details
- Skeleton still not available
- custom styles have to be rewritten
- best practice: use settings.scss
vuetify
- complexity level: complex
- no migration guide at all
- missing validation modes
- challenge: keep options api to avoid 100% rebuild of all form components
- rules and messages extracted
vee validate
{inline svg}
- less server requests
- reusable external asset
- adjustable styles within the svg
InlineSvg's - svgMap.js
export function createSvgMap() {
function getSvgNameFromPath(path) {
const pathSplit = path.split("/"),
fileName = pathSplit[pathSplit.length - 1] || "",
svgName = fileName.replace(".svg", "");
return svgName;
}
const modules = import.meta.glob("@/assets/**/*.svg", {
import: "default",
eager: true
}),
svgMap = new Map();
Object.keys(modules).forEach((path) => {
const svgName = getSvgNameFromPath(path);
svgMap.set(svgName, modules[path]);
});
return svgMap;
}
InlineSvg's - InlineSvg.vue
<template>
<component :is="getSvg" :class="className" />
</template>
import { createSvgMap } from "@/js/svgMap.js";
import { h } from "vue";
export default {
props: {
src: {
type: String,
required: true,
validator(value) {
return value.match(/.+\/.+\.svg/g);
}
},
className: {
type: String,
default: ""
}
},
computed: {
name() {
return this.src.match(/.+\/(.+)\.svg/)[1];
},
getSvg() {
const svg = createSvgMap().get(this.name);
return svg && h(svg);
}
}
};
InlineSvg's - components.js
import { createApp } from "vue";
import App from "@/App.vue";
import { registerComponents } from "@/js/register/components.js";
const app = createApp(App);
registerComponents(app);
app.mount("#app");
import InlineSvg from "@/components/common/InlineSvg.vue";
export function registerComponents(app) {
app.component("InlineSvg", InlineSvg);
}
InlineSvg's - main.js
InlineSvg's - usage
<inline-svg :src="'@/assets/misc/download-document.svg'" class="svgDownload ml-n5 mr-6" />
bus.$emit("page-loading", true);
becomes
this.emitter.emit("page-loading", true);
Global Events
import mitt from "mitt";
const emitter = mitt();
export function registerGlobalProperties(app) {
app.config.globalProperties.emitter = emitter;
}
Component Events
export default {
emits: ["process"],
methods: {
onSubmit() {
this.$emit("process");
}
}
};
vitest
- setup for global components, directives, mocks
- css selectors
- fix coverage
- fix mounting
- fix event handling
- fix validation handling
- amount: 120 files
cypress component testing
- css selectors
- fix coverage
- fix mounting
- fix event handling
- fix validation handling
- amount: 30 files
- skeleton replacement
- bugfixing
- autofiller
- deploy "first iteration"
- repeat on borrower cockpit
- be ready before 12.2023
[end of vue 2 lts]
Next Steps
thanks
vue 3 update
By phpiet
vue 3 update
- 48