Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not working with Nuxtjs #311

Open
aheadfullofcode opened this issue Jun 26, 2020 · 3 comments
Open

Not working with Nuxtjs #311

aheadfullofcode opened this issue Jun 26, 2020 · 3 comments
Labels
help wanted nuxt Issues related to nuxt.

Comments

@aheadfullofcode
Copy link

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
Copy link

bc010101 commented Jul 8, 2020

Same here

@rigor789 rigor789 added help wanted nuxt Issues related to nuxt. labels Jul 8, 2020
@RemiTiab
Copy link

RemiTiab commented Nov 21, 2020

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
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted nuxt Issues related to nuxt.
Projects
None yet
Development

No branches or pull requests

5 participants