在Nuxt3中使用vue3-perfect-scrollbar遇渲染问题求助

问题根源 #

你当前的插件注册方式错误，没有将vue3-perfect-scrollbar组件全局注册到Nuxt3的Vue实例中，导致模板里的<PerfectScrollbar>标签无法被解析为有效组件，内部内容自然无法渲染。

修正插件注册代码 #

修改plugins/scrollbarPlugin.js，使用Nuxt3提供的component方法全局注册组件：

import PerfectScrollbar from 'vue3-perfect-scrollbar'
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css'

export default defineNuxtPlugin(nuxtApp => {
  // 使用component方法注册全局组件
  nuxtApp.component('PerfectScrollbar', PerfectScrollbar)
})

布局组件调整（可选但关键） #

确保给PerfectScrollbar容器设置明确的高度，否则滚动容器会自适应内容高度，滚动条无法生效，容易被误认为内容没渲染。调整layouts/layout.vue并添加样式：

<template>
  <div class="layout">
    <Navbar />
    <Sidebar />
    <PerfectScrollbar class="scroll-container">
      <main class="main">
        <slot></slot>
      </main>
    </PerfectScrollbar>
  </div>
</template>

<style scoped>
.scroll-container {
  /* 根据你的导航栏高度调整，确保容器有固定高度 */
  height: calc(100vh - 60px);
  overflow: hidden;
}
</style>

验证 #

重启Nuxt3开发服务，此时<PerfectScrollbar>组件会被正确解析，内部的main内容正常渲染，同时滚动功能也能正常工作。

内容的提问来源于stack exchange，提问作者Aman Ghanghoriya