Nuxt link to anchor links not working

[nuwanz]

Hello Experts, I'm new to web development.
I have hard time figuring out below task using nuxt-link.

<a href="#after">After Effects</a>

Nuxt link doesn't scroll like simple html code does.

<nuxt-link to="#after">After Effects</nuxt-link>

Any possible help/tip will be highly appreciated.

[Flanker72]

Hi! Use NuxtLink when you need to use vue-router (implement smooth navigation between different pages). To use anchor navigation you still can use a plain link (a).

[kissu]

I'm summoning the nuxt-link master aka @lihbr to see if this could be implemented or if there is a sneaky param that we could pass to Nuxt's component.

Asking because I got this exact question here today: https://stackoverflow.com/q/73069572/8816585
I don't see any option here: https://v3.nuxtjs.org/api/components/nuxt-link#props

Nvm, :external="true" does the trick. 👍🏻
In OP's example, that would be

<nuxt-link :to="{ hash: '#after' }" :external="true">After Effects</nuxt-link>

Thanks Lucie! 🙏🏻

[atinux]

Could we support it without having to specify external true?

[lihbr]

I guess we could check for the path to be only a hash and treat it as external automatically if so: https://github.com/nuxt/framework/blob/main/packages/nuxt/src/app/components/nuxt-link.ts#L145

return to.value === '' || to.value.startsWith("#") || hasProtocol(to.value, true)

Afaik, UFO doesn't have utils for that: https://github.com/unjs/ufo/blob/main/src/utils.ts @pi0

[lihbr]

Re: opened a PR nuxt/framework#9983

[ShaggyTech]

This is possible by creating /app/router.options.ts (see below example) and then just using to="#some-page-anchor" in NuxtLink

I suppose this to mean either Nuxt or Vue Router already converts any to prop that starts with '#' into to.hash, at least when accessed through router.options. NuxtLink just passes the ‘to’ prop as a string if it detects it’s not an external link.

Live example: Stackblitz

// app/router.options.ts
import type { RouterConfig } from '@nuxt/schema';

// https://router.vuejs.org/api/#routeroptions
export default <RouterConfig>{
  scrollBehavior: (to, from, savedPosition) => {
    // scroll to hash, useful for using to="#some-id" in NuxtLink
    // ex: <NuxtLink to="#top"> To Top </NuxtLink>
    if (to.hash) {
      console.log('to.hash: ', to.hash);
      return {
        el: to.hash,
        behavior: 'smooth',
      };
    }

    // The remainder is not relevant to this discussion but maybe useful as well

    // if link is to same page, scroll to top with smooth behavior
    if (to === from) {
      return {
        left: 0,
        top: 0,
        behavior: 'smooth',
      };
    }

    // this is an example for how to use saved scroll position on browser forward/back navigation
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          left: savedPosition?.left || 0,
          top: savedPosition?.top || 0,
        });
      }, 500);
    });
  },
};

[jclaessens97]

This works great, except the router-link-exact-active and router-link-active aren't working. Every NuxtLink on the whole page is now marked as both active and exactActive.

Any idea on how to overcome this as well? I'm guessing active is fine, but exactActive isn't the correct behaviour.

[jclaessens97]

I have changed your snippet to the following:

/**
 * @see https://github.com/nuxt/framework/discussions/5561#discussioncomment-3411408
 */

import type { RouterConfig } from '@nuxt/schema';

const activeClass = 'router-link-active';
const exactActiveClass = 'router-link-exact-active';

export default <RouterConfig>{
  // scroll to hash, useful for using to="#some-id" in NuxtLink
  // ex: <NuxtLink to="#top"> To Top </ NuxtLink>
  scrollBehavior: (to, from, savedPosition) => {
    const nuxtLinks = document.querySelectorAll(`.${activeClass}`);

    if (to.hash) {
      const active = Array.from(nuxtLinks).find((el: HTMLAnchorElement) => {
        return el.href.includes(to.fullPath);
      });

      if (active) {
        nuxtLinks.forEach(
          (el) => (el.className = el.className.replaceAll(exactActiveClass, ''))
        );
        active.classList.add(exactActiveClass);
      }

      return {
        el: to.hash,
        behavior: 'smooth',
      };
    }

    // If link is to same page, scroll to top with smooth behavior
    if (to === from) {
      return {
        left: 0,
        top: 0,
        behavior: 'smooth',
      };
    }

    // This will use saved scroll position on browser forward/back navigation
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          left: savedPosition?.left || 0,
          top: savedPosition?.top || 0,
        });
      }, 500);
    });
  },
};

This works for my case, but may break things in other cases.

[ChrisScrumping]

For those looking to get this working between different pages eg from /something to /else#anchor <nuxt-link to="/else#anchor">Anchor</nuxt-link> I used the examples above with https://router.vuejs.org/guide/advanced/scroll-behavior.html#delaying-the-scroll

[CatalinGheorghiu]

isn't there any more elegant solution for this? Not using NuxtLink would still require a smooth scroll implementation, but using selectors doesn't seem to be a good idea?

[m-shum]

I don't know if breaking changes in newer versions of Nuxt are responsible, but Vue Router is having some issues defining the element based on the hash. I get the following error:

[Vue Router warn]: Couldn't find element using selector "#work" returned by scrollBehavior.

The selector definitely exists on the page and is not rendered conditionally or client-only. I know the workaround for that would be to manually select it and use something like scroll into view, but that defeats the point of having vue router handle scroll behavior.