Draft: migrate to Nuxt 3 / Vue 3

State of this MR

this is a rather chaotic MR – the commits should contain what they are labelled as but are in the order of how simple I found to do this change – not necessarily the order in which makes it sense. the last wip commit is a “all the stuff which I need to apply to make it working” and will be sorted later. currently, the biggest problem is that the integration with Express is not working – you can comment out serverHandlers in nuxt.config.ts for the time being so you have at least a working homepage. expect frequent rebases here, so if you want to help out here (much appreciated), please reach out to me first so we don’t generate conflicts by accident 😄

Links

https://v3-migration.vuejs.org/ https://nuxt.com/docs/migration/overview

Check list

🏃 means incomplete

Infrastructure

• change packages
• use nuxi instead of nuxt

Vue

• change lints from plugin:vue/recommended to plugin:vue3/recommended
• migrate from Vuex to Pinia
• bigrate from Babel + Webpack to Vite \
• replace Vue.prototype with other mechanism (probably config.globalProperties) 🏃
  left: layouts/default.vue dialog injections – probably can be a <Teleport> component / composable
• use @update:modelValue and modelValue for v-model
• remove .native modifier
• define custom events in emits
• replace $on
• import h instead of having it as parameter in render
• change $slots
• replace eventHub
• replace now unnecessary vue-ignore and ts-ignore inside <template> with proper typing (Vue 3 doesn’t allow Typescript inside templates)
• check instances where the new whitespace removal rule condense puts elements too close together because we rely on some implicit spaces – alternatively set it to preserve and do it later (we want condense in cases like <Popover>)
• replace <LazyHydration> 🏃
• replace <DateTimePicker> 🏃

Nuxt

• migrate configuration 🏃
• replace head with useHead() 🏃 (some instances todo where head uses properties from data which require more stuff to be moved to setup)
• replace axios with $fetch and higher-level utilities 🏃
• replace $cookies with useCookie and friends 🏃
• replace sentry module
• migrate plausible module
• migrate pws module
• integrate Express → requires having everything as .ts. I opened https://github.com/unjs/nitro/issues/2434 for the slim hope to keep some .js
• investigate problems with sharp and canvas, maybe something to do with https://sharp.pixelplumbing.com/install#esbuild?
• investigate problems with __dirname / import.meta.url referencing wrong directory
• think about integration of new → subsystem approach should work for fastify too
• rename directories
• remove env from nuxt.config.ts 🏃
• figure out solution for /img-local/census only used by pl but still present in <Header> and thus Vite throwing an error
• migrate loading indicator (or just use the default for now)

Deployment

• figure out deployment (pm2 or simpler for now?)

Test

• Test, test, test! (manually is okay)

Notes

• Vite apparently was easier then Webpack to get running, but we may want to consider to put the plugin for .suml into another repo and use some off-the-shelf solution for .tsv
• Vite didn’t like createRequire and it still might be possible to use the string-replace-attempt I did in Webpack but it felt very, very wrong to migrate this crutch. but at least Vite can handle import with { type: 'json' } – node still experimental so if that is a deal breaker we can resort to string replacement again
• typings improved a lot due to Pinia and Vue 3 for the frontend 🎉
• apparently, Nuxt 4 is already visible on the horizon, but the changes from v3 to v4 shouldn’t be too big, so I’d prefer to first migrate to Nuxt 3, getting us into supported land again and then make the adjustments needed for Nuxt 4 https://nuxt.com/docs/getting-started/upgrade

Helpers

some regexes I need regularly when stuff on main has changed

• s/Vue\.extend/defineComponent/ and s/import Vue from 'vue'/import { defineComponent } from 'vue'/`
• s/\$config/config/

Closes #372