rigor789 / vue-scrollto

Adds a directive that listens for click events and scrolls to elements.
https://vue-scrollto.rigor789.com/
MIT License
2.07k stars 99 forks source link

Getting Error in Nuxt JS "Cannot read properties of undefined (reading 'scrollTo')" #736

Open adnanmukri opened 1 year ago

adnanmukri commented 1 year ago

i am not been able to start my project whenever "npx nuxi dev" command is runned this error occurs.

nikolashaag commented 1 year ago

Getting the same issue on a fresh installation of Nuxt 3.

adnanmukri commented 1 year ago

did you find any solution?

toddpadwick commented 1 year ago

Is this unusable for Nuxt 3 then? or has anyone found a workaround?

adnanmukri commented 1 year ago

No idea i have left my project here and started this projrct using php.

On Tue, 11 Apr 2023, 19:15 Todd Padwick, @.***> wrote:

Is this unusable for Nuxt 3 then? or has anyone found a workaround?

— Reply to this email directly, view it on GitHub https://github.com/rigor789/vue-scrollto/issues/736#issuecomment-1503385160, or unsubscribe https://github.com/notifications/unsubscribe-auth/A4D2BBUPKHDCH33QXRLVXSDXAVOAFANCNFSM6AAAAAAUTSJL5U . You are receiving this because you authored the thread.Message ID: @.***>

AlexanderBredun commented 1 year ago

i have same problem but i found how to solve it, insted of using nuxt plugin from package you need to create your own for nuxt3 it goes something like this ` import VueScrollTo from 'vue-scrollto';

export default defineNuxtPlugin((nuxtApp) => {

nuxtApp.vueApp.directive('scroll-to', {
    mounted (el, binding ) {
        const { element, duration } = binding.value;
        el.addEventListener('click', (e: Event)=> {
            e.preventDefault();
            VueScrollTo.scrollTo(element, duration, { easing: [0.12, 0, 0.39, 0] });
        });
    },
});

return {
    provide: {
        $scrollTo: VueScrollTo.scrollTo
    }
};

});` with that we have directive and programmatic access

ymarynych commented 11 months ago

@AlexanderBredun thanks, your workaround seems to work! I just adjusted several lines, since it throwed me 'undefined' for the 'element'. So, instead of const { element, duration } = binding.value;

I say const element = binding.value;

and then removed 'duration' from this line:

VueScrollTo.scrollTo(element, { easing: [0.12, 0, 0.39, 0] });

there's no ability to set a duration anymore, but now it works at my end. I think the problem is that 'binding.value' has wrong format or something