Not working with Nuxtjs

[aheadfullofcode]

trafficstars

Hi,

Nuxt Version: v2.13.0

I can't figure out how to get this working with Nuxt JS.

I've imported the module as stated in the docs.

modules: [ 'vue-scrollto/nuxt', ]

My markup in my component is as follows:

<a href="#" v-scroll-to="'#' + navItem" v-html="navItem" />

As a result, I get the following error and the scroll doesn't work at all.

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve directive: scroll-to

Am I missing a step? I am trying to apply the module to a list of LI's, should that cause issues? I think it's a pretty standard use case.

Thanks in advance

[bc010101]

Same here

[RemiTiab]

Hello,

I use that with Nuxt.js and work for me.

modules: [ "vue-scrollto/nuxt", ],

<nav> <ul> <li v-for="nav in navs" :key="nav.id" :class="[name, { active: nav.active }]" > <a v-scroll-to="{ el: nav.anchor, duration: 750, easing: 'ease-out', }" href="#" >{{ nav.name }}</a > </li> </ul> </nav>

nav.anchor return String for an example for me nav.anchor return "#services".

And add your ID anchor on your container you want to scroll to.

[jstrother]

Hello,

I use that with Nuxt.js and work for me.

modules: [ "vue-scrollto/nuxt", ],

<nav> <ul> <li v-for="nav in navs" :key="nav.id" :class="[name, { active: nav.active }]" > <a v-scroll-to="{ el: nav.anchor, duration: 750, easing: 'ease-out', }" href="#" >{{ nav.name }}</a > </li> </ul> </nav>

nav.anchor return String for an example for me nav.anchor return "#services".

And add your ID anchor on your container you want to scroll to.

This worked well for me. Thanks, @RemiTiab!