Failed to resolve directive: scroll-to Vue-scrollto

Question

I am making a web application with Vue js(i am a newbie on vue js), specifically Vue 2.x. I want to click in an element of a menu, and then scroll to the that element. I have thought to use this tool https://vue-scrollto.netlify.app/examples/ as it is exactly what i want to do.

The problem is that when I repeat the same the code as in the examples, I receive the error "[Vue warn]: Failed to resolve directive: scroll-to". Here is my code:

<div :class="{subelementos: isOpenAndroid}">
        <div class="subelementos2">
          <p v-scroll-to="'#prueba'" class="subelementos3" @click="menuClick('android')">Principios</p>

        </div>
</div>

And then in another component:

<div id="prueba">
      <p>TEXTEXT</p>
</div>

I don't know if someone is familiar with this tool. I think i am missing something important.

PS: Maybe is a stupid question(sorry about that) but, do you think is mandatory to use Nuxtjs? On the official page of the tool it is mentioned, but I think is optional https://vue-scrollto.netlify.app/docs/#nuxt-js.

----EDIT----

The HTML, CSS and JS are in the same file, specifically on a .vue file. I think that maybe I have to import an external library into my .vue file.

Answer 1

The error indicates that you haven't registered the directive.

The vue-scrollto docs describe how to setup the directive. The plugin automatically registers the directive under the hood, and you can install the plugin in your app's entry point with Vue.use():

// main.js
import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo)

demo