cinder crag
Hello, I am trying to restore the extact state of a page when its being returned to (router.back())
I believe its the exact useCase for the keepalive parameter of the definePageMeta.
The problem lies when I use keepalive, it seems to do absolutely nothing. the page still needs to reload everything, all of the refs gets reset as well as the scroll state.
Please tell me whats wrong about my page, or if I'm mistaken about the useCase of keepalive and how to keep the state of a page.
nocturne jacinthBOT
Hi @cinder crag. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Your understanding of the use case is correct — keepalive: true in definePageMeta is exactly meant to preserve page state across route changes. However, there is a known bug in Nuxt 4 that explains why it doesn't work in your scenario.
In Nuxt 4, KeepAlive only works correctly for a page if all participating routes also have keepalive: true. If you navigate from Page A (with keepalive: true) to Page B (without keepalive), and then go back, Page A will be re-mounted instead of restored from cache. [GitHub Issue #34522]
This has been confirmed as a bug and a fix has been merged (PR #34526), which introduces a cache of pages kept alive via definePageMeta and prevents the <KeepAlive> component from being removed when it's needed. [fix PR #34526]
As a temporary workaround, add keepalive: true to all pages involved in the navigation (including the destination pages like Page B):
<!-- pages/page-b.vue -->
<script setup lang="ts">
definePageMeta({
keepalive: true,
})
</script>
If you're using Nuxt 4 and want to use include/exclude with <KeepAlive>, be aware that Vue assigns component names based on filenames by default (e.g., both pages/foo/index.vue and pages/bar/index.vue would be named index), making name-based filtering unreliable. You can enable the normalizePageNames experimental feature to fix this: [normalizePageNames docs]
// nuxt.config.ts
export default defineNuxtConfig({
experimental: {
normalizePageNames: true,
},
})
Then use it like:
<template>
<NuxtPage :keepalive="{ include: ['foo'] }" />
</template>
keepalive is correct — the issue is a known Nuxt 4 bug that is already fixed in a pending PR.
cinder crag
ok, it seems the bug is the cause of my problem. then @nocturne jacinth tell me which realease of nuxt will get the fix and also since in my app you can navigate through all pages from all pages, how can I add keepalive to all pages
nocturne jacinthBOT
Let me check the knowledge base for you again. One moment! :books:
Based on the knowledge sources, the fix (PR #34526) was included in Nuxt v4.4.3. The changelog for that release lists it under fixes: [v4.4.3 changelog]
fix(nuxt): respect per-page keepalive set via
definePageMeta
So updating to nuxt >= 4.4.3 should resolve the issue.
Instead of adding keepalive: true to every single page file, you can set it globally in your nuxt.config.ts using the app.keepalive option. This applies KeepAlive to all pages by default and can still be overridden per-page with definePageMeta: [nuxt config docs]
// nuxt.config.ts
export default defineNuxtConfig({
app: {
keepalive: true,
},
})
This is the cleanest solution for your case since you mentioned users can navigate between all pages from all pages.
app.keepalive: true globally. That way you don't need to touch individual page files, and the bug with per-page keepalive not persisting state will also be resolved.
cinder crag
ok @nocturne jacinth firstly is the 4.4.3 properly released ? and im currently on 4.2.1, are there breaking changes ?
nocturne jacinthBOT
Let me check the knowledge base for you again. One moment! :books:
Yes, based on the knowledge sources, v4.4.3 is a confirmed patch release with a changelog entry. [v4.4.3 changelog] You can upgrade using:
npx nuxt upgrade
The knowledge sources don't contain detailed changelogs for every version between 4.2.1 and 4.4.3. However, since these are all patch releases (4.2.x → 4.4.x are minor/patch versions), and Nuxt follows semver where breaking changes should not appear in minor or patch releases, you should be safe to upgrade. [release cycle]
The v4.4.3 changelog I can see contains only:
keepalive fix you need)No breaking changes are listed. [v4.4.3 changelog]
⚠️ I can only confirm what's in the provided knowledge sources. For a full list of changes between 4.2.1 and 4.4.3, I'd recommend checking the Nuxt releases page on GitHub directly to review each version's notes before upgrading.
cinder crag
@nocturne jacinth npx nuxt upgrade upgraded me to 4.4.2
nocturne jacinthBOT
Let me check the knowledge base for you again. One moment! :books:
That's expected — npx nuxt upgrade installs the latest stable release, and based on the knowledge sources, v4.4.3 was the next planned patch release (not yet published at the time of those sources). [v4.4.3 changelog]
The good news is that v4.4.2 still contains many bug fixes and is a significant improvement over 4.2.1. However, the specific keepalive fix (PR #34526) was slated for v4.4.3, so it may not be in 4.4.2 yet.
What you can do:
Try the workaround — add keepalive: true globally in nuxt.config.ts while on 4.4.2:
export default defineNuxtConfig({
app: {
keepalive: true,
},
})
Wait for v4.4.3 and run npx nuxt upgrade again once it's published to npm. You can check the current latest version at npmjs.com/package/nuxt.
Use the nightly channel to get the fix immediately: [nightly release channel]
{
"devDependencies": {
"nuxt": "npm:nuxt-nightly@latest"
}
}
⚠️ The nightly channel may have instabilities, so use it with caution in production.