🎯 Nuxt3 migration

argilla-frontend/components/base/base-progress/BaseLinearProgress.vue

@@ -26,12 +26,9 @@
           :style="{ left: `${getTrianglePosition(hoveredRange)}%` }"
         />
         <div class="progress__tooltip">
-          <span
-            class="progress__tooltip__percent-info"
-            v-text="
-              `${hoveredRange.name}: ${getPercentage(hoveredRange.value)}%`
-            "
-          />
+          <span class="progress__tooltip__percent-info">{{
+            `${hoveredRange.name}: ${getPercentage(hoveredRange.value)}%`
+          }}</span>
           {{ hoveredRange.tooltip }}
         </div>
       </template>

argilla-frontend/components/base/base-render-markdown/RenderMarkdown.base.component.vue

@@ -10,7 +10,7 @@
 import { marked } from "marked";
 import { markedHighlight } from "marked-highlight";
 import hljs from "highlight.js";
-import * as DOMPurify from "dompurify";
+import DOMPurify from "dompurify";
 import markedKatex from "marked-katex-extension";
 
 const preprocess = (html) => {

argilla-frontend/components/features/annotation/container/useRecordFeedbackTaskViewModel.ts

@@ -1,10 +1,8 @@
 import { useResolve } from "ts-injecty";
-import { ref, onBeforeMount } from "vue-demi";
 import { LoadRecordsToAnnotateUseCase } from "@/v1/domain/usecases/load-records-to-annotate-use-case";
 import { useRecords } from "@/v1/infrastructure/storage/RecordsStorage";
 import { RecordCriteria } from "@/v1/domain/entities/record/RecordCriteria";
 import { GetDatasetVectorsUseCase } from "@/v1/domain/usecases/get-dataset-vectors-use-case";
-import { DatasetVector } from "~/v1/domain/entities/vector/DatasetVector";
 
 export const useRecordFeedbackTaskViewModel = ({
   recordCriteria,
@@ -13,8 +11,6 @@ export const useRecordFeedbackTaskViewModel = ({
 }) => {
   const getDatasetVectorsUseCase = useResolve(GetDatasetVectorsUseCase);
   const loadRecordsUseCase = useResolve(LoadRecordsToAnnotateUseCase);
-
-  const datasetVectors = ref<DatasetVector[]>([]);
   const { state: records } = useRecords();
 
   const loadRecords = async (criteria: RecordCriteria) => {
@@ -37,15 +33,10 @@ export const useRecordFeedbackTaskViewModel = ({
     return isNextRecordExist;
   };
 
-  const loadVectors = async () => {
-    datasetVectors.value = await getDatasetVectorsUseCase.execute(
-      recordCriteria.datasetId
-    );
-  };
-
-  onBeforeMount(() => {
-    loadVectors();
-  });
+  const { data: datasetVectors } = useLazyAsyncData(
+    recordCriteria.datasetId,
+    () => getDatasetVectorsUseCase.execute(recordCriteria.datasetId)
+  );
 
   return {
     records,

argilla-frontend/components/features/annotation/shortcuts/AnnotationHelpShortcut.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <p class="shortcuts__title">Shortcuts</p>
-    <base-spinner v-if="$fetchState.pending" />
+    <!-- TODO: Remove false -->
+    <base-spinner v-if="false" />
     <documentation-viewer
       v-else
       class="shortcuts__content"

argilla-frontend/components/features/datasets/dataset-progress/DatasetProgress.vue

@@ -1,17 +1,14 @@
 <template>
-  <BaseLinearProgressSkeleton
-    v-if="$fetchState.pending"
-    class="dataset-progress__bar"
-  />
+  <BaseLinearProgressSkeleton v-if="!isLoaded" class="dataset-progress__bar" />
   <transition v-else-if="!!progress" name="fade" appear>
     <div class="dataset-progress">
       <p class="dataset-progress__pending-info">
         {{ progress.pending }} {{ $t("datasets.left") }}
       </p>
       <BaseLinearProgress
         class="dataset-progress__bar"
-        :progress-ranges="progressRanges"
-        :progress-max="progress.total"
+        :progressRanges="progressRanges"
+        :progressMax="progress.total"
         :show-tooltip="true"
       />
     </div>

argilla-frontend/components/features/datasets/dataset-progress/useDatasetProgressViewModel.ts

@@ -1,59 +1,61 @@
 import { useResolve } from "ts-injecty";
-import { ref, useFetch } from "@nuxtjs/composition-api";
 import { GetDatasetProgressUseCase } from "@/v1/domain/usecases/get-dataset-progress-use-case";
 import { Dataset } from "~/v1/domain/entities/dataset/Dataset";
 import { useTranslate } from "~/v1/infrastructure/services/useTranslate";
-import { Progress } from "~/v1/domain/entities/dataset/Progress";
 
 export const useDatasetProgressViewModel = ({
   dataset,
 }: {
   dataset: Dataset;
 }) => {
   const getProgressUseCase = useResolve(GetDatasetProgressUseCase);
-  const progress = ref<Progress | null>(null);
-  const progressRanges = ref([]);
 
   const t = useTranslate();
 
-  useFetch(async () => {
-    try {
-      progress.value = await getProgressUseCase.execute(dataset.id);
+  const { status, data: progress } = useLazyAsyncData(
+    `progress-${dataset.id}`,
+    () => getProgressUseCase.execute(dataset.id)
+  );
 
-      progressRanges.value = [
-        {
-          id: "submitted",
-          name: t("datasets.submitted"),
-          color: "#0508D9",
-          value: progress.value.submitted,
-          tooltip: `${progress.value.submitted}/${progress.value.total}`,
-        },
-        {
-          id: "conflicting",
-          name: t("datasets.conflicting"),
-          color: "#8893c0",
-          value: progress.value.conflicting,
-          tooltip: `${progress.value.conflicting}/${progress.value.total}`,
-        },
-        {
-          id: "discarded",
-          name: t("datasets.discarded"),
-          color: "#b7b7b7",
-          value: progress.value.discarded,
-          tooltip: `${progress.value.discarded}/${progress.value.total}`,
-        },
-        {
-          id: "pending",
-          name: t("datasets.left"),
-          color: "#e6e6e6",
-          value: progress.value.pending,
-          tooltip: `${progress.value.pending}/${progress.value.total}`,
-        },
-      ];
-    } catch {}
+  const progressRanges = computed(() => {
+    return [
+      {
+        id: "submitted",
+        name: t("datasets.submitted"),
+        color: "#0508D9",
+        value: progress.value.submitted,
+        tooltip: `${progress.value.submitted}/${progress.value.total}`,
+      },
+      {
+        id: "conflicting",
+        name: t("datasets.conflicting"),
+        color: "#8893c0",
+        value: progress.value.conflicting,
+        tooltip: `${progress.value.conflicting}/${progress.value.total}`,
+      },
+      {
+        id: "discarded",
+        name: t("datasets.discarded"),
+        color: "#b7b7b7",
+        value: progress.value.discarded,
+        tooltip: `${progress.value.discarded}/${progress.value.total}`,
+      },
+      {
+        id: "pending",
+        name: t("datasets.left"),
+        color: "#e6e6e6",
+        value: progress.value.pending,
+        tooltip: `${progress.value.pending}/${progress.value.total}`,
+      },
+    ];
+  });
+
+  const isLoaded = computed(() => {
+    return status.value !== "idle" && status.value !== "pending";
   });
 
   return {
+    isLoaded,
     progress,
     progressRanges,
   };

argilla-frontend/components/features/datasets/dataset-questions/useDatasetQuestions.ts

@@ -1,4 +1,3 @@
-import { ref, useFetch } from "@nuxtjs/composition-api";
 import { useResolve } from "ts-injecty";
 import { Dataset } from "~/v1/domain/entities/dataset/Dataset";
 import { Question } from "~/v1/domain/entities/question/Question";
@@ -9,7 +8,7 @@ export const useDatasetQuestions = ({ dataset }: { dataset: Dataset }) => {
   const questions = ref<Question[]>([]);
   const isQuestionsLoading = ref(false);
 
-  useFetch(async () => {
+  onBeforeMount(async () => {
     try {
       isQuestionsLoading.value = true;
 

argilla-frontend/components/features/global/persistent-storage/usePersistentStorageViewModel.ts

@@ -1,18 +1,13 @@
-import { ref } from "vue-demi";
-import { useFetch } from "@nuxtjs/composition-api";
 import { useRunningEnvironment } from "@/v1/infrastructure/services/useRunningEnvironment";
 import { useRole } from "@/v1/infrastructure/services";
 
 export const usePersistentStorageViewModel = () => {
-  const showBanner = ref(false);
   const { hasPersistentStorageWarning } = useRunningEnvironment();
   const { isAdminOrOwnerRole } = useRole();
 
-  useFetch(async () => {
-    try {
-      showBanner.value = await hasPersistentStorageWarning();
-    } catch (error) {}
-  });
+  const { data: showBanner } = useLazyAsyncData("persistentStorage", () =>
+    hasPersistentStorageWarning()
+  );
 
   return {
     showBanner,

argilla-frontend/components/features/user-settings/UserSettingsContent.vue

@@ -36,7 +36,7 @@
         class="--heading5 --medium description__title"
         v-text="$t('userSettings.fields.workspaces')"
       />
-      <BaseBadgeSkeleton v-if="isLoadingWorkspaces" :quantity="5" />
+      <BaseBadgeSkeleton v-if="!isLoadedWorkspaces" :quantity="5" />
       <div class="workspaces" v-else-if="workspaces.length">
         <BaseBadge
           v-for="workspace in workspaces"

argilla-frontend/components/features/user-settings/useUserInfoViewModel.ts

@@ -1,23 +1,21 @@
-import { useFetch } from "@nuxtjs/composition-api";
 import { useResolve } from "ts-injecty";
-import { ref } from "vue-demi";
 import { GetWorkspacesUseCase } from "~/v1/domain/usecases/get-workspaces-use-case";
 import { useUser } from "~/v1/infrastructure/services/useUser";
 
 export const useUserInfoViewModel = () => {
-  const isLoadingWorkspaces = ref(false);
-  const workspaces = ref<any[]>([]);
   const { user } = useUser();
   const getWorkspacesUseCase = useResolve(GetWorkspacesUseCase);
 
-  useFetch(async () => {
-    isLoadingWorkspaces.value = true;
-    workspaces.value = await getWorkspacesUseCase.execute();
-    isLoadingWorkspaces.value = false;
+  const { status, data: workspaces } = useLazyAsyncData("user", () =>
+    getWorkspacesUseCase.execute()
+  );
+
+  const isLoadedWorkspaces = computed(() => {
+    return status.value !== "idle" && status.value !== "pending";
   });
 
   return {
-    isLoadingWorkspaces,
+    isLoadedWorkspaces,
     workspaces,
     user,
   };

argilla-frontend/nuxt.config.ts

@@ -14,16 +14,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import { NuxtConfig } from "@nuxt/types";
+import { defineNuxtConfig } from "@nuxt/bridge";
 import Mode from "frontmatter-markdown-loader/mode";
 import pkg from "./package.json";
 
 const LOCAL_ENVIRONMENT = "http://localhost:6900";
 const BASE_URL = process.env.API_BASE_URL ?? LOCAL_ENVIRONMENT;
 const DIST_FOLDER = process.env.DIST_FOLDER || "dist";
 
-const config: NuxtConfig = {
+export default defineNuxtConfig({
+  // https://nuxt.com/docs/bridge/overview
+  bridge: {
+    capi: true,
+    typescript: true,
+    nitro: false, // If migration to Nitro is complete, set to true
+  },
   // Disable server-side rendering (https://go.nuxtjs.dev/ssr-mode)
   ssr: false,
   telemetry: false,
@@ -83,17 +88,11 @@ const config: NuxtConfig = {
       path: "~/components",
       pattern: "**/*.vue",
       pathPrefix: false,
-      level: 1,
     },
   ],
 
   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
-  buildModules: [
-    // https://go.nuxtjs.dev/typescript
-    "@nuxt/typescript-build",
-    "@nuxtjs/composition-api/module",
-    ["@pinia/nuxt", { disableVuex: false }],
-  ],
+  buildModules: [["@pinia/nuxt", { disableVuex: false }]],
 
   // Modules (https://go.nuxtjs.dev/config-modules)
   modules: [
@@ -136,10 +135,10 @@ const config: NuxtConfig = {
       target: BASE_URL,
     },
   },
-
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {
     cssSourceMap: false,
+    // @ts-ignore: Unreachable code error
     extend(config) {
       config.resolve.alias.vue = "vue/dist/vue.common";
       config.module.rules.push({
@@ -215,5 +214,4 @@ const config: NuxtConfig = {
     documentationPersistentStorage:
       "https://docs.argilla.io/en/latest/getting_started/installation/deployments/huggingface-spaces.html#setting-up-persistent-storage",
   },
-};
-export default config;
+});

argilla-frontend/package.json

@@ -3,12 +3,12 @@
   "version": "2.0.0dev0",
   "private": true,
   "scripts": {
-    "dev": "nuxt",
-    "yarn-dev:argilla": "cross-env API_URL_CUSTOM=$base_router nuxt",
-    "npm-dev:argilla": "cross-env API_URL_CUSTOM=$npm_config_base_router nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
-    "generate": "nuxt generate",
+    "dev": "nuxt2",
+    "yarn-dev:argilla": "cross-env API_URL_CUSTOM=$base_router nuxt2",
+    "npm-dev:argilla": "cross-env API_URL_CUSTOM=$npm_config_base_router nuxt2",
+    "build": "nuxt2 build",
+    "start": "nuxt2 start",
+    "generate": "nuxt2 generate",
     "postgenerate": "npm run e2e:silent",
     "generate-icons": "vsvg -s ./static/icons -t ./assets/icons --tpl ./assets/icon-template.js.tmp",
     "lint": "eslint --ext .ts,.js,.vue --ignore-path .eslintignore  .",
@@ -24,19 +24,18 @@
     "@codescouts/events": "^1.0.2",
     "@nuxtjs/auth-next": "5.0.0-1613647907.37b1156",
     "@nuxtjs/axios": "^5.12.5",
-    "@nuxtjs/composition-api": "^0.33.1",
     "@nuxtjs/i18n": "^7.3.1",
     "@nuxtjs/style-resources": "^1.0.0",
     "@pinia/nuxt": "^0.2.1",
     "@vuex-orm/core": "^0.36.4",
     "axios": "^1.4.0",
     "core-js": "^3.6.5",
-    "dompurify": "^3.0.3",
+    "dompurify": "^3.1.5",
     "frontmatter-markdown-loader": "^3.7.0",
-    "marked": "^5.0.3",
+    "marked": "^6.0.0",
     "marked-highlight": "^2.0.1",
     "marked-katex-extension": "^5.0.2",
-    "nuxt": "^2.15.8",
+    "nuxt": "^2.17.3",
     "nuxt-highlightjs": "^1.0.2",
     "pinia": "^2.1.4",
     "sass": "^1.49.9",
@@ -56,8 +55,8 @@
     "@babel/preset-typescript": "^7.22.5",
     "@codescouts/test": "^1.0.7",
     "@intlify/eslint-plugin-vue-i18n": "^2.0.0",
+    "@nuxt/bridge": "^3.3.1",
     "@nuxt/types": "^2.15.8",
-    "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@playwright/test": "^1.35.1",
     "@types/jest": "^27.5.2",
@@ -74,6 +73,7 @@
     "jest": "^27.4.5",
     "jest-serializer-vue": "^2.0.2",
     "jest-transform-stub": "^2.0.0",
+    "nuxi": "^3.12.0",
     "prettier": "^2.2.1",
     "sass-loader": "^10.1.0",
     "typescript": "^5.1.6",