vue-scrollto icon indicating copy to clipboard operation
vue-scrollto copied to clipboard

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

Open adnanmukri opened this issue 2 years ago • 6 comments
trafficstars

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

adnanmukri avatar Feb 07 '23 06:02 adnanmukri

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

nikolashaag avatar Feb 13 '23 13:02 nikolashaag

did you find any solution?

adnanmukri avatar Feb 28 '23 21:02 adnanmukri

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

toddpadwick avatar Apr 11 '23 13:04 toddpadwick

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: @.***>

adnanmukri avatar Apr 13 '23 21:04 adnanmukri

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

AlexanderBredun avatar Jul 27 '23 09:07 AlexanderBredun

@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

ymarynych avatar Nov 23 '23 12:11 ymarynych