Smooth scroll to an element in a Vue 2 / Vue 3

Published 
Vue

Sometimes there's a need to make a smooth scroll in to some html element/component on any event.

Vue 2 example:

<template>
  <div>
    <some-component ref="comp">element</some-component>
    <button @click="scrollTo">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    scrollTo() {
      this.$refs.comp.$el.scrollIntoView({ behavior: 'smooth' })
    }
  }
}
</script>

Vue 3 example:

<template>
  <some-component ref="comp">element</some-component>
  <button @click="scrollTo">Click me</button>
</template>

<script setup>
const comp = ref(null)

function scrollTo() {
  comp.value.scrollIntoView({ behavior: 'smooth' })
}
</script>

$el is not available anymore in a Vue 3.