@lionad/use-scrollbar-nuxt

@lionad/use-scrollbar-nuxt

@lionad/use-scrollbar 的 Nuxt 模块：自动完成 composables 的 auto-import 与虚拟滚动条样式注入，SSR 安全，无需额外配置。

Install

pnpm add @lionad/use-scrollbar @lionad/use-scrollbar-nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@lionad/use-scrollbar-nuxt'],
})

Module Options

通过 nuxt.config.ts 中的 useScrollbar 键配置：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@lionad/use-scrollbar-nuxt'],
  useScrollbar: { injectStyles: false },
})

Auto-imports

以下 composables 自动可用，无需手动 import：

• useScrollbar（等同于 useScrollbars）— 将已有滚动系统的原生滚动条替换为虚拟滚动条
• useNativeScrollbar — 获取原生滚动条信息（如宽度）

模块只自动导入库独有 API。useScroll、useElementSize、useElementHover 等通用工具与 @vueuse/core 同名，为避免静默替换消费方的 vueuse 自动导入而不注册，需要时请从 @vueuse/nuxt 体系显式使用。

<script setup lang="ts">
const componentOrElementRef = ref(null)
const barStates = useScrollbar(componentOrElementRef, {
  // override default options
})
</script>

SSR 下 composable 的 DOM 访问已守卫、静默跳过，水合后 init/mount 才触碰真实 DOM，无需 client-only 包裹。

完整 API 文档见核心包 @lionad/use-scrollbar。

License

MIT License