Skip to content

Conversation

Copy link

Copilot AI commented Aug 2, 2025

This PR adds comprehensive support for Inertia Prefetch functionality to the vuetify-inertia-link plugin, following Inertia.js's exact implementation patterns and behavior.

What's New

The plugin now supports Inertia-style prefetching with proper defaults and multiple prefetch modes:

  • Disabled by Default: Prefetching is disabled by default, matching Inertia.js behavior
  • Multiple Prefetch Modes: Support for 'hover', 'click', and 'mount' modes exactly like Inertia
  • Proper Timing: 75ms hover delay matching Inertia's implementation
  • Smart Caching: 30-second default cache duration with configurable cacheFor prop
  • Current Page Detection: Automatically avoids prefetching the current page

Usage

By default, links do not prefetch (matching Inertia's behavior):

<!-- No prefetching by default -->
<v-btn :to="route('dashboard')">Dashboard</v-btn>

Enable prefetching explicitly:

<!-- Enable hover prefetching -->
<v-btn :to="route('dashboard')" :prefetch="true">Dashboard</v-btn>

<!-- Specific prefetch modes -->
<v-btn :to="route('dashboard')" prefetch="hover">Hover prefetch</v-btn>
<v-btn :to="route('dashboard')" prefetch="click">Click prefetch</v-btn>
<v-btn :to="route('dashboard')" prefetch="mount">Mount prefetch</v-btn>

<!-- Multiple modes -->
<v-btn :to="route('dashboard')" :prefetch="['hover', 'click']">Multiple modes</v-btn>

<!-- Custom cache duration -->
<v-btn :to="route('dashboard')" :prefetch="true" :cache-for="60000">60s cache</v-btn>

Implementation Details

The implementation closely follows Inertia's Vue3 link component:

  1. Prefetch Modes:

    • hover: Prefetches after 75ms hover delay (Inertia's exact timing)
    • click: Prefetches on mousedown, navigates on mouseup for instant feel
    • mount: Prefetches immediately when component renders
  2. Event Handling: Different event handlers for each prefetch mode, matching Inertia's patterns

  3. Caching: Uses Inertia's router.prefetch() with proper cacheFor options

  4. Smart Defaults: When prefetch={true}, defaults to 'hover' mode like Inertia

Backward Compatibility

This is a breaking change in default behavior but maintains API compatibility:

  • Existing code without prefetch props continues to work (no prefetching)
  • Previous implementations expecting prefetch-by-default need explicit prefetch={true}

Fixes #2.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Co-authored-by: gigerIT <64487711+gigerIT@users.noreply.github.com>
Copilot AI changed the title [WIP] Support for prefetch Add Inertia Prefetch support for improved navigation performance Aug 2, 2025
Copilot AI requested a review from gigerIT August 2, 2025 14:59
Copilot finished work on behalf of gigerIT August 2, 2025 14:59
@gigerIT
Copy link
Owner

gigerIT commented Aug 2, 2025

@copilot analyze the docs https://inertiajs.com/prefetching.md and implement everything like Inertia did (e.g. prefetch=false as default).

Analyze their source https://github.com/inertiajs/inertia to figure out how prefetch is implemented and how you can adapt to it from this plugin.

Co-authored-by: gigerIT <64487711+gigerIT@users.noreply.github.com>
Copy link
Author

Copilot AI commented Aug 2, 2025

@copilot analyze the docs https://inertiajs.com/prefetching.md and implement everything like Inertia did (e.g. prefetch=false as default).

Analyze their source https://github.com/inertiajs/inertia to...

I've analyzed the Inertia.js source code and completely reimplemented the prefetching to match their exact behavior. Key changes made in commit 892b47f:

Fixed Default Behavior: Changed prefetch default from true to false to match Inertia.js
Proper Prefetch Modes: Implemented 'hover' (75ms timeout), 'click', and 'mount' modes exactly like Inertia
Correct Timing: Updated timeout from 100ms to 75ms to match Inertia's implementation
Caching Support: Added cacheFor prop with 30-second default matching Inertia's behavior
Event Handling: Restructured event handlers to match Inertia's patterns for different prefetch modes

The implementation now follows Inertia's source code patterns precisely, with prefetch disabled by default and explicit opt-in behavior.

Copilot AI changed the title Add Inertia Prefetch support for improved navigation performance Add Inertia Prefetch support with disabled-by-default behavior Aug 2, 2025
Copilot finished work on behalf of gigerIT August 2, 2025 15:37
@gigerIT gigerIT changed the title Add Inertia Prefetch support with disabled-by-default behavior Add Inertia Prefetch support Aug 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support for prefetch

2 participants