Nuxt 3 version

[davestewart]

Hello,

Judging by the lack of replies, it looks like this repo isn't supported any more, but – if you want a Nuxt implementation of this, LMK.

I have something up and running.

[BayBreezy]

Where can i see this nuxt version for this? @davestewart

[davestewart]

I'll create a public module tonight and publish it

[BayBreezy]

Looking forward to it :)

[davestewart]

OK, try this:

https://www.npmjs.com/package/@davestewart/nuxt-scrollbar

I'm pretty sure it should work in projects other than my own.

Please report back and let me know!

[BayBreezy]

Ty. I will check it out and let you know

[davestewart]

@BayBreezy any good?

[BayBreezy]

Hello @davestewart it works great! Took me a minute to figure out that I should set the module like this So instead of 'nuxt-scrollbar' I had to use @davestewart/nuxt-scrollbar

modules: [
    "@nuxtjs/google-fonts",
// I was registering it as  'nuxt-scrollbar' -- you may want to update the readme with this info for newbies
    "@davestewart/nuxt-scrollbar",
    async (options, nuxt) => {
      // @ts-ignore
      nuxt.hooks.hook("vite:extendConfig", (config) => config.plugins.push(vuetify()));
    },
  ],

As yo can see, I am using it with Vuetify 3. This is the code that worked

<VNavigationDrawer v-if="showTableDrawer" class="overflow-x-hidden">
        <NuxtScrollbar tag="div" class="h-100 overflow-y-auto overflow-x-hidden">
          <VList width="300" v-if="loadedTables && loadedTables.length > 0">
            <VListSubheader>Tables</VListSubheader>
            <template v-for="table in loadedTables" :key="table">
              <v-tooltip location="right">
                <template v-slot:activator="{ props }">
                  <VListItem v-bind="props" link>
                    <template #prepend>
                      <VIcon class="mr-4" size="20">fluent:table-24-regular</VIcon>
                    </template>
                    <VListItemTitle class="text-body-2">{{ table.table_name }}</VListItemTitle>
                  </VListItem>
                </template>
                <span class="text-body-2">{{ table.table_name }}</span>
              </v-tooltip>
            </template>
          </VList>
        </NuxtScrollbar>
      </VNavigationDrawer>

Thanks again for putting in the time on this. I will be using it in my projects :)

[davestewart]

Ah, sorry about the error with the module name!

I'll get that fixed up.

I'm glad it's working well for you!

[davestewart]

Version 1 with updated docs out now: https://www.npmjs.com/package/@davestewart/nuxt-scrollbar

[BayBreezy]

Thanks again!!

[BayBreezy]

Do you happen to know what the process is for getting this module listed on the nuxt modules website? I think adding it there would be a good idea.

[davestewart]

Good idea.

Have posted here: https://github.com/nuxt/modules/issues/623

Feel free to comment / 👍 / etc

[jd-solanki]

hey @BayBreezy Are you getting error like [postcss] The argument 'path' must be a string or Uint8Array without null bytes. Received '/private/tmp/vuetify-nuxt-issue/\x00plugin-vuetify:styles' when you use vuetify's styles.configFile with vue3-perfect-scrollbar?

I tried installing fresh nuxt 3 project and installed+configured vuetify. Later when I install this plugin I get error at build time 😅

[BayBreezy]

hey @BayBreezy Are you getting error like [postcss] The argument 'path' must be a string or Uint8Array without null bytes. Received '/private/tmp/vuetify-nuxt-issue/\x00plugin-vuetify:styles' when you use vuetify's styles.configFile with vue3-perfect-scrollbar?

I tried installing fresh nuxt 3 project and installed+configured vuetify. Later when I install this plugin I get error at build time 😅

I get this error without the package once I try to customize the sass variables from vuetify in nuxt 3 lol. There is an old thread about the issue, I will try to find it and share it here. That warning/error is related to vuetify and the vite loader plugin

[BayBreezy]

Check this thread https://github.com/invictus-codes/nuxt-vuetify/issues/2

[mercs600]

Hi guys, I have refactored and provided a Nuxt plugin in version v2.0.0.

export default defineNuxtConfig({
  modules: ['vue3-perfect-scrollbar/nuxt']
});

https://stackblitz.com/edit/nuxt-starter-7bgunj?file=app.vue

Feel free to reopen this issue.

[davestewart]

Well done. Will test in due course!