Unable to get overlay scrollbar on the Vue Portal element

[Quanttelium]

I am currently on Vue 3 with Laravel 10 as a backend along with Tailwind CSS. I am currently trying to add the overlay scrollbars to the navigation menu which will be rendered as a Vue Portal element whenever the user clicks the hamburger. But unable to achieve the same.

<script setup>
import { ref, onMounted } from 'vue'
import { Dialog, DialogPanel } from '@headlessui/vue'
import { XMarkIcon, BellIcon } from '@heroicons/vue/24/outline'

import {
    useOverlayScrollbars,
    OverlayScrollbarsComponent,
} from 'overlayscrollbars-vue'

const osRef = ref(null)

const [initBodyOverlayScrollbars] = useOverlayScrollbars({
    defer: true,
})

onMounted(() => initBodyOverlayScrollbars(document.body))

const mobileMenuOpen = ref(false)
</script>

<template>
    <Dialog as="div" @close="mobileMenuOpen = false" :open="mobileMenuOpen">
        <div class="fixed inset-0 z-50" />
        <DialogPanel
            class="fixed inset-y-0 z-50 h-full w-full overflow-y-auto bg-white sm:ring-1 sm:ring-gray-900/10"
            data-overlayscrollbars-initialize
        >
            <OverlayScrollbarsComponent ref="osRef" defer>
                <div
                    class="flex justify-center px-6 lg:px-8"
                    :class="shrinkHeader ? 'py-3' : 'py-5'"
                >
                    <div
                        class="flex max-w-6xl flex-1 items-center justify-between"
                    >
                        <div class="flex justify-start">
                            <button
                                type="button"
                                class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-sky-800"
                                @click="mobileMenuOpen = false"
                            >
                                <span class="sr-only">Open main menu</span>
                                <BellIcon class="h-6 w-6" aria-hidden="true" />
                            </button>
                        </div>
                        <div class="flex flex-1 justify-center">
                            <a href="#" class="-m-1.5 p-4">
                                <span class="sr-only"
                                    >Gulati Catering Company</span
                                >
                                <img
                                    class="w-auto transition-all duration-500 ease-in-out"
                                    :class="
                                        shrinkHeader
                                            ? 'h-[3.5rem] sm:h-[4rem]'
                                            : 'h-[4rem] sm:h-[4.5rem]'
                                    "
                                    src="../../../public/assets/images/logo-toggled.svg"
                                    alt=""
                                />
                            </a>
                        </div>
                        <div class="flex justify-end">
                            <button
                                type="button"
                                class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-sky-800"
                                @click="mobileMenuOpen = false"
                            >
                                <span class="sr-only">Open main menu</span>
                                <XMarkIcon class="h-6 w-6" aria-hidden="true" />
                            </button>
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex justify-center px-6 py-6">
                    <div
                        class="flex max-w-6xl flex-1 items-center justify-between"
                    >
                        <div class="-my-6 divide-y divide-gray-500/10">
                            <div class="space-y-2 py-6">
                                <a
                                    v-for="item in navigation.main"
                                    :key="item.name"
                                    :href="item.href"
                                    class="-mx-3 block rounded-lg px-3 py-2 font-tfarrow text-2xl leading-7 text-gray-900 hover:bg-gray-50"
                                    >{{ item.name }}</a
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </OverlayScrollbarsComponent>
        </DialogPanel>
    </Dialog>
</template>

[Quanttelium]

@KingSora Please can you shed some light on this, I need to implement it as earliest as possible. Thanks in advance.

[KingSora]

@ToxifiedM Good day :)

Looking at your code I'm not able to come up with an mistake / solution.. Are you able to set up a live example on StackBlitz or CodeSandbox?

[KingSora]

@ToxifiedM I could not get your example to work in a sandbox, so I created my own version with a @headlessui/vue dialog: https://stackblitz.com/edit/vitejs-vite-8pnp8u?file=src%2Fcomponents%2FHelloWorld.vue Its working out of the box without any special config.

[Quanttelium]

@KingSora Thanks a lot brother, its working great, I see my initialization was perfect its just there was a problem with the height of the overlay scrollbar container. Thanks once again, please mark it as closed.

[KingSora]

@ToxifiedM Glad its working! Youre welcome m8 :)