Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extending RouterLink example does not compile in TypeScript #1429

Open
TheDutchCoder opened this issue Jun 1, 2022 · 3 comments
Open

Extending RouterLink example does not compile in TypeScript #1429

TheDutchCoder opened this issue Jun 1, 2022 · 3 comments
Labels
docs Concerns the documentation content or the documentation website enhancement New feature or request typescript Problem related to TS typings

Comments

@TheDutchCoder
Copy link

Version

4.0.15

Reproduction link

stackblitz.com

Steps to reproduce

There's an issue with reactivity in the template when extending the routerlink as per example from the docs: https://router.vuejs.org/guide/advanced/extending-router-link.html

The culprit is the ...RouterLink.props prop spread, which (for some reason) makes props unavailable to the template unless you destructure the props with toRefs.

I'm not sure if this a bug in vue-router, a bug in vue, or a limitation/side-effect in general, but the example won't properly build and will throw TS errors (it also throws errors in dev, as you can see in the reproduction).

Uncomment the commented out line with toRefs to make it all work.

What is expected?

Props to be available in the template with having to destructure them and use toRefs

What is actually happening?

Due to ...RouterLink.props the props are no longer directly available in the template.


Again: not sure if it's a bug, or a limitation of sorts.
At least it would be good to add this to the docs if it isn't a bug.

@posva
Copy link
Member

posva commented Jun 8, 2022

This is a current limitation but I think it could be improved

@posva posva added enhancement New feature or request docs Concerns the documentation content or the documentation website labels Jun 8, 2022
@posva posva added the typescript Problem related to TS typings label Jul 18, 2022
@svifty7
Copy link

svifty7 commented Nov 21, 2022

@TheDutchCoder To avoid loss of reactivity, I specify the "to" object in the props

export default defineComponent({
    props: {
        to: {
            type: Object as PropType<RouteLocationPathRaw>,
            required: true
        },
    },
    setup(props) {
        const {
            isActive, href, navigate
        } = useLink(props);

        return {
            href,
            navigate
        };
    }
});

@yoyoys
Copy link

yoyoys commented Nov 21, 2024

is this fixable at feature version?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Concerns the documentation content or the documentation website enhancement New feature or request typescript Problem related to TS typings
Projects
None yet
Development

No branches or pull requests

4 participants