[Nuxt 3] SSR Support

[gravitano]

Hello. Thank you for your great work!

Is this package support SSR? I tried install on nuxt 3 but had errors:

ReferenceError: self is not defined
    at Object.<anonymous> (/Users/xxx/node_modules/vue3-scroll-spy/dist/index.js:1:200)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)

Here's code for the plugin:

// ./plugins/vue-scroll-spy.ts
import { registerScrollSpy, Easing } from 'vue3-scroll-spy';

export default defineNuxtPlugin((nuxtApp) => {
  registerScrollSpy(nuxtApp.vueApp, {
    easing: Easing.Cubic.In,
  });
});

Thank you

[arinalistyarini]

I've also tried it but got no luck. Seems this plugin is not supported for SSR. Hope @bennyxguo will consider to make it support SSR 😁

[gravitano]

I think this plugin can support SSR via client-only plugin in Nuxt 3. For example, in my case just rename ./plugins/vue-scroll-spy.ts to ./plugins/vue-scroll-spy.client.ts.

Reference: https://nuxt.com/docs/guide/directory-structure/plugins

[jeffreyvanhees]

What I did on my Vue/Vite project was installing https://www.npmjs.com/package/vite-plugin-iso-import. Then I defined a plugin that registers the scroll-spy plugin:

import {registerScrollSpy} from 'vue3-scroll-spy?client';

export default {
    install(app, options: {ssr: boolean}) {

        // Fixes: Cannot read properties of undefined (reading 'getSSRProps')
        if (options.ssr) {
            app.directive('scroll-spy', {})
            app.directive('scroll-spy-active', {})
            app.directive('scroll-spy-link', {})
        }

        // Only import when non-SSR
        if (typeof registerScrollSpy !== 'undefined') {
            registerScrollSpy(app, options);
        }
    },
}

[arinalistyarini]

I think this plugin can support SSR via client-only plugin in Nuxt 3. For example, in my case just rename ./plugins/vue-scroll-spy.ts to ./plugins/vue-scroll-spy.client.ts.

Reference: https://nuxt.com/docs/guide/directory-structure/plugins

I've tried this one but still not working

What I did on my Vue/Vite project was installing https://www.npmjs.com/package/vite-plugin-iso-import. Then I defined a plugin that registers the scroll-spy plugin:

import {registerScrollSpy} from 'vue3-scroll-spy?client';

export default {
    install(app, options: {ssr: boolean}) {

        // Fixes: Cannot read properties of undefined (reading 'getSSRProps')
        if (options.ssr) {
            app.directive('scroll-spy', {})
            app.directive('scroll-spy-active', {})
            app.directive('scroll-spy-link', {})
        }

        // Only import when non-SSR
        if (typeof registerScrollSpy !== 'undefined') {
            registerScrollSpy(app, options);
        }
    },
}

I'll try this one. Thank you!