fix(nuxt): prefetch object-syntax routes with `<NuxtLink>` by Mini-ghost · Pull Request #19144 · nuxt/nuxt

Mini-ghost · 2023-02-18T16:35:00Z

🔗 Linked issue

Also allow <NuxtLink> to execute prefetch when to type props are RouteLocationRaw #19136

❓ Type of change

📖 Documentation (updates to the documentation or readme)
🐞 Bug fix (a non-breaking change that fixes an issue)
👌 Enhancement (improving an existing functionality like performance)
✨ New feature (a non-breaking change that adds functionality)
⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Based on PR #19120, the preloadRouteComponents function now accepts a RouteLocationRaw type as a value. This update has also been made to <NuxtLink> to allow RouteLocationRaw as a valid value type.

This PR does not modify the type of hook link:prefetch, but obtains router.resolve(to.value).fullPath before calling the hook, because others still need string path, rash modification may cause Breaking change.

nuxt/packages/nuxt/src/pages/runtime/plugins/prefetch.client.ts

Lines 23 to 40 in 7f67fce

    
           nuxtApp.hooks.hook('link:prefetch', (url) => { 
        
             if (hasProtocol(url)) { return } 
        
             const route = router.resolve(url) 
        
             if (!route) { return } 
        
             const layout = route?.meta?.layout 
        
             let middleware = Array.isArray(route?.meta?.middleware) ? route?.meta?.middleware : [route?.meta?.middleware] 
        
             middleware = middleware.filter(m => typeof m === 'string') 
        
             for (const name of middleware) { 
        
               if (typeof namedMiddleware[name] === 'function') { 
        
                 namedMiddleware[name]() 
        
               } 
        
             } 
        
             if (layout && typeof layouts[layout] === 'function') { 
        
               layouts[layout]() 
        
             } 
        
           })

nuxt/packages/nuxt/src/app/plugins/cross-origin-prefetch.client.ts

Lines 26 to 34 in 7f67fce

    
           nuxtApp.hook('link:prefetch', (url) => { 
        
             const { protocol } = parseURL(url) 
        
             if (protocol && ['http:', 'https:'].includes(protocol)) { 
        
               externalURLs.value.add(url) 
        
               head?.patch({ 
        
                 script: [generateRules()] 
        
               }) 
        
             } 
        
           })

nuxt/packages/nuxt/src/app/plugins/payload.client.ts

Lines 14 to 18 in 7f67fce

    
           nuxtApp.hooks.hook('link:prefetch', (url) => { 
        
             if (!parseURL(url).protocol) { 
        
               return loadPayload(url) 
        
             } 
        
           })

📝 Checklist

I have linked an issue or discussion.
I have updated the documentation accordingly.

codesandbox · 2023-02-18T16:35:03Z

Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

danielroe

we currently support prefetching external links if experimental.crossOriginPrefetch is enabled, which the router won't be able to resolve. Maybe worth adding a check for whether a link is external?
if we resolve in the link:prefetch hook we'll end up double-resolving
possible solution to 1 and reduction in resolutions - we can skip if to.value is already a string?

Mini-ghost · 2023-02-19T04:49:47Z

If it is an external link, to.value is a string, so I only judge whether to.value is a string, if yes, skip it, if not, execute router.resolve(to.value) .

nathanchase · 2023-03-03T02:50:45Z

FYI: Something in this PR broke NuxtLink (or perhaps #19309), and am now getting flooded with
[Vue warn]: Extraneous non-props attributes (rel) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. anywhere that uses a custom NuxtLink template.

Example:

<NuxtLink
  v-slot="{ href }"
  :custom="true"
  :to="`/user/${id}`"
>
    <a :href="href">
      <img src="avatar.png">
    </a>
</NuxtLink>

The above doesn't error in 3.2.2, but does in 3.2.3. - I will try to create a repro of the error in a nuxt.new StackBlitz.

nathanchase · 2023-03-03T03:00:49Z

StackBlitz with the error:
https://stackblitz.com/edit/github-hmvahh?file=app.vue

danielroe · 2023-03-03T06:45:46Z

That should be resolved in the edge channel, or in the next release with #19379

Mini-ghost added 2 commits February 18, 2023 23:08

feat(nuxt): enable <NuxtLink> to accept RouteLocationRaw values

303e541

fix: ensure hook link:prefetch payload is string

97e1abd

TheAlexLichter requested a review from danielroe February 18, 2023 16:58

danielroe reviewed Feb 18, 2023

View reviewed changes

Mini-ghost added 2 commits February 19, 2023 08:38

chore: remove meaningless changes

3bada4f

feat(nuxt): skip resolve when to.value is string

02951ba

atinux approved these changes Feb 20, 2023

View reviewed changes

danielroe approved these changes Feb 20, 2023

View reviewed changes

danielroe changed the title ~~feat(nuxt): enable <NuxtLink> to accept RouteLocationRaw values~~ fix(nuxt): prefetch object-syntax routes with <NuxtLink> Feb 20, 2023

danielroe merged commit 268cded into nuxt:main Feb 20, 2023

danielroe mentioned this pull request Feb 20, 2023

Also allow <NuxtLink> to execute prefetch when to type props are RouteLocationRaw #19136

Closed

4 tasks

Mini-ghost mentioned this pull request Feb 21, 2023

feat(nuxt): enable preloading object-syntax routes #19120

Merged

7 tasks

danielroe mentioned this pull request Feb 27, 2023

v3.2.3 #19317

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(nuxt): prefetch object-syntax routes with `<NuxtLink>`#19144

fix(nuxt): prefetch object-syntax routes with `<NuxtLink>`#19144
danielroe merged 4 commits into
nuxt:mainfrom
Mini-ghost:feature/enhance-nuxt-link-components

Mini-ghost commented Feb 18, 2023

Uh oh!

codesandbox Bot commented Feb 18, 2023

Uh oh!

danielroe left a comment

Uh oh!

Mini-ghost commented Feb 19, 2023

Uh oh!

nathanchase commented Mar 3, 2023 •

edited

Loading

Uh oh!

nathanchase commented Mar 3, 2023

Uh oh!

danielroe commented Mar 3, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	nuxtApp.hooks.hook('link:prefetch', (url) => {
	if (hasProtocol(url)) { return }
	const route = router.resolve(url)
	if (!route) { return }
	const layout = route?.meta?.layout
	let middleware = Array.isArray(route?.meta?.middleware) ? route?.meta?.middleware : [route?.meta?.middleware]
	middleware = middleware.filter(m => typeof m === 'string')

	for (const name of middleware) {
	if (typeof namedMiddleware[name] === 'function') {
	namedMiddleware[name]()
	}
	}

	if (layout && typeof layouts[layout] === 'function') {
	layouts[layout]()
	}
	})

	nuxtApp.hook('link:prefetch', (url) => {
	const { protocol } = parseURL(url)
	if (protocol && ['http:', 'https:'].includes(protocol)) {
	externalURLs.value.add(url)
	head?.patch({
	script: [generateRules()]
	})
	}
	})

	nuxtApp.hooks.hook('link:prefetch', (url) => {
	if (!parseURL(url).protocol) {
	return loadPayload(url)
	}
	})

Uh oh!

Uh oh!

Conversation

Mini-ghost commented Feb 18, 2023

🔗 Linked issue

❓ Type of change

📚 Description

📝 Checklist

Uh oh!

codesandbox Bot commented Feb 18, 2023

Uh oh!

danielroe left a comment

Choose a reason for hiding this comment

Uh oh!

Mini-ghost commented Feb 19, 2023

Uh oh!

nathanchase commented Mar 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nathanchase commented Mar 3, 2023

Uh oh!

danielroe commented Mar 3, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nathanchase commented Mar 3, 2023 •

edited

Loading