basic-ph Posts - Answer Overflow

basic-ph

•Created by basic-ph on 4/19/2024 in #❓・help

useFetch and lazy option

Data fetching docs (https://nuxt.com/docs/getting-started/data-fetching#lazy) say:

By default, data fetching composables will wait for the resolution of their asynchronous function before navigating to a new page by using Vue’s Suspense. This feature can be ignored on client-side navigation with the lazy option. In that case, you will have to manually handle loading state using the pending value.

When I use useFetch like this:

const { pending, data: pizza } = useFetch(
  'https://reqres.in/api/users/1?delay=3',
  {
    lazy: false,
  }
);

const { pending, data: pizza } = useFetch(
  'https://reqres.in/api/users/1?delay=3',
  {
    lazy: false,
  }
);

should I expect a 3 seconds wait before navigation to the page containing this code? I feel like I'm missing some piece of the puzzle here I've created a simple example of this behaviours: https://stackblitz.com/edit/github-7hutqh

18 replies

NNuxt

•Created by basic-ph on 4/13/2023 in #❓・help

500 Infinite redirect in navigation guard

Hello guys, I'm struggling with a global middleware I created to handle some 301 redirects. I've simplified the structure to debug it and I got to this point:

// redirects.global.ts

const redirects301 = [
  {
    from: "/old",
    to: "/",
  },
];

export default defineNuxtRouteMiddleware((to, from) => {
  console.log("from", from.path);
  console.log("to", to.path);

  const match = redirects301.find((item) => item.from == from.path);

  if (match) {
    console.log("REDIRECTING...");
    console.log("match", match);
    return navigateTo(match.to, { redirectCode: 301 });
  }
});

// redirects.global.ts

const redirects301 = [
  {
    from: "/old",
    to: "/",
  },
];

export default defineNuxtRouteMiddleware((to, from) => {
  console.log("from", from.path);
  console.log("to", to.path);

  const match = redirects301.find((item) => item.from == from.path);

  if (match) {
    console.log("REDIRECTING...");
    console.log("match", match);
    return navigateTo(match.to, { redirectCode: 301 });
  }
});

In order to reproduce the issue I followed exactly these steps: - npx nuxi init demo - cd demo - yarn install (Nuxt 3.4.1) - created middleware directory and moved the redirects.global.ts file to it - created pages directory and added index.vue and about.vue - yarn dev - open the following url in your browser: http://localhost:3000/old => "500 Infinite redirect in navigation guard" Other routes work fine, but when the middleware return navigateTo('something') something goes wrong. Any idea? Am I missing something about the logical working of a middleware?

4 replies

NNuxt

•Created by basic-ph on 2/12/2023 in #❓・help

`process.server` and `process.client`

Hello everyone! Disclaimer: Maybe this is a trivial question but I have not been able to find an answer in the documentation or elsewhere on the web. I was wondering where the process.server and process.client syntax used in this example came from: https://github.com/nuxt/nuxt/blob/main/examples/other/locale/composables/locale.ts#L7-L13

5 replies

Gaming

Programming