Migration to Nuxt 3

[obulat]

Fixes

Fixes #411 by @obulat

Description

This PR migrates the frontend app from Nuxt 2 to Nuxt 3. The following functionality works well:

• search
• single result pages
• related items
• collection pages
• analytics
• Playwright tests (visual regression and e2e)
• unit tests
• auth

Fetching changes

Fetching media on search, single-detail and collection pages is done in useAsyncFetch. Previously, we were splitting the fetching between middleware for the server and the useFetch for the client fetching, to make sure that the server finishes fetching before sending the page to the client, and there are no client-server mismatches. While working on this PR, I realized that Nuxt requires some data (payload) returned from the useAsyncFetch function to cancel re-fetching of the same data on the client when hydrating (which was actually causing the mismatch).
We cannot call showError from inside the useAsyncFetch, so there's an error watcher that redirects to the error page after the useAsyncFetch in the components.

The search results are now fetched in the search layout. The reason for moving it from the child search.vue page was the fact that the server-rendered page would not update the result count in the header after the server fetches the media. This was causing the server-client mismatch.

Global audio player

The global audio component is moved to the app.vue, the base component for all pages. The global audio would either keep playing on navigation, or stop playing when navigating from one single result page to the other. Previously, we were getting the active audio properties from media store or from the related media store. If the item wasn't found in the store, it would be set to null, and the player would be closed until the new item is fetched from the API. To fix this, I added the detail property to the activeAudio store, so that if there is an active audio, we always have its properties and can show it in the global player.

API proxying

The API calls are now proxied through the Nuxt server route (/api/...). This allows us to send the auth credentials with all of the Nuxt requests.

TODO:

• add tests for the API token flow #d5716a4
• add tests for fetching media #9aa194c
• [Nuxt 3] Re-add Storybook and Storybook tests #3664 add Storybook
• [Nuxt 3] Playwright Docker build fails on MacOS #3694 fix the Playwright Docker build on a Mac (currently, it does not build because a rollup platform-dependent dependency is not installed)
• [Nuxt 3] Re-add Prometheus module #3665 re-add Prometheus
• check that Sentry works correctly
• Ensure that the .env template file has all necessary variables
• Check that the Docker build sets the .env variables correctly.
• Add a note to increase the memory locally if there's an error.

Testing Instructions

Go to https://staging.openverse.org and check that the deployed version works correctly. Read through the code and see that it makes sense.

Locally

1. Remove the node_modules folder and re-install packages:

rm -rf frontend/node_modules && just node-install

2. Run the project with the following modified option:

export NODE_OPTIONS=--max-old-space-size=8192 && just frontend/run dev

Checklist

• My pull request has a descriptive title (not a vague title likeUpdate index.md).
• My pull request targets the default branch of the repository (main) or a parent feature branch.
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.
• I ran the DAG documentation generator (if applicable).

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[github-actions]

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

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.

[github-actions]

Playwright failure test results: https://github.com/WordPress/openverse/actions/runs/7779344167

It looks like some of the Playwright tests failed. You can download the trace output and image diffs for the failed tests under the "Artifacts" section in the above page.

You can read the docs on how to use this artifact.

If the test is flaky, follow the flaky test triage procedure.

[sarayourfriend]

@obulat Can we close this PR in the meantime, until we get ready to attempt this again (or do something else entirely)?

I'll close it proactively, but please reopen it with a note why we need to keep it drafted long-term, if that is the case.