{

  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.


migration helper

  • complexity: easy going
  • future step: use pinia - new recommended store library


migration helper

vuex

  • complexity level: easy going
     

migration helper

router

  • complexity level: complicated
  • missing documentation details
  • Skeleton still not available
  • custom styles have to be rewritten
  • best practice: use settings.scss

migration helper

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

migration issue

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

Made with Slides.com