Resolve router-link lazily in GlNavItem

What does this MR do?

GlNavItem renders a static <router-link> in a v-if branch for items with to. The Vue 3 compiler resolves every static component when render starts, even in a branch that does not render. When VueRouter is not installed, every nav item logs this warning, also the items that use href:

Failed to resolve component: router-link

The GitLab super sidebar has no router on most pages. With the Vue 3 compiler, it logged this warning about 200 times on each page.

This MR renders the link as a dynamic <component> whose is is 'router-link'. A dynamic component resolves only when it renders, so the lookup now happens only for items with to. GlLink already uses this pattern.

There is no change in behavior:

  • With Vue 2, and with the Vue 2 compiler, <router-link> was already resolved when it rendered.
  • With a router installed, the dynamic component resolves to the same RouterLink.

How it was verified

The new spec mounts GlNavItem with href and no RouterLink stub:

  • With VUE_VERSION=3 on main, it fails with Failed to resolve component: router-link.
  • With this change, it passes with VUE_VERSION=2 and VUE_VERSION=3.

Screenshots or screen recordings

Not applicable. No visual change.

Integrations

  • GitLab: not needed, no API change.

References

Edited by Miguel Rincon

Merge request reports

Loading
Loading