Migrating to Vue 3

[jgaehring]

Vue 3 was released at the end of last week. I think the most relevant information is here:

https://v3.vuejs.org/guide/migration/introduction.html

It's worth noting that this is a phased release, as they mention in the "Supporting Libraries" section:

All of our official libraries and tools now support Vue 3, but most of them are still in beta status and distributed under the next dist tag on NPM. We are planning to stabilize and switch all projects to use the latest dist tag by end of 2020.

It would be great to upgrade before we stabilize the Field Modules API, but I think it's worth waiting until all the additional tooling is ready. So maybe we can do this somewhere between milestones 0.9.0 and 0.10.0.

I think the most significant breaking change for us will be the way we register Field Modules and their components, since the global Vue methods (eg, Vue.component()) have now been replaced with instance methods:

https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp

Apart from that there are some changes to the render function which will certainly effect us, some (potential) issues with v-for and v-if, and of course the way in which the app itself is mounted, though that should be an easy fix.

I'd also like to grok the Composition API a little better, specifically what benefits it might pose to the Field Modules API. I can see how the ability to compose certain behaviors together, outside of components but in a way that various components can share, could be useful for our purposes, but I'm not exactly sure how.

There's a good overview video from Academind that I'm in the process of watching right now, perhaps that will give more insights.

[jgaehring]

Adding this to 0.9.0 for now, so we can at least evaluate how this might effect module development, but can still punt on it for later if we wish.

[jgaehring]

I spent a good chunk of time fixing things with our devServer proxy settings tonight (0c2d824), and realized how old and crusty our toolchain has become. It's still got some bits of config that I think predate Vue CLI and other niceties that have been around a long time now. Plus I'm worried our days are limited before we'll be forced to update to Webpack 5, and I'd just as well avoid that entirely in favor of adopting Vite. It's still scary to have to change things, and I think so much of that could be avoided if we re-scaffold the project with Vue 3 and Vite. It should pave the way for better tooling for Field Modules (#422) and might knock out smaller issues like #470 in the same stroke.

[jgaehring]

This will probably be helpful:

https://css-tricks.com/how-the-vue-composition-api-replaces-vue-mixins/