Conflicts in v-scroll directive with VueUse

[AlexMarlow25]

Hi! I have a component where I use v-scroll directive from VueUse library. I import it and use directly as described in the doc.

<script lang="ts" setup>

import { type UseScrollReturn } from '@vueuse/core';
import { vScroll } from '@vueuse/components';
// ...

</script>

<template>
    <div
      v-scroll="[
        (state: UseScrollReturn) => {
          // some logic
        },
        { throttle: 100 },
      ]"
    />
</template>

BUT! I faced the issue with types for this directive -

VueUse doesn't provide any typings for this function (( verticalScrollPosition: number, horizontalScrollPosition: number) => void) and now I figured out, that this goes from Quasar.

I don't understand how Quasar inserts these typings for this directive and how to get rid of them. Furthermore, I really like the way how it handled by VueUse lib - you need to import it manually inside component, where you want to use it. It's clearer and more convenient.

[AlexMarlow25]

Because of that issue, I have to downgrade Quasar at least to 2.12.0 version.

[AlexMarlow25]

I've just checked it right now and this error appears from >= 2.12.3.

[yusufkandemir]

IMO Vue language tools should handle this differently. Since you are importing the directive specifically, it should use the types for that. It should only fall back to the global types when there is no specific import.

You can report this to https://github.com/vuejs/language-tools if you wish. Here is a simple workaround which is much better than pinning quasar to 2.12.2:

<script lang="ts" setup>

import { type UseScrollReturn } from '@vueuse/core';
import { vScroll as vUseScroll } from '@vueuse/components';
// ...

</script>

<template>
    <div
      v-use-scroll="[
        (state: UseScrollReturn) => {
          // some logic
        },
        { throttle: 100 },
      ]"
    />
</template>

Btw, for this specific case, you could Quasar's Scroll directive like this:

<script lang="ts" setup>
import { debounce, ScrollValue } from 'quasar'

const onScroll: NonNullable<ScrollValue> = (top, left) => {
  // some logic
};
</script>

<template>
  <div v-scroll="debounce(onScroll, 100)" />
</template>

[rstoenescu]

I'd add something perf-related to that. If you write your handlers inline in the template then they will get re-computed on each render. Better have some vars in the script and reference those.

Example:

const useScrollOptions = [
      (state: UseScrollReturn) => {
        // some logic
      },
      { throttle: 100 },
    ]

v-use-scroll="useScrollOptions"

or

const onScroll = debounce(onScroll, 100)

<div v-scroll="onScroll" />

[AlexMarlow25]

Thank you @yusufkandemir for the detailed answer and new way for me to define directive with as inside import, really handy! And thanks a lot to @rstoenescu for a more performant solution 😃