Vue.js version component please

[CracKerMe]

Is your feature request related to a problem? Please describe.
My PM(Product Manager) find that he need a horizontal-scrolling-menu.but our stack is vuejs. have you ever think to publish a vue version plz?

Describe the solution you'd like
vue component needed

thx, waiting for your reply

[asmyshlyaev177]

Hi, it will require a lot of time, not sure i will do it.

[shiva-prasad-reddy]

Is your feature request related to a problem? Please describe. My PM(Product Manager) find that he need a horizontal-scrolling-menu.but our stack is vuejs. have you ever think to publish a vue version plz?

Describe the solution you'd like vue component needed

thx, waiting for your reply

Hey i wrote this in Vue3 using VueUse, Vuetify, it is too much gap, but hoping it will help you.
It is not in good shape but it can be tailoerd to your need.

`<script setup lang="ts">
const { xs } = useVuetify();

const container = ref<HTMLElement | null>(null);
const { x } = useScroll(container);
const scrollWidth = ref(0);
const offsetWidth = ref(0);

if (!xs.value) {
useResizeObserver(container, () => {
if (!container.value) return;
scrollWidth.value = container.value.scrollWidth;
offsetWidth.value = container.value.offsetWidth;
});
}
const leftChevron = computed(() => !xs.value && x.value > 0);
const rightChevron = computed(() => {
if (xs.value) return false;
if (offsetWidth.value >= scrollWidth.value) return false; // no overflow
if (x.value + offsetWidth.value === scrollWidth.value) return false; // scrolled to the end
return true;
});

const widthToScroll = 256 + 16;

const scrollReverse = () => {
container.value.scroll({
top: 0,
left: x.value - (x.value > widthToScroll ? widthToScroll : x.value),
behavior: "smooth",
});
// container.value.scrollLeft -= x.value > 256 ? 256 : x.value;
};

const pixels = computed(() => scrollWidth.value - offsetWidth.value);
const scrollForward = () => {
const gap = pixels.value - x.value;
container.value.scroll({
top: 0,
left: x.value + (gap > widthToScroll ? widthToScroll : gap),
behavior: "smooth",
});
// container.value.scrollLeft += gap >= 256 ? 256 : gap;
};
</script>

    <div class="pl-1 left-chevron">
      <transition name="slide-x-transition">
        <v-btn
          v-show="leftChevron && isHovering"
          icon="i-ic-round-chevron-left"
          size="small"
          color="primary"
          @click="scrollReverse"
        />
      </transition>
    </div>

    <div class="pr-1 right-chevron">
      <transition name="slide-x-reverse-transition">
        <v-btn
          v-show="rightChevron && isHovering"
          icon="i-ic-round-chevron-right"
          size="small"
          color="primary"
          @click="scrollForward"
        />
      </transition>
    </div>
  </div>
</template>

<style> .container { gap: 1rem; }

.container::-webkit-scrollbar {
width: 0px;
height: 0px;
}

.left-chevron {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}

.right-chevron {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
</style>
`