Skip to content

Conversation

@pascalbaljet
Copy link
Member

@pascalbaljet pascalbaljet commented Aug 7, 2025

This PR introduces tag-based cache invalidation for prefetch requests. It enables better control over the prefetch cache without having to flush everything.

There's a new tags prop on the Link components:

<Link href="/users/1" prefetch="hover" :tags="['user', 'profile']">
  View Profile
</Link>

And you can pass it as an option to the prefetch method as well:

router.prefetch(
  '/users',
  { method: 'get', data: { page: 2 } },
  { cacheFor: '1m', tags: ['users'] }
)

The router now has a flushByTags method:

router.flushByTags(['user'])  // Flushes all cache entries tagged with 'user'
router.flushByTags(['user', 'product'])  // Flushes entries tagged with 'user' OR 'product'

When making requests, you can flush tagged cache on a successful request:

router.visit('/users', {
  invalidate: ['user']
})

Or by using the useForm() helper"

form.post('/users', { invalidate: ['users'] })

@pascalbaljet pascalbaljet added the prefetching Related to the prefetching feature label Aug 7, 2025
@pascalbaljet
Copy link
Member Author

Renamed tags to cacheTags and invalidate to invalidateCacheTags. Also added support in the new <Form> component:

<template>
  <Form action="/users" method="post" :invalidate-cache-tags="['user']">
    <input name" type="text" placeholder="Enter name" />
    <button type="submit">Submit</button>
  </Form>
</template>

@pascalbaljet pascalbaljet merged commit 78ce553 into master Aug 15, 2025
6 checks passed
@pascalbaljet pascalbaljet deleted the invalidate-prefetch-cache branch August 15, 2025 16:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

prefetching Related to the prefetching feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants