Upgrade to Nuxt 3

[rudokemper]

• [x] Update Nuxt 2 deps before switching to Nuxt 3.
• [x] Set up new Nuxt 3 project with npx nuxi.
• [x] Install all Nuxt 3 compatible deps and types.
• [x] Move over bulk of app content from Nuxt 2.
• [x] Update nuxt.config.ts to use the latest syntax; remove deprecated options like mode, buildDir, etc.
• [x] Remove any extra config that is no longer needed, like for TypeScript (which is now supported out of the box).
• [x] Implement new server/ directory structure for APIs.
• [x] Use H3 instead of Express; migrate API endpoints from index.ts into individual files.
• [x] Implement @nuxtjs/i18n 8.0.0.
• [x] Switch out use of axios for useFetch and $fetch.
• [x] Refactor index.vue and MapDashboard (and child components)
• [x] Refactor map.vue and GenerateMap (and child components)
• [x] Ensure map submission flow is working, tested with all different map request parameters
• [x] Update middleware syntax and rename middleware to server/middleware
• [x] Add in new styles (Thunderforest, Stadia) and API key refactor work
• [x] Add in thumbnail work
• [x] Implement nuxt-auth-utils instead of @nuxt/auth.
• [x] Refactor login.vue and Login components.
• [x] get authStrategy working.
• [x] LanguagePicker component in Vue 3
• [x] With nuxt-auth-utils, redirect back to Login and show error message (e.g. "Your approval is pending")
• [x] Get i18n routes working again
• [x] Get docker flow working
• [x] Update github actions
• [x] Comprehensive cleanup

Optional (or for later work):

• [x] Implement @nuxt/test-utils for testing.

[rudokemper]

Status update: I am largely done with upgrade work on this branch and I was hoping to finish this week, but other priorities came to the fore.

I was thwarted by the fact that in spite of the existence of some Auth modules, there is no auth0 SDK for Nuxt 3 yet and the auth0 team reported only 9 days ago that there will not be until Q3 2024.

People are quite frustrated by this.

From research, it seems like some people have used Supabase and Lucia to handle auth0 for Nuxt 3, or created a bridge for a Next.JS package, but those seemed like heavy-handed or overly complex solutions.

One workaround I would like to try next is the solution offered here on Stackoverflow to instantiate the Vue3 package for Auth0 as a client side only Nuxt plugin.

[rudokemper]

Unfortunately, this workaround only worked client-side; I wasn't able to get the auth guard working in middleware. It seems like other approaches have run into similar issues - see the May 11 comment.

Rather than going down a customization rabbithole to try to get @auth0/auth0-vue working in SSR, I think I'd rather wait until there is an official auth0 workflow. There is a promise of this in that thread:

tyf Community Engineer 13d Hey all! Just a quick update here to share that an official Nuxt SDK is on the roadmap - While I’m unable to share an exact date at this time, the team plans to look at releasing a beta version of the SDK beginning in Q3 2024+.

Stay tuned!

Well, at least this application is basically ready to migrate to Nuxt 3 once that SDK drops!

[rudokemper]

At long last - I got nuxt-auth-utils working! :tada:

Just some kinks to be worked out with rerouting back to the /login page if a user is not approved in auth0, and a few more loose ends, and this branch will be ready to ship.

This means that we can start with Nuxt v3 for our new GC applications (e.g. admin_ui).

[IamJeffG]

Congratulations :-)