support ssr

[mehdiraized]

i have error in ssr mode

ReferenceError: window is not defined
    at /node_modules/sticky-sidebar/dist/sticky-sidebar.js:752:1

[simplenotezy]

Include plugin only in client. If you're using nuxt, append "client" to file, like so: stickysidebar.client.js

[nikolayandreev]

@simplenotezy Do you have an advice for a custom vue ssr implementation? Or do you know if there's a port that is ssr ready?

[simplenotezy]

@simplenotezy Do you have an advice for a custom vue ssr implementation? Or do you know if there's a port that is ssr ready?

It's been a long time since I worked on this issue, let alone Vue, however, I believe you should just be able to include the library, just make sure it's client only. It makes no sense to include this kind of code on the server anyway

[andrewizmaylov]

For all who have the same issue
I fixed it in my Inertia SSR VueJS project

<template>
  <div ref="sidebar" class="sidebar">
    <!-- Sidebar content -->
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const sidebar = ref(null);
let stickySidebarInstance = null;

const isClient = typeof window !== 'undefined';

onMounted(async () => {
  // Ensure the code runs only in the browser
  if (isClient) {
    try {
      const StickySidebar = (await import('sticky-sidebar')).default;
      stickySidebarInstance = new StickySidebar(sidebar.value, {
        // Your options here
        topSpacing: 20,
        bottomSpacing: 20,
      });
    } catch (error) {
      console.error('Failed to initialize StickySidebar:', error);
    }
  }
});

onBeforeUnmount(() => {
  if (stickySidebarInstance) {
    try {
      stickySidebarInstance.destroy();
    } catch (error) {
      console.error('Failed to destroy StickySidebar:', error);
    }
  }
});
</script>

<style>
/* Your styles here */
</style>