Nuxt 3 migration (baserow#4342)

Update the nuxt3 version.

Co-authored-by: Jonathan Adeline <jonathan@baserow.io>
Co-authored-by: Bram Wiepjes <bramw@protonmail.com>
Co-authored-by: Cezary <cezary@baserow.io>
Co-authored-by: Tsering Paljor <tsering@baserow.io>
Co-authored-by: Przemyslaw Kukulski <przemyslaw+gh@baserow.io>
Co-authored-by: Bram <bram2w@users.noreply.github.com>

Author: 6 people

.editorconfig

@@ -11,7 +11,7 @@ insert_final_newline = true
 [Makefile]
 indent_style = tab
 
-[*.{js,yml,scss,eslintrc,stylelintrc,vue,html,json,ts}]
+[*.{js,mjs,yml,scss,eslintrc,stylelintrc,vue,html,json,ts,prettierrc}]
 indent_size = 2
 
 [*.md]

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ on:
   workflow_dispatch:
     inputs:
       clear_cache:
-        description: 'Clear Docker build cache before building'
+        description: "Clear Docker build cache before building"
         required: false
         default: false
         type: boolean
@@ -459,7 +459,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shard: [1, 2, 3, 4]
+        shard: [1, 2, 3]
     steps:
       - name: Log in to GitHub Container Registry
         uses: docker/login-action@v3
@@ -469,15 +469,18 @@ jobs:
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Run web-frontend tests for shard ${{ matrix.shard }}
+        env:
+          CI: "true"
+          EXTRA_VITEST_PARAMS: --shard=${{ matrix.shard }}/3 --reporter=junit --outputFile=./reports/junit.xml
         run: |
           mkdir -p reports
           docker run \
             --name=webfrontend_test \
-            -e JEST_SHARD_INDEX=${{ matrix.shard }} \
-            -e JEST_SHARD_TOTAL=4 \
+            -e EXTRA_VITEST_PARAMS="$EXTRA_VITEST_PARAMS" \
             ${{ needs.build-frontend.outputs.image }} ci-test | tee reports/stdout.txt
-          docker cp webfrontend_test:/baserow/reports/. ./reports
+          docker cp webfrontend_test:/baserow/web-frontend/reports/junit.xml ./reports
           docker rm webfrontend_test
+          ls ./reports
 
       - name: Upload test reports
         uses: actions/upload-artifact@v4
@@ -611,7 +614,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "24"
           cache: "yarn"
           cache-dependency-path: "e2e-tests/yarn.lock"
 
@@ -733,6 +736,7 @@ jobs:
           PUBLIC_BACKEND_URL: http://localhost:8000
           PUBLIC_WEB_FRONTEND_URL: http://localhost:3000
           PRIVATE_BACKEND_URL: http://backend:8000
+          CI: 1
         run: |
           cd e2e-tests
           CI=1 npx playwright test --timeout=30000 --grep-invert=@slow --shard=${{ matrix.shard }}/2 --project=firefox
@@ -778,7 +782,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "24"
 
       - name: Download all E2E test results
         uses: actions/download-artifact@v4
@@ -919,8 +923,8 @@ jobs:
     if: needs.check-build-and-publish.outputs.should_build_and_publish == 'true' && (github.ref_name == 'develop' || github.ref_name == 'master' || github.event_name == 'workflow_dispatch')
     needs:
       - test-frontend
-      - test-e2e
       - frontend-lint
+      - test-e2e
       - check-build-and-publish
     permissions:
       contents: read

.gitignore

@@ -159,11 +159,10 @@ field-diagrams/
 
 *.http
 
-# Intellij needs this package.json to allow running tests from the IDE but this isn't
-# actually a node module and so we ignore it.
-premium/web-frontend/package.json
 .local/
 
 # Storybook
 web-frontend/.nuxt-storybook/
 web-frontend/storybook-static
+
+.agent

changelog/entries/unreleased/refactor/refactor_children.json

@@ -0,0 +1,8 @@
+{
+    "type": "refactor",
+    "message": "refactor $children",
+    "domain": "core",
+    "issue_number": null,
+    "bullet_points": [],
+    "created_at": "2025-03-21"
+}

docker-compose.dev.yml

@@ -64,35 +64,9 @@ services:
         # reducing the chance the containers screw up the bind mounted folders.
         UID: $UID
         GID: $GID
+    command: "nuxt-dev-with-storybook"
     ports:
       - "${HOST_PUBLISH_IP:-127.0.0.1}:3000:3000"
-    volumes:
-      - ./web-frontend:/baserow/web-frontend
-      - ./premium/web-frontend/:/baserow/premium/web-frontend
-      - ./enterprise/web-frontend/:/baserow/enterprise/web-frontend
-      - ./tests/:/baserow/tests
-      - ./deploy/plugins:/baserow/plugins
-      # dev volumes to avoid polluting your local filesystem with build files or
-      # overwriting existing node_modules.
-      - node_modules:/baserow/web-frontend/node_modules
-      - nuxt:/baserow/web-frontend/.nuxt/
-      - cache:/baserow/web-frontend/.cache/
-    # Open stdin and tty so when attaching key input works as expected.
-    stdin_open: true
-    tty: true
-
-  web-frontend-storybook:
-    image: baserow_web-frontend:dev
-    profiles: ["optional"]
-    restart: unless-stopped
-    environment:
-      FEATURE_FLAGS:
-    networks:
-      local:
-    command: "storybook-dev"
-    healthcheck:
-      disable: true
-    ports:
       - "${HOST_PUBLISH_IP:-127.0.0.1}:6006:6006"
     volumes:
       - ./web-frontend:/baserow/web-frontend
@@ -250,4 +224,4 @@ volumes:
   node_modules:
   nuxt:
   storybook:
-  cache:
+  cache:

docs/installation/configuration-files/supervisor.conf

@@ -35,7 +35,7 @@ stderr_logfile=/var/log/baserow/exportworker.error
 
 [program:nuxt]
 directory=/baserow/baserow/web-frontend
-command=node ./node_modules/.bin/nuxt start --hostname 127.0.0.1 --config-file ./config/nuxt.config.local.js
+command=node ./node_modules/.bin/nuxt start --hostname 127.0.0.1 --config-file ./config/nuxt.config.local.ts
 stdout_logfile=/var/log/baserow/frontend.log
 stderr_logfile=/var/log/baserow/frontend.error
 

e2e-tests/package.json

@@ -13,11 +13,12 @@
     "test-builder": "playwright test --project=chrome --grep builder",
     "test-automation": "playwright test --project=chrome --grep automation",
     "test-headed": "playwright test --project=chrome --headed",
-    "test-ci": "playwright test --grep-invert=@slow",
+    "test-ci": "CI=1 playwright test --grep-invert=@slow",
     "codegen": "playwright codegen"
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
+    "@nuxt/test-utils": "^3.21.0",
     "@playwright/test": "^1.48.0",
     "axios": "1.2.3",
     "dotenv": "16.0.3"

e2e-tests/pages/automation/automationWorkflowPage.ts

@@ -1,19 +1,22 @@
-import { Page } from "@playwright/test"
-import { BaserowPage } from "../baserowPage"
-import { Automation } from "../../fixtures/automation/automation"
-import { AutomationWorkflow } from "../../fixtures/automation/automationWorkflow"
-import { Workspace } from "../../fixtures/workspace"
-
+import { Page } from "@playwright/test";
+import { BaserowPage, PageConfig } from "../baserowPage";
+import { Automation } from "../../fixtures/automation/automation";
+import { AutomationWorkflow } from "../../fixtures/automation/automationWorkflow";
+import { Workspace } from "../../fixtures/workspace";
 
 export class AutomationWorkflowPage extends BaserowPage {
-  automationWorkflow: AutomationWorkflow
-  automation: Automation
-  readonly workspace: Workspace
+  automationWorkflow: AutomationWorkflow;
+  automation: Automation;
+  readonly workspace: Workspace;
 
-  constructor(page: Page, automation: Automation, automationWorkflow: AutomationWorkflow) {
-    super(page)
-    this.automation = automation
-    this.automationWorkflow = automationWorkflow
+  constructor(
+    pageConfig: PageConfig,
+    automation: Automation,
+    automationWorkflow: AutomationWorkflow
+  ) {
+    super(pageConfig);
+    this.automation = automation;
+    this.automationWorkflow = automationWorkflow;
   }
 
   async removeAll() {}

e2e-tests/pages/baserowPage.ts

@@ -2,21 +2,32 @@ import { Locator, Page, expect } from "@playwright/test";
 import { baserowConfig } from "../playwright.config";
 import { User } from "../fixtures/user";
 
+import { GotoOptions } from "@nuxt/test-utils/e2e";
+
+type GotoFn = (url: string, options?: GotoOptions) => Promise<Response | null>;
+
+export type PageConfig = { page: Page; goto: GotoFn };
+
 export class BaserowPage {
   readonly page: Page;
+  readonly _goto: any;
   readonly baseUrl = baserowConfig.PUBLIC_WEB_FRONTEND_URL;
   pageUrl: string;
 
-  constructor(page: Page) {
+  constructor({ page, goto }: PageConfig) {
     this.page = page;
+    this._goto = goto;
   }
 
   async authenticate(user: User) {
     await this.page.goto(`${this.baseUrl}?token=${user.refreshToken}`);
   }
 
-  async goto() {
-    await this.page.goto(this.getFullUrl());
+  async goto(params = {}) {
+    await this._goto(this.getFullUrl(), {
+      waitUntil: "hydration",
+      ...params,
+    });
   }
 
   async checkOnPage() {

e2e-tests/pages/builder/builderPagePage.ts

@@ -1,5 +1,5 @@
 import { Locator, Page } from "@playwright/test";
-import { BaserowPage } from "../baserowPage";
+import { BaserowPage, PageConfig } from "../baserowPage";
 import { Builder } from "../../fixtures/builder/builder";
 import { BuilderPage } from "../../fixtures/builder/builderPage";
 import { Workspace } from "../../fixtures/workspace";
@@ -12,8 +12,12 @@ export class BuilderPagePage extends BaserowPage {
   builder: Builder;
   readonly workspace: Workspace;
 
-  constructor(page: Page, builder: Builder, builderPage: BuilderPage) {
-    super(page);
+  constructor(
+    pageConfig: PageConfig,
+    builder: Builder,
+    builderPage: BuilderPage
+  ) {
+    super(pageConfig);
     this.builder = builder;
     this.builderPage = builderPage;
   }
@@ -24,10 +28,10 @@ export class BuilderPagePage extends BaserowPage {
       .locator(".elements-context")
       .getByText("Element", { exact: true })
       .click();
-    return new BuilderElementModal(this.page);
+    return new BuilderElementModal({ page: this.page, goto: this._goto });
   }
 
-  async selectHeadingByName(name) {
+  async selectHeadingByName(name: string) {
     const heading = await this.page
       .locator(".ab-heading")
       .getByText(name, { exact: true });
@@ -42,7 +46,7 @@ export class BuilderPagePage extends BaserowPage {
     ).toBeVisible();
   }
 
-  async selectButtonByName(name) {
+  async selectButtonByName(name: string) {
     const button = await this.page
       .locator(".ab-button")
       .getByText(name, { exact: true });