Upgrade to Nuxt 3

[gb-beng]

On December 31st, 2023, Vue 2 will reach End of Life (EOL), and with it Nuxt 2. Both Vue and Nuxt will continue being available and working for many people, but at the same time, many companies and users will want to transition to Nuxt 3 (and we'd encourage this!).

Also consider Nuxt Bridge

In addition, there is Nuxt Bridge. It was built as a module to bring features and bug fixes from Nuxt 3 back to Nuxt 2, although it has not yet been released in a stable version. We plan to stabilise and release it in the next month or so, but our main focus over the course of the year will be on helping people transition to Nuxt 3.

https://nuxt.com/vision-2023#migrating-to-nuxt-3

Would also resolve some of the security warnings we cannot resolve:

https://github.com/beeldengeluid/x-omgeving/issues/709

[phivk]

latest migration guide: https://nuxt.com/docs/migration/overview

[phivk]

as part of this migration we should move to Node version 18: https://github.com/beeldengeluid/labs.beeldengeluid.nl/issues/444

[phivk]

keeping track of my research and migration steps here:

• skim through https://nuxt.com/docs/migration/configuration
• read through https://v3-migration.vuejs.org/breaking-changes/; looks like most breaking changes don't affect our code much.
• web searched for "how to migrate nuxt 2 to nuxt 3", most promising results include:
  • https://debbie.codes/blog/migrating-nuxt2-nuxt3/ (Debbie is an active Nuxt ambassador); suggests starting new nuxt3 project for easiest migration.
  • https://harlanzw.com/blog/nuxt-3-migration-cheatsheet; suggests a couple of pre-migration steps which seem a useful addition to Debbie's guide above.
• created folder __nuxt2 and moved everything there, except: .git, and .editorconfig
• init new nuxt3 app template at root via npx nuxi init nuxt-app then moved all files up from nuxt-app dir to root

We now have a brand new nuxt3 template

npm install
npm run dev

• added index page with static i18n, without styles and content
• dynamic i18n of content pages is currently solved in a non-standard (dare I say hacky way) involving custom getLocalePath(). To start basic, I focus on EN locale only first, and leave NL locale TBD for later.
• copied components and associated dirs to fix all reported console errors:
  • install and config vuetify dependency
  • use components to render content on about page
  • copy config files & update vuetify path
  • copy util files & update vuetify colors path
  • fix deprecated / for division outside of calc()
  • copy assets dir
• migrated v-list components as per https://vuetifyjs.com/en/getting-started/upgrade-guide/#v-list
• encountered [Vue warn]: Failed to resolve component: v-tabs-slider, (found https://stackoverflow.com/questions/70719044/vue-warn-failed-to-resolve-component-v-toolbar-title-issue-vue3-and-vuetify, but we are adding Vuetify to nuxt as a plugin, so not 1 on 1 applicable). Possibly the v-tabs-slider can be removed entirely in favour of using a v-tabs prop. leaving this for later as it's a non-breaking warning and tab slider functionality is fine.
• ⚠️ defined global styles in nuxt.config.ts, but not working properly. eg on /about the images should have max-width: 100%, as styled by /assets/scss/layout/markdown.scss, but these styles aren't applid. Tried installing sass-loader but didn't help.
  • UPDATE: looks like assets are loaded properly, but in the new nuxt content version container elements don't receive the same nuxt-content class name, adding this in manually on ContentRenderer elements.
• render content on index page
• copied all static content to /public dir
• moved images from asset to static /public dir and updated components (for simplification)
• load datasets and datacatalog from content and extend datasetPages for rendering.
• ⚠️ started installing & fixing panzoom but updating the plugin structure, but VisualMain component is still throwing panzoom related warnings
• adding [eslint-plugin-vuetify](https://www.npmjs.com/package/eslint-plugin-vuetify/v/next) to help fix a large part of deprecated Vuetify components.

[phivk]

Philo & Govert Calling about plan of action status:

• outstanding:
  • Vuetify update errors and warning: npm run lintfix throws: (37 problems (36 errors, 1 warning))
  • ensure styling/theme config is loaded and used in navbar colors etc
  • VisualMain component to be properly connected with PanZoom dependency
  • introduce other pages, besides index and about.

[gb-beng]

New PR: https://github.com/beeldengeluid/labs.beeldengeluid.nl/pull/538

Next step: review with the team.

[gb-beng]

Status, see: https://github.com/beeldengeluid/labs.beeldengeluid.nl/pull/538#issuecomment-1687807068