docs: Show Vue code on expiry, error, validation and normalization pages

[ntucker]

Requested by Nathaniel · project thread

Before: /vue/concepts/expiry-policy, error-policy, validation and normalization showed React playgrounds and components (useEffect, AsyncBoundary, @data-client/react imports).

After: each React block sits in :::react with a Vue SFC alongside it in :::vue, and the playgrounds use FrameworkPlayground. The Vue pages also get Vue titles.

How:

• expiry-policy: Vue versions of all six demos. Param-switching demos remount with :key inside <Suspense timeout="0"> so they suspend for the new id. The "Invalidate" section now explains that Vue keeps showing the previous data while it refetches (it can't suspend again after setup), and that useCache() returns undefined and useDLE()'s loading is true meanwhile (checked against the Vue tests). The React Native note is React-only.
• error-policy: getUpdated and createError move to a shared file both frameworks import. FAKE_ERROR now clears itself after one failed fetch, which replaces the React useEffect cleanup.
• normalization: Vue versions of the mutation examples. The "React" tab is renamed "Component", since a tab label can't vary by framework.
• validation: Vue versions of the three demos.

Not included: Controller.md and mockInitialState.md are already covered by #4117. _useCancelling.mdx only renders on React pages, and _useTransition.mdx isn't imported anywhere.

Docs only, so no changeset.

🤖 Generated with Claude Code

https://claude.ai/code/session_01LsC4xtSrEMKiB83pucAyLG

---

Generated by Claude Code

---

Note

Low Risk
Documentation-only updates to concept pages and live examples; no runtime or library code changes.

Overview
Vue concept pages for expiry policy, error policy, validation, and normalization now mirror the React docs: interactive examples use FrameworkPlayground instead of HooksPlayground, with shared API snippets and parallel :::react / :::vue blocks (Vue SFCs using @data-client/vue).

Expiry policy adds Vue versions of all six demos; param-switching uses :key on TimePage inside <Suspense timeout="0"> so remounts suspend. The invalidate section documents Vue-specific behavior (no re-suspend after setup; useCache() / useDLE() signals during refetch) and scopes the React Native note to React only.

Error policy and validation get vue_title frontmatter. Error policy refactors demo helpers into shared getUpdated / createError; FAKE_ERROR clears after one failed fetch (replacing React useEffect cleanup). Normalization renames the tab to Component and adds Vue mutation examples alongside React.

^{Reviewed by Cursor Bugbot for commit cbd1708. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: cbd1708

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
docs-site	Ignored		Oct 4, 2026 9:51pm UTC

[ntucker]

Staff engineer (Cursor agent): LGTM. No changes requested for this PR.

What I checked:

• The Vue demos line up with how @data-client/vue's useSuspense actually behaves on this tip. Errors surface by throwing on read, so the hard-error buttons reach the onErrorCaptured handler in ShowTime.vue. Vue keeps the previous data while refetching rather than suspending again, which matches the new Invalidate wording.
• Making FAKE_ERROR fail once in the shared getUpdated is simpler than the React useEffect cleanup and behaves the same, or better, on both pages. A soft fetch no longer leaves the fake error set for later revalidations.
• The inline :react[...]:vue[...] heading with {#invalidate} and the ::::react wrapper around the nested :::info both resolve through remarkFramework's recursive filterChildren.
• Renaming the normalization tab from React to Component is right, since a tab label can't vary by framework, and nothing groups or links to that tab value.

No follow-ups. The repeated Vue SFCs across playgrounds are expected, because each playground is self-contained, the same way the React side is.