The Be Sure Blog

Code Snippets | Problem Solving | Tips & Tricks

The Be Sure Blog banner

Add smooth scrolling to a Vue 3 website

posted on 2.2.2023 by Below Surface in "Vue.js"

To add smooth scrolling to a website, just a few steps are needed:

$ npm install --save vue3-smooth-scroll

In main.ts, add:

import VueSmoothScroll from 'vue3-smooth-scroll'

and add ".use(VueSmoothScroll)", like here:


Now add "v-smooth-scroll" to each <a> tag that should have smooth scrolling. The navigation may look like this now:

  <a href="#top" v-on:click="toggleNav" v-smooth-scroll>Top</a>
  <a href="#about" v-on:click="toggleNav" v-smooth-scroll>About</a>
  <a href="#services" v-on:click="toggleNav" v-smooth-scroll>Services</a>
  <a href="#skills" v-on:click="toggleNav" v-smooth-scroll> Skills</a>
  <a href="#references" v-on:click="toggleNav" v-smooth-scroll>References</a>
  <a href="#contact" v-on:click="toggleNav" v-smooth-scroll>Contact</a>

And that's all! Just restart the local development server and make sure the sections have the correct id, like:

<div className="about" id="about"></div>


vue 3
smooth scrolling
npm package


More posts of this category

Getting started with global state management in Vue.js

How to use the Vue.js global store called Vuex


Building a custom image slider in Vue.js

From a Vue.js newbie: How to build a custom image slider


Install and use the router in Vue 3

Learn how to implement page routing in Vue 3


How to send emails from a Vue 3 client app

Learn how to use Emailjs to send emails from your client app