Allow localization of query parameters via useSetI18nParams

[Tofandel]

🔗 Linked issue

#3377

📚 Description

Since we know which params and query args are available on a route we are already on, we can split them correctly between params and query without additional changes to setI18nParams

Also prevents the hash being included in switchLocalePath if the app is being hydrated from SSR (because the hash is never sent to the server and would be missing from the SSR, causing hydration mismatch)

Summary by CodeRabbit

• Bug Fixes

  • Locale-switch routing now merges localized dynamic params and query keys correctly.
  • URL hash handling during SSR hydration fixed so hashes aren’t incorrectly preserved.

• New Features

  • Added SSR-hydration state detection to refine locale-switch path generation.
  • UI: added a "Translate query" link on product pages to generate translated query parameters.

• Tests

  • Added tests validating translated query params, locale-switch behavior during hydration, and suppression of hydration warnings.

[coderabbitai]

Walkthrough

The diff changes locale switching to compute localized dynamic params and split them into params and query, then merge those into route.params and route.query respectively. switchLocalePath now conditionally clears the route hash when SSR hydration is active. A new composable API, isHydratingSSR, exposes the SSR hydration state. A minor type annotation was added in domainFromLocale. Tests and fixtures were updated: added test helpers to override localized params, an isHydratingSSR test hook, translated-query navigation in fixtures, and console interception/assertions to ensure no hydration warnings.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Inspect routing.ts: verify correct separation of localized dynamic params into params vs query and merging behavior.
• Check SSR-hydration conditional hash clearing and interaction with isHydratingSSR.
• Confirm createComposableContext exposes isHydratingSSR and its boolean logic.
• Review tests: setI18nParams helper, isHydratingSSR test hook, updated expectations for hash behavior, and console interception for hydration warnings.

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: enabling localization of query parameters through useSetI18nParams, which is the primary feature added across multiple files.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fb6558a and d5037cc.

📒 Files selected for processing (5)

• specs/basic_usage.spec.ts (1 hunks)
• specs/fixtures/basic_usage/app/pages/products.vue (1 hunks)
• specs/fixtures/basic_usage/app/pages/products/[slug].vue (1 hunks)
• specs/routing/routing-tests.ts (1 hunks)
• test/kit.test.ts (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (5)

• test/kit.test.ts
• specs/fixtures/basic_usage/app/pages/products/[slug].vue
• specs/routing/routing-tests.ts
• specs/fixtures/basic_usage/app/pages/products.vue
• specs/basic_usage.spec.ts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Tofandel]

I modified this test because the current behavior would have logged this in the console

[Vue warn]: Hydration attribute mismatch on <a href=​"/​hu/​termek-kategoria/​nappali/​" class title=​"Magyar">​HU​</a>​ 
  - rendered on server: href="/hu/termek-kategoria/nappali/"
  - expected on client: href="/hu/termek-kategoria/nappali/#quote"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 

Hydration completed but contains mismatches.

Meaning in a production build, the dom would not have been corrected like on the playwright test and an error about hydration mismatch would have been logged.

There is sadly not much that we can do about this unless we change the return of switchLocalePath to a computed so that we can update it once the hydration is done. (Which would be a breaking change)