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.

Assessment

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

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.

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

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

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.

More from TanStack/router

All issues in TanStack/router

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.