如何在Nuxt3中使用vue3-perfect-scrollbar

Question

我想在我的

vue3-perfect-scrollbar

项目中使用

nuxt3

。我在插件目录中注册了

PerfectScrollbar

插件/scrollbarPlugin.js

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

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.PerfectScrollbar = PerfectScrollbar;
})

在 layouts/layout.vue

  <div class="layout">
       <Navbar />
       <Sidebar />
       </PerfectScrollbar>
          <main class="main">
             <slot></slot>
          </main>
       </PerfectScrollbar>
   </div

main

包裹在

PerfectScrollbar

组件后不渲染。

Answer 1

你应该定义一个插件如下：

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(PerfectScrollbar);
})

此外，您在

<main>

之前有结束标签