Nuxt•2y ago

HTMLElement is not defined - VueUse

Hi, i'm trying to use https://vueuse.org/core/useScroll/#usescroll from VueUse

const el = ref<HTMLElement | null>(null)
const { x, y, isScrolling, arrivedState, directions } = useScroll(el)

But I got this HTMLElement is not defined Do you know how can use global window element? Thank you 🙂

11 Replies

Unknown User•2y ago

Message Not Public

NeekoOP•2y ago

The last : 3.2.3 The complete code in component :

<script setup>
    const el = ref<HTMLElement | null>(null)
    const { isScrolling } = useScroll(el)

    watch(isScrolling, () => {
        console.log('Scrolling ...');
    });
</script>

<script setup>
    const el = ref<HTMLElement | null>(null)
    const { isScrolling } = useScroll(el)

    watch(isScrolling, () => {
        console.log('Scrolling ...');
    });
</script>

Error :

[nuxt] error caught during app initialization ReferenceError: HTMLElement is not defined ...

[nuxt] error caught during app initialization ReferenceError: HTMLElement is not defined ...

SSR related error? But how can fix? 🙂

Unknown User•2y ago

Message Not Public

NeekoOP•2y ago

Sure! I have this :

    modules: [
        '@nuxtjs/color-mode',
        '@vueuse/nuxt',
        'nuxt-icon'
    ],

    modules: [
        '@nuxtjs/color-mode',
        '@vueuse/nuxt',
        'nuxt-icon'
    ],

Unknown User•2y ago

Message Not Public

NeekoOP•2y ago

@Sr. Full Stack Dev Oh god! Thanks! ❤️ Not more error but I don't see console.log('Scrolling ...'); maybe useScroll don't take the global html element?

Unknown User•2y ago

Message Not Public

NeekoOP•2y ago

Oh ok, I just want to watch isScrolling on entire site ^^

Unknown User•2y ago

Message Not Public

NeekoOP•2y ago

Yes, I think I will do that 🙂 Thank you !

Unknown User•2y ago

Message Not Public

Gaming

Programming

HTMLElement is not defined - VueUse