feat: Migrate to Nuxt 3 framework #5184
Conversation
| <BaseDialog v-if="editTarget" v-model="dialogStates.edit" width="100%" max-width="1100px" | ||
| :icon="$globals.icons.pages" :title="$t('general.edit')" :submit-icon="$globals.icons.save" | ||
| :submit-text="$t('general.save')" :submit-disabled="!editTarget.queryFilterString" @submit="editCookbook"> |
There was a problem hiding this comment.
(I know this is a work in progress - very exciting)
If we can stick with consistent formatting it'll make the diff a lot easier to review. Currently this is showing ~12 lines removed and 3 added, whereas it's probably only 2 lines actually changed? (I didn't look too closely, but $tc => $t by the looks)
There was a problem hiding this comment.
I don't think there is anything removed or added here, just a reformat putting multiple arguments in one row and wrapping at a reasonable length.
There was a problem hiding this comment.
Agreed, that's what happening. Just makes the diff harder to parse.
There was a problem hiding this comment.
-
FYI the changes was
$tc=>$tdue tonuxtjs/i18nupgrade -
I agreed on the formatting. What was the rule for formatting, please?
There was a problem hiding this comment.
Other than actual changes (e.g. changing $tc to $t) can we just keep the original formatting? I don't think we had a specific rule, one of the things I wanted to add after the migration is linter rules similar to how we do the backend
There was a problem hiding this comment.
Just so that you know, I used the VS Code with the Vue Official plugin. The code was formatted with this plugin.
The change on CookbookPage is pretty easy to reformat into original formatting. I understand the hard part of reviewing if the code has reformatted, but we have no specific rule, and many components were changed due to migration...
As I observed along the way, not all components (some pieces of code ) were reformatted after I added changes to them. This means there is different formatting throughout the front end.
|
Can you fix the failing tests, should mostly be replacing the node version. |
@Kuchenpirat Can you please check it again? I have upgraded the workflow node version to v20. The checks for commits were successful, but the PR check seems to be hanging. |
|
yeah, we have to approve running tests for first time contributors. |
I agree. The tests are now successful, but the lining phase failed due to a |
|
There are some issues with Playwright tests; my first guess is due to the change in the Vuetify component structure. I'll try to fix them. |
|
retriggered both tests with the same result |
|
@Kuchenpirat please trigger the workflows again |
|
It looks like there are a lot of warnings from the linter. Are these addressable? Similarly there are also some code warnings (check the commit page and scroll down): |
|
Also it seems that this commit 57369d5 changed formatting for pretty much every frontend file? Increasing indent size from 2 spaces to a tab leading to over 37k added and 30k removed lines. |
|
Good catch. Can we revert back to 2-space indentation? While some files definitely did have 4 space indentation, the vast majority had 2 spaces |
|
Hmm I upgraded new nuxt eslint plugin v9. Let me reconfig the indent to 2
spaces and fix all frontend files
…On Fri, Mar 21, 2025, 8:49 PM Michael Genson ***@***.***> wrote:
Good catch. Can we revert back to 2-space indentation? While some files
definitely did have 4 space indentation, the vast majority had 2 spaces
—
Reply to this email directly, view it on GitHub
<#5184 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACCB5XIJPSVBVRAVRIPLCXD2VQKHXAVCNFSM6AAAAABYPGFOY2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONBTGQZDGNRYGA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
[image: michael-genson]*michael-genson* left a comment
(mealie-recipes/mealie#5184)
<#5184 (comment)>
Good catch. Can we revert back to 2-space indentation? While some files
definitely did have 4 space indentation, the vast majority had 2 spaces
—
Reply to this email directly, view it on GitHub
<#5184 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACCB5XIJPSVBVRAVRIPLCXD2VQKHXAVCNFSM6AAAAABYPGFOY2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDONBTGQZDGNRYGA>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
|
To get the local version working we have to disable {
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"noImplicitAny": false,
"verbatimModuleSyntax": false, // <--- this
}
}It will take some time to get through everything, but some preliminary notes on app appearance below. In general some changes to Mealie's appearance are acceptable (we're coming from a pretty old framework) but they have to be as good as (or better than) how they used to be. We definitely don't want regressions. While hardly a "great" dataset, if you don't already have data in your test instance, here's a snapshot of the demo instance: You can restore from here by going to settings -> backups -> upload -> backup restore On the main page, the app sidebar doesn't render right. When scrolling recipes, only the main area should scroll, not the sidebar. Because of this, if you have more than ~30 recipes, the settings, language, and light/dark mode toggle is off screen: Old State New State Images should fill the entire recipe card on non-compact mode: Old State New State The compact view doesn't look right, things don't seem to be rendering properly. To switch to the compact view: Old State New State |
…iguration options
… non-null assertions for props
|
All Lint Errors are fixed now 🤘🚀 |
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:
@nuxtjs/auth-nextwith@sidebase/nuxt-auth@nuxtjs/axios( deprecated ) withaxios& the custom nuxt plugin@nuxtjs/proxywith nitro built-in proxyThe 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:
Testing
Testing was conducted across all major components and pages, ensuring: