Upgrading larger JS Projects after a while is always a big mess. Espacially if there are major Version updates, or (in case of webpack and vite) the whole toolchain changes.

Best idea is to start a new Project from scratch using the new Toolchain, and then copying the old codebase bit by bit.

Asset handling

The asset handling with Vite did change completely compared to Webpack. E.g. setting the height or width on a img-Tag like this <img src="img.png" height="64px" width="64px" /> doesn't work anymore. Use <img src="img.png" style="height:64px; width:64px;" /> instead. Vite tries to cache these things now, but this requires these things to be in specified places during compilation. So we have to use the dedicated /src/assets/ and /public/ folders for images and other assets.

v-model

When passing a property by using v-model, the property appeared as value previously in Vue 2.x. In Vue 3.x it's now represented as modelValue.