* feat: implement access tab with dummy data * fix: spacing * feat: qa * feat: implement backend * qa: qa pass * feat: fix user "search" * fix: lint * feat: change to bitfield * feat: fix fields * fix: lint * fix: lint * feat: hook up api * feat: fix permissions * feat: audit log table event start * feat: better mobile mode for audit log table * feat: i18n * feat: qa * feat: enforce permissions * feat: email template start * feat: qa * fix: tooltip bug * feat: qa * impl: sse support in api-client * feat: sse impl * fix: desync path * feat: time frame picker from analytics * feat: QA * fix: spacing * fix: permisison audit log entries * fix: hosting manage page shared server detection * fix: lint * feat: qa + lint * feat: audit log table sort by time * feat: finish frontend panel stuff * fix: lint * fix: backend alignment * fix: lint * fix: supress friend errors * feat: qa * fix: qa * fix: lint * fix: utils barrel * fix: safari cookies in dev * fix: pin nuxt * feat: fixes + notif fix * fix: notifications * feat: qa * fix: notification sync not happening immediately * fix: qa * fix: qa * feat: qa * blog + prepr * feat: toast shit * blog images * thumbnail update one last time * prepr * feat: use reinvite route * update images * fix: reinvite stuff * fix: lint * fix: alignment of save bar * fix: notif sizing * fix: split up access * fix: lint * fix: lint * fix: link --------- Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
2.3 KiB
apps/frontend — Modrinth Website
Nuxt 3 application serving the main Modrinth website. Uses Vue 3, Tailwind CSS v3, and file-based routing.
Architecture
Nuxt 3 with SSR — pages are server-rendered and hydrated on the client. Uses $fetch for server-side data fetching and @modrinth/api-client (via NuxtModrinthClient) for client-side API calls.
Key Directories
src/pages/— file-based routing ([param].vuefor dynamic segments, nested folders for nested routes)src/components/— website-specific components (not shared with the app)src/composables/— Vue composables, includingqueries/for TanStack Query optionssrc/providers/— page-level DI context providers (e.g., version modal, project page)src/plugins/— Nuxt plugins (TanStack Query setup, theme, etc.)src/middleware/— route guards and auth checkssrc/layouts/— Nuxt layout componentssrc/server/— server-side plugins, routes, and utilitiessrc/store/— Pinia state managementsrc/helpers/— utility functionssrc/locales/— i18n translation files
Components
Website-specific components go in src/components/. These are components that only make sense in the website context — admin panels, moderation tools, dashboard widgets, brand components, etc.
Shared components go in packages/ui. If a component could be used by both the website and the desktop app, it belongs in packages/ui/src/components/. See packages/ui/CLAUDE.md for UI standards, color rules, and component patterns.
Rule of thumb: if it doesn't depend on Nuxt-specific APIs or website-only features, it should be in packages/ui.
Data Fetching
Use @modrinth/api-client via injectModrinthClient() for all API calls. See packages/api-client/CLAUDE.md for the full API client documentation.
For caching and server state, use TanStack Query (@tanstack/vue-query). See the tanstack-query skill (.claude/skills/tanstack-query/SKILL.md) for patterns and conventions used in this codebase.
Deprecated Composables
These composables are deprecated and should not be used in new code:
useAsyncData- we use tanstack, not nuxt's built in async data utility.useBaseFetch(src/composables/fetch.js) — legacy Labrinth fetch wrapper. Useclient.labrinth.*modules instead.