Anchor tags with scroll effect in Nuxt 3

#webdev #beginners #vue #nuxt

Building a Single Page Application in Nuxt 3 is quite simple. Every SPA requires links with anchor tags to navigate to sections of the page. That's easy to achieve with an <a> tag with an href='#anchor' attribute that specifies where your link should navigate to.

In Nuxt, I set this up by using NuxtLink with a path and a hash. For instance, this is written in a Navigation.vue file.

Following that, I have a different file probably named WhateverSection.vue. In this section, add an id that is the same name as the one given in our hash.

This should already work. However, it just navigates to a section without any scrolling effect. A nice and smooth scroll effect is important for a pleasant user experience. That is what we would like to accomplish here.

Nuxt 2 has a scrollToTop & scrollBehavior option which isn't available (yet) in Nuxt 3. At least, none of the documentation I read mentioned it.

Another option would be to make use of the scrollIntoView() HTML function, but that doesn't help achieve my goal of adding a scroll effect.

With a little research, I figured I wasn't the only one that encountered this little issue in Nuxt 3.

Here are the steps I followed to achieve this.

First, we have to create a /plugin folder for our application and a router.ts file to contain our code.

In Nuxt or Vue, plugins contain code that should run before a Vue app is created.
Nuxt automatically reads files in the plugin directory so you don't have to worry about loading them directly into your app.

In router.ts, we would set it up with defineNuxtPlugin which basically informs your Nuxt app to create a new plugin. You then want to pass the $router which is an object from your Nuxt app, to give us access to the Vue router options on which we're about to expand. ScrollBehavior is part of Vue's router options

Here, you can set the hash you want to scroll to, where on the screen this section should be placed, and the type of behavior you expect when scrolling.

With this, you can also expand on the plugin adding all sorts of fancy things you want to achieve when scrolling.

I wouldn't have been able to make this post without taking a good peak at the following links:

this solution with the plugin folder structure
this issue that looked just like mine
this response by Daniel Roe. In case you missed it, he gave a talk at VueJs Amsterdam about rapid development with Nuxt 3!
Photo by Ryan Harper on Unsplash

Top comments (5)

Muhamad Jamil • Aug 24 '23

thanks for sharing

Francisco Junior • Feb 22 '23

Very good. Thanks for share.

pnoster • Mar 26 • Edited

Thank you for the tutorial on adding the anchors and for the very idea of smooth scrolling, but the plugin solution doesn't actually work now. I found another solution that works, and it's very elegant:
nuxt.com/docs/guide/going-further/...

rosmis • Jan 13

Hi, thank you for you answer, but i think i doesn't work anymore with the latest version of nuxt.

I found a way to make it work without to have to define a plugin router file check it out:
stackblitz.com/edit/nuxt-3-nuxtlin...

Hope it can help some people around here (cuz i was stuck for at least 1hour trying to figure out the answer as nuxt doens't integrate natively the smoot scrollBehavior method yet)