Migrate extralit-frontend from Vue 2 / Nuxt 2 to Vue 3 / Nuxt 4

.github/workflows/extralit-frontend.yml

@@ -86,17 +86,20 @@ jobs:
 
       - name: Build package 📦
         env:
-          # BASE_URL is used in the server to support parameterizable base root path
-          BASE_URL: "@@baseUrl@@"
-          DIST_FOLDER: ./dist
+          # Nuxt 4 SPA (ssr:false) ships as static files served at the site root, so build at
+          # base "/". (The Nuxt 2 "@@baseUrl@@" placeholder breaks Nuxt 4's prerender crawler;
+          # parameterizable sub-path hosting is a separate follow-up.)
+          BASE_URL: "/"
         run: |
-          npm run build
+          # `nuxi generate` prerenders the SPA shell to .output/public (index.html + _nuxt
+          # assets); `nuxi build` only emits a Nitro server with no static index.html.
+          npm run generate
 
       - name: Upload frontend statics as artifact
         uses: actions/upload-artifact@v4
         with:
           name: extralit-frontend
-          path: extralit-frontend/dist
+          path: extralit-frontend/.output/public
 
   # build_dev_docker_image:
   #   name: Build development extralit-frontend docker image

.github/workflows/extralit-pr-preview.yml

@@ -75,15 +75,24 @@ jobs:
       - name: Install frontend dependencies
         working-directory: extralit-frontend
         env:
-          BASE_URL: "@@baseUrl@@"
-          DIST_FOLDER: ./dist
+          # Nuxt 4 SPA (ssr:false) is served as static files from the server's static dir at
+          # the site root, so build at base "/". (The Nuxt 2 "@@baseUrl@@" placeholder, which
+          # the server rewrote at runtime, breaks Nuxt 4's prerender crawler and yields "//_nuxt"
+          # asset paths; parameterizable sub-path hosting is a separate follow-up.)
+          BASE_URL: "/"
         run: |
           npm install
-          npm run build
+          # `nuxi generate` prerenders the SPA shell to .output/public (index.html + _nuxt
+          # assets); `nuxi build` only emits a Nitro server with no static index.html.
+          npm run generate
 
       - name: Build package
         run: |
-          cp -r ../extralit-frontend/dist src/extralit_server/static
+          set -euo pipefail
+          # Bake the compiled SPA into the wheel's static dir. Fail loudly if it's missing or
+          # empty, otherwise the server ships with no statics and 404s every route.
+          cp -r ../extralit-frontend/.output/public src/extralit_server/static
+          test -f src/extralit_server/static/index.html
           uv build
 
       - name: Upload artifact

.github/workflows/extralit-server.yml

@@ -141,15 +141,24 @@ jobs:
       - name: Install frontend dependencies
         working-directory: extralit-frontend
         env:
-          BASE_URL: "@@baseUrl@@"
-          DIST_FOLDER: ./dist
+          # Nuxt 4 SPA (ssr:false) is served as static files from the server's static dir at
+          # the site root, so build at base "/". (The Nuxt 2 "@@baseUrl@@" placeholder, which
+          # the server rewrote at runtime, breaks Nuxt 4's prerender crawler and yields "//_nuxt"
+          # asset paths; parameterizable sub-path hosting is a separate follow-up.)
+          BASE_URL: "/"
         run: |
           npm install
-          npm run build
+          # `nuxi generate` prerenders the SPA shell to .output/public (index.html + _nuxt
+          # assets); `nuxi build` only emits a Nitro server with no static index.html.
+          npm run generate
       # End of frontend build section
       - name: Build package
         run: |
-          cp -r ../extralit-frontend/dist src/extralit_server/static
+          set -euo pipefail
+          # Bake the compiled SPA into the wheel's static dir. Fail loudly if it's missing or
+          # empty, otherwise the server ships with no statics and 404s every route.
+          cp -r ../extralit-frontend/.output/public src/extralit_server/static
+          test -f src/extralit_server/static/index.html
           uv build
 
       - name: Upload artifact

.gitignore

@@ -172,4 +172,4 @@ output/
 
 **/.playwright-mcp/
 **/.nuxt-stale-root/
-.worktree/
+.worktree/

CLAUDE.md

@@ -2,7 +2,7 @@
 
 ## Architecture Notes
 - **extralit-server/**: FastAPI + PostgreSQL + Redis Queue
-- **extralit-frontend/**: Vue.js/Nuxt.js (Vuex → Pinia migration)
+- **extralit-frontend/**: Vue 3 / Nuxt 4 (Vite); Pinia state management
 - **extralit/**: Python SDK client
 - **extralit-hf-space/**: Self-contained HF Spaces deployment bundle (Docker; bundles Elasticsearch + Redis + OCR) — git submodule
 - **Vector DB**: Elasticsearch/OpenSearch (separate service)

extralit-frontend/.eslintrc.js

@@ -10,14 +10,17 @@ module.exports = {
     "plugin:@intlify/vue-i18n/recommended",
     "plugin:prettier/recommended",
     "plugin:nuxt/recommended",
-    "prettier/vue",
   ],
+  plugins: ["vue"],
   settings: {
     "vue-i18n": {
-      localeDir: "./translation/*.json",
+      localeDir: "./translation/*.js",
     },
   },
   rules: {
+    // Formatting is advisory here (parity with the *.ts override and the separate
+    // `npm run format` step); keeps `lint --quiet` focused on real correctness rules.
+    "prettier/prettier": "warn",
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
     "prefer-const": "warn",
@@ -48,14 +51,38 @@ module.exports = {
   },
   globals: {
     $nuxt: true,
+    vi: true,
+    // Nuxt 4 auto-imports, hand-declared to satisfy no-undef. This list can drift;
+    // the real fix is adopting `@nuxt/eslint` (flat config), which auto-generates
+    // these globals from the build manifest. Tracked as follow-up, not done here.
+    defineNuxtPlugin: "readonly",
+    defineNuxtRouteMiddleware: "readonly",
+    definePageMeta: "readonly",
+    navigateTo: "readonly",
+    abortNavigation: "readonly",
+    useNuxtApp: "readonly",
+    useRuntimeConfig: "readonly",
+    useRoute: "readonly",
+    useRouter: "readonly",
+    useState: "readonly",
+    useCookie: "readonly",
+    useHead: "readonly",
+    useSeoMeta: "readonly",
+    useError: "readonly",
+    createError: "readonly",
+    clearError: "readonly",
+    showError: "readonly",
   },
+  parser: "vue-eslint-parser",
   parserOptions: {
-    parser: "@babel/eslint-parser",
+    parser: "@typescript-eslint/parser",
+    ecmaVersion: 2022,
+    sourceType: "module",
   },
   overrides: [
     {
       files: ["**/*.ts"],
-      extends: ["@nuxtjs/eslint-config-typescript", "prettier"],
+      extends: ["plugin:@typescript-eslint/recommended", "prettier"],
       parser: "@typescript-eslint/parser",
       plugins: ["@typescript-eslint", "prettier"],
       parserOptions: { project: ["./tsconfig.json"] },

extralit-frontend/.gitignore

@@ -2,3 +2,9 @@ node_modules/
 /test-results/
 /playwright-report/
 /playwright/.cache/
+.nuxtrc
+.nuxt/
+.output/
+.nitro/
+.cache/
+dist/

extralit-frontend/CLAUDE.md

@@ -25,7 +25,7 @@ API_BASE_URL=https://extralit-public-demo.hf.space/ npm run dev
 ## Testing
 
 ```bash
-npm run test             # Jest unit tests
+npm run test             # Vitest unit tests (run once)
 npm run test:watch       # Watch mode
 npm run test:coverage    # With coverage
 
@@ -34,35 +34,63 @@ npm run e2e:silent       # Playwright headless
 npm run e2e:report       # View test report
 ```
 
+> Unit tests run on **Vitest** (`vitest.config.ts` + `test/setup.ts`), using
+> `@vue/test-utils` v2 and `@nuxt/test-utils`. Specs needing Nuxt runtime context use
+> `// @vitest-environment nuxt` or `mockNuxtImport`.
+>
+> The Playwright e2e suite is inherited from upstream Argilla. The shared login helper
+> (`e2e/common/login-and-wait-for.ts`) has been reconciled to Extralit's real sign-in UI:
+> it fills `getByLabel("Username"/"Password")`, submits the `"Sign in"` button, mocks
+> `/api/v1/token` + `/api/v1/me` offline, and waits for the home/datasets landing at `/`
+> (there is no `/datasets` route). This flow is runtime-verified via the CDP browser. The
+> per-page specs still need fresh Extralit screenshot baselines (`--update-snapshots`); the
+> inherited ones are Argilla's. The local Playwright browser can't launch on the Orin dev
+> host (missing OS libs, no sudo) — run the headless gate in CI.
+
 ## Code Quality
 
 ```bash
-npm run lint             # ESLint check
+npm run lint             # ESLint check (eslint 8 + vue-eslint-parser)
 npm run lint:fix         # Fix ESLint issues
 npm run format           # Format with Prettier
 npm run format:check     # Check formatting
 npm run generate-icons   # Generate icon components from SVG
+
+npx nuxi typecheck       # vue-tsc type check
+npm run build            # Production build (vite/nitro)
 ```
 
 ## Requirements
 
-- Node.js 18+
+- Node.js 18+ (developed on Node 24)
 - Backend server running for full functionality
 
 ## Architecture
 
-**Migration in progress**: Vuex → Pinia
-
-- **v1/** directory: New Pinia architecture with domain-driven design
-- Domain-driven design with entities, use cases, dependency injection
+- **v1/** directory: Pinia + domain-driven design (entities, use cases, dependency injection
+  via `ts-injecty`). The domain/use-case layer is framework-agnostic; only the Vue/Nuxt
+  adapters (HTTP, Auth, Icons) were swapped during the Vue 3 / Nuxt 4 migration.
 - Component hierarchy: base (stateless) → features (page-specific) → global (reusable)
+- HTTP: plain `axios` in `plugins/2.axios.ts` (replaced `@nuxtjs/axios`), re-injected into DI.
+- Auth: `AuthService` (`v1/infrastructure/services/AuthService.ts`) implementing `IAuthService`,
+  provided as `$auth` by `plugins/1.auth.ts` (replaced `@nuxtjs/auth-next`).
+- Icons: custom `<svg-icon>` (`components/base/BaseSvgIcon.vue`) reading `static/icons/*.svg`
+  (replaced `vue-svgicon`).
+- Plugins load in order via numeric prefixes (`1.auth` → `2.axios` → `3.di`); middleware are
+  Nuxt-4 globals (`middleware/*.global.ts`).
+
+> **TS posture:** `tsconfig.json` keeps `strict:false` (matching the pre-Vue3 config) and
+> disables Nuxt-4's new `verbatimModuleSyntax`/`noImplicitOverride`. Tightening to strict is a
+> separate hardening effort. Note: Vite/esbuild (`isolatedModules`) requires type-only imports
+> to use the inline `import { type X }` modifier or they throw at runtime in dev.
 
 ## Key Technologies
 
-- Vue.js + Nuxt.js
-- Pinia (state management, replacing Vuex)
-- Jest (unit tests) + Playwright (e2e)
-- ESLint + Prettier
+- Vue 3.5 + Nuxt 4 (Vite + Nitro)
+- Pinia (state management; Vuex fully removed)
+- Vitest + @vue/test-utils v2 (unit) + Playwright (e2e)
+- @nuxtjs/i18n v10 (vue-i18n v11), @vueuse/core, mitt
+- ESLint 8 + Prettier
 
 ## Structure
 

extralit-frontend/__mocks__/empty.css

@@ -0,0 +1 @@
+/* test stub */