feat: Migrate to Nuxt 3 framework

[mrth2]

feat: Migrate to Nuxt 3 framework

What this PR does / why we need it:

This PR migrates the frontend application from Nuxt 2 to Nuxt 3, bringing significant performance improvements and updated dependency support.

Key changes include:

• Upgraded from Vue 2 to Vue 3 with Composition API
• Migrated from Vuetify 2 to Vuetify 3
• Replaced @nuxtjs/auth-next with @sidebase/nuxt-auth
• Updated component syntax to match Vue 3 standards
• Refactored composables to work with Nuxt 3’s module system
• Modified reactive state management to use Vue 3’s Composition API
• Replaced @nuxtjs/axios ( deprecated ) with axios & the custom nuxt plugin
• Replaced @nuxtjs/proxy with nitro built-in proxy

The migration improves developer experience with better TypeScript support, faster HMR (Hot Module Replacement), and access to modern Vue ecosystem features.

Which issue(s) this PR fixes:

Fixes #XXX (Migration to Nuxt 3)

Special notes for your reviewer:

Please pay special attention to:

• Authentication flow changes with the new auth provider
• Vuetify 3 UI changes
• Component lifecycle handling in the Composition API
• TypeScript type definitions across the application

Testing

Testing was conducted across all major components and pages, ensuring:

• Recipe browsing functionality works correctly
• Authentication and authorization flows are maintained
• Responsive design works across different viewports
• User preferences are correctly stored and retrieved

[mrth2]

✅ The organizers on the recipe finder page aren't rendering correctly
✅ The compact cards are a lot less compact, they should match how it used to be:
✅ The delete buttons on the backup page don't look right (I've noticed the same issue on other pages so it's probably an issue with the component)
✅ The top nav bar doesn't extend all the way over the app bar if you go to the settings page (seems okay on the main page)
✅ The nav bar dropdown seems broken on the settings page (interestingly the one on the main page with organizers works fine):
✅ Missing some styling on the cookbooks page
✅ Organizer pages (e.g. tags) pin the title, but it hovers over the organizers. We should just get rid of the pin (it doesn't work in the main branch right now anyway). It's also missing the same border as above

---

The background color still isn't right on dark mode:

For me, it looks better in contrast and easier to navigate the card items. Do we really need to turn it all black?

---

Often times when I switch pages the sidebar glitches out/fails to load. Is anyone else experiencing this?

Not really happen to me, but there was an auto session polling behavior from new nuxt auth, I removed this to avoid state binding over the UI

---

Unchecking items on the shopping list doesn't seem to do anything (it doesn't hit the backend either):

This one work for me. Item will move around from un check - checked

[michael-genson]

This one work for me. Item will move around from un check - checked

Doesn't seem to be working for me. It seems like the forms are totally messed up on the shopping list, which could be related?

For me, it looks better in contrast and easier to navigate the card items. Do we really need to turn it all black?

While I don't generally disagree, there are a ton of visual issues because the app assumes they're the same color. Similarly, the light mode does correctly set them to the same color, which further makes dark mode stick out. While I can see this being an improvement in the future, it would be far too much work to add to this PR, so let's keep it the same as how it used to be for now.

---

I'm not seeing the fixes for the compact card height. Are you sure that went in?

---

I see the buttons on the backup page are fixed, but a lot of other ones are still messed up:

Cookbooks page

User/Household/Group management pages:

---

The images on the recipe page are messing with the formatting:

before

after

[mrth2]

✅ I'm not seeing the fixes for the compact card height. Are you sure that went in?
✅ I see the buttons on the backup page are fixed, but a lot of other ones are still messed up:
✅ User/Household/Group management pages:
✅ The images on the recipe page are messing with the formatting:

[mrth2]

@michael-genson shopping list form issue resolved. It was a vuetify issue with that v-autocomplete component

[michael-genson]

It doesn't look like the background color is fixed yet:

Additionally, unchecking items on the shopping list is still failing. Simply creating a new shopping list, a new item, then checking the item and unchecking the item isn't working. I tried this on both Firefox and Chrome:

---

Also, on the shopping list page, the buttons should blend into the background (if you're not seeing this page, open your shopping list and click "all lists" in the upper left corner":

before

after

---

The cookbooks on the sidebar don't seem to be rendering correctly (they're not showing the correct values, they're showing the household names, not the cookbooks, which are invalid pages)