TanStack / TanStack/router

feat(vue-router): add `styles` to Vue `RouteMatchExtensions` augmentation

Open Beginner friendly
#7,318 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Summary

The RouteMatchExtensions interface in packages/vue-router/src/Matches.tsx is missing a styles field, unlike the React and Solid counterparts which include it.

This gap pre-dates PR #7311 (feat: add support for deferred head loading), which added key?: string support to the existing fields but did not introduce the missing styles entry for Vue.

Required Change

Add the following field to the RouteMatchExtensions module augmentation in packages/vue-router/src/Matches.tsx:

styles?: Array<
  (Vue.ComponentOptions['style'] & { key?: string }) | undefined
>

This should be placed alongside meta, links, scripts, and headScripts to match the React/Solid augmentations and provide full type coverage for keyed/deferred head().styles in Vue.

References

/cc @romulovalez

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open packages/vue-router/src/Matches.tsx and read the RouteMatchExtensions module augmentation, then compare its meta, links, scripts, and headScripts fields with the React and Solid counterparts. Done means the Vue augmentation includes the requested optional styles type and provides coverage for keyed or deferred head().styles.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
1/5
Estimated time
Under an hour
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.