Nuxt 3 compatibility

[davestewart]

Migrate code to work with Nuxt 3.

Migration guide here:

• https://v3.nuxtjs.org/getting-started/migration/

[davestewart]

So the good news is: Areas siloing and routing works in Nuxt 3!

But there are some caveats related to:

• migration of an existing Nuxt 2 > Nuxt 3 site
• how you build sites in Nuxt 3

Steps to do before migration:

• Make sure areas is not called app
  Nuxt has its own app.vue setup, so does not seem to like /app/...

• Move areas/app/components back to /
  For some reason, Nuxt does not like loading its components from another path

• Disable any access to $store or perhaps inject a Proxy $store (TBC)
  Vuex does not (yet) exist in Nuxt 3, so access to $store... will blow up the site

Things to consider about your Nuxt 3 site:

• There is currently no Vuex in Nuxt, instead you use useState().
  Does this mean there will be store or state folders? Unsure for now, but the current demo (partially) shows examples using useState()

• Reload / updating is a bit hit and miss
  Making changes in nuxt config causes Areas to break and you need to reload. Not sure if this is a Nuxt, Vite or areas thing. Areas supports refreshing routes which works in Nuxt two, perhaps some investigation needed for 3

• Perfectly good, framework agnostic packages, will break in Nuxt 3
  Because Nuxt (Vite?) wants ES Modules not Common JS, Vite will blow up if it gets the wrong thing

Moving forwards

• Mainly, Areas is there. For the few things which don't work, I'll look to find out why and get them working.

• Regarding the Areas module itself, it seems that there are so few changes, that I'm not sure a separate branch / version is required. It's probably easier just to use version switching (feature flags) to add or suppress functionality.

• Regarding the demo, it's a separate repo. I'll upload with all the updates, then at some point in the future will be able to make a call on how stores / state should be handled.

Help required

If you think you have anything to add to this thread (insights, suggestions, worries) please comment below.

Thanks!