[DOCS] Migration Guide: Upgrading from Nuxt 2 to Nuxt 2 Bridge

[damianpumar]

As we prepare to migrate from Nuxt 2 to Nuxt 3, we'll take a step-by-step approach to ensure a smooth transition. The first step is to upgrade from Nuxt 2 to Nuxt 2 Bridge, a recommended intermediate step that allows us to gradually adapt to the changes in Nuxt 3.

Example:

Migrating a Component

Let's take a look at an example component currently using Nuxt 2:

<template>
  <BaseLinearProgressSkeleton
    v-if="$fetchState.pending"
    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"
        :show-tooltip="true"
      />
    </div>
  </transition>
</template>

<script>
import { useDatasetProgressViewModel } from "./useDatasetProgressViewModel";

export default {
  props: {
    dataset: {
      type: Object,
    },
  },
  setup(props) {
    return useDatasetProgressViewModel(props);
  },
};
</script>

One of the breaking changes in Nuxt 2 Bridge is the removal of $fetchState. To migrate this component, we'll replace $fetchState.pending with a new isLoaded variable:

<template>
  <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"
        :show-tooltip="true"
      />
    </div>
  </transition>
</template>

<script>
import { useDatasetProgressViewModel } from "./useDatasetProgressViewModel";

export default {
  props: {
    dataset: {
      type: Object,
    },
  },
  setup(props) {
    return useDatasetProgressViewModel(props);
  },
};
</script>

By making this change, we can maintain conditional rendering and ensure a smooth transition to Nuxt 2 Bridge.

Updating the View Model

Let's take a look at the useDatasetProgressViewModel:

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);

      progressRanges.value = [
        ...
      ];
    } catch {}
  });

  return {
    progress,
    progressRanges,
  };
};

To migrate this view model to Nuxt 2 Bridge, we'll replace useFetch with useLazyAsyncData:

import { useResolve } from "ts-injecty";
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";

export const useDatasetProgressViewModel = ({
  dataset,
}: {
  dataset: Dataset;
}) => {
  const getProgressUseCase = useResolve(GetDatasetProgressUseCase);

  const t = useTranslate();

  const { status, data: progress } = useLazyAsyncData(
    `progress-${dataset.id}`,
    () => getProgressUseCase.execute(dataset.id)
  );

  const progressRanges = computed(() => {
    return [
      ...
    ];
  });

  const isLoaded = computed(() => {
    return status.value!== "idle" && status.value!== "pending";
  });

  return {
    isLoaded,
    progress,
    progressRanges,
  };
};

By making these changes, we can ensure a smooth transition to Nuxt 2 Bridge and prepare ourselves for the eventual upgrade to Nuxt 3.