Files
AstralRinth/apps/frontend/CLAUDE.md
T
Calum H. bd97ace974 feat: hosting access tab (#5995)
* 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>
2026-06-04 15:58:01 +00:00

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].vue for dynamic segments, nested folders for nested routes)
  • src/components/ — website-specific components (not shared with the app)
  • src/composables/ — Vue composables, including queries/ for TanStack Query options
  • src/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 checks
  • src/layouts/ — Nuxt layout components
  • src/server/ — server-side plugins, routes, and utilities
  • src/store/ — Pinia state management
  • src/helpers/ — utility functions
  • src/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. Use client.labrinth.* modules instead.