Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Nuxt 3] SSR Support #2

Open
gravitano opened this issue Jul 2, 2022 · 4 comments · May be fixed by #3
Open

[Nuxt 3] SSR Support #2

gravitano opened this issue Jul 2, 2022 · 4 comments · May be fixed by #3

Comments

@gravitano
Copy link

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
Copy link

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
Copy link
Author

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
Copy link

jeffreyvanhees commented Jan 12, 2023 •
edited
Loading

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
Copy link

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!

@boboldehampsink boboldehampsink linked a pull request Apr 11, 2023 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Nuxt 3 SSR support boboldehampsink/vue3-scroll-spy
3 participants
@gravitano @arinalistyarini @jeffreyvanhees