WIP - Nuxt 3

[zackkrida]

@WordPress/openverse-frontend and @sarayourfriend I'm creating this draft pull request as a place to discuss efforts to test and deploy https://nuxt-preview.openverse.org/.

I was able to successfully build and push Nuxt 3 from this branch with the following changes:

This diff:

diff --git a/frontend/justfile b/frontend/justfile
index 5a54dc43c..488a95d62 100644
--- a/frontend/justfile
+++ b/frontend/justfile
@@ -35,6 +35,7 @@ export FRONTEND_PNPM_VERSION := `grep 'packageManager' ../package.json | awk -F'
 # Build the frontend Docker image
 build-img tag="openverse-frontend:local" target="app":
     docker build \
+      --load \
       --target {{ target }} \
       --build-context 'repo_root=..' \
       --build-arg FRONTEND_NODE_VERSION=$(just node-version) \
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index e1782c3c2..6e6f15ac0 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -43,7 +43,7 @@ const openverseLocales = [
     name: "English",
     nativeName: "English",
   },
-  ...(locales ?? []),
+  // ...(locales ?? []),
 ].filter((l) => Boolean(l.iso)) as LocaleObject[]
 
 const isProdNotPlaywright = isProd && !(process.env.PW === "true")
diff --git a/frontend/src/locales/scripts/en.json5 b/frontend/src/locales/scripts/en.json5
index 453f30fc0..40752e85b 100644
--- a/frontend/src/locales/scripts/en.json5
+++ b/frontend/src/locales/scripts/en.json5
@@ -4,7 +4,7 @@
     main: "Go to {link} or search for something similar from the field below.",
   },
   hero: {
-    subtitle: "Explore more than 700 million creative works",
+    subtitle: "Testing Nuxt 3",
     description: "An extensive library of free stock photos, images, and audio, available for free use.",
     search: {
       placeholder: "Search for content",

And manually switching the nginx image to use the latest tag in the "staging-nuxt-preview" task definition (and template, so future deploys should work).

[github-actions[bot]]

Full-stack documentation: https://docs.openverse.org/_preview/4257

Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.

You can check the GitHub pages deployment action list to see the current status of the deployments.

Changed files :arrows_counterclockwise::

• https://docs.openverse.org/_preview/4257/meta/documentation/guidelines.html

[sarayourfriend]

We need to provide the env variables to the process when starting the app that was built for production. How do we do that?

@obulat can you clarify what you mean? Do you mean that we need to define production variables at build time? Or that we need to add new environment variables to the production execution environment?

[sarayourfriend]

We could wrap the changing items with <ClientOnly> to prevent the mismatch, but it's much easier to fetch the data in the middleware, before the app starts rendering, and have the correct data rendered on the server everywhere

That sounds great to me, I agree it's a better architecture. There are many different parts of our app that rely on the same data, and for the search pages it makes sense for that to go top-down, from the abstract "start of the request" to the real rendering of the page.

Vue 3 and Nuxt 3 natively support teleports, so the modals were updated to use the native support. We no longer need a modal target because Nuxt automatically creates a #teleports element.

Awesome!

[zackkrida]

@obulat I've had the opportunity to review this for several hours and I've made some suggestions. I think the homepage animation and robots.txt concerns are worth blocking over. I've also provided fixes for both :smile:

This is phenomenal work, and once my comments have been addressed we should push to our nuxt preview domain once more. Then, on Monday or a bit later we can conduct a lengthy test wherein a large percentage or all traffic is routed to the Nuxt 3 code. That would give us much assurance about merging and finally deploying this PR.

I am confident the work here will give us a stable foundation for iterating on the frontend, cleaning up legacy code patterns, and migrating to Nuxt 4. Amazing work!

[openverse-bot]

Based on the medium urgency of this PR, the following reviewers are being gently reminded to review this PR:

@obulat @dhruvkb This reminder is being automatically generated due to the urgency configuration.

Excluding weekend[^1] days, this PR was ready for review 4 day(s) ago. PRs labelled with medium urgency are expected to be reviewed within 4 weekday(s)[^2].

@zackkrida, if this PR is not ready for a review, please draft it to prevent reviewers from getting further unnecessary pings.

[^1]: Specifically, Saturday and Sunday. [^2]: For the purpose of these reminders we treat Monday - Friday as weekdays. Please note that the operation that generates these reminders runs at midnight UTC on Monday - Friday. This means that depending on your timezone, you may be pinged outside of the expected range.