nuxt/nuxt

Multiple `useLazyAsyncData` within a composable becomes non lazy

Open

#25033 opened on Jan 3, 2024

View on GitHub
 (7 comments) (0 reactions) (0 assignees)TypeScript (60,221 stars) (5,607 forks)batch import
good first issue🔨 p3-minor

Description

Environment

  • Operating System: Windows_NT
  • Node Version: v20.2.0
  • Nuxt Version: 3.7.4
  • CLI Version: 3.10.0
  • Nitro Version: 2.8.1
  • Package Manager: pnpm@8.12.0
  • Builder: -
  • User Config: -
  • Runtime Modules: -
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-t7zx5g?file=composables%2Ftest.ts

  • click on to lazy
  • the navigation is blocked

Describe the bug

Using 2 useLazyAsyncData make the page change blocking

Additional context

No response

Logs

No response

Contributor guide

Tech stack
typescriptvuenodejs
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue 3 basicsNuxt 3 basicsUnderstanding of useLazyAsyncData
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
Reproduce the issue using the provided StackBlitz. Examine the composables/test.ts file. Investigate how Nuxt handles multiple concurrent useLazyAsyncData calls during navigation. Look into the Nuxt source code for the useLazyAsyncData implementation to understand the blocking behavior.