Anchor tags with scroll effect in Nuxt 3

Adjoa Wadee — Wed, 15 Feb 2023 16:40:59 +0000

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

Using Tailwind's @apply in Vue3 + Nuxt3

Adjoa Wadee — Tue, 14 Feb 2023 13:26:07 +0000

Tailwind is great because it offers utility first styling.
Providing low-level styling, it can sometimes feel like writing inline styling.
I can already see the benefits of Tailwind including rapid development and it's performance advantages.
I noticed how long these stylings go to achieve the look I am going for.
Repeated lines of code that can be a quite annoying and it's not very readable.

That is until I discovered the @apply directive.

Consider this section

simplified to this..

In Vue, you can add styles to a Single File Component (SFC) in the <styles> tag. Here we can encapsulate the styling of this file. It's also a good practice to scope the style to this component.

This helps keeping code clean and readable.

DEV Community: Adjoa Wadee

Anchor tags with scroll effect in Nuxt 3

Using Tailwind's @apply in Vue3 + Nuxt3