Not applying classes

[TomBell95]

Is anyone else experiencing problems? It looks like a few JSFiddle demo's are also experiencing issues.

I have a nuxt project which only has a single page and I want to highlight the pages as user scrolls down, but have not got this to work yet? Can someone confirm if this is me or is there a problem?

~/plugins/vue2-scrollspy.js

import Vue from 'vue'
import Scrollspy from 'vue2-scrollspy'
Vue.use(Scrollspy);

nuxt.config.js { src: '~/plugins/vue2-scrollspy', ssr: false },

components/Navbar/Pages.vue

<div class="hidden md:block">
    <ul 
        v-scroll-spy-active="{ selector: 'li.menu-item', class: 'custom-active' }"
        v-scroll-spy-link="{ selector: 'a.menu-link' }"
        class="flex space-x-8"
    >
      <li class="menu-item">
        <a href="#about" class="menu-link">About</a>
      </li>
      <li class="menu-item">
        <a href="#skills" class="menu-link">Skills</a>
      </li>
      <li class="menu-item">
        <a href="#work" class="menu-link">Work</a>
      </li>
      <li class="menu-item">
        <a href="#project" class="menu-link">Project</a>
      </li>
      <li class="menu-item">
        <a href="#contact" class="menu-link">Contact</a>
      </li>
    </ul>
  </div >

<style lang="postcss" scoped>
.custom-active {
  @apply bg-red-400;
}
</style>

components/Main.vue

<div
    v-scroll-spy="{ sectionSelector: '.chapter', offset: 400 }"
    class="space-y-28 container"
  >
    <About id="about" class="chapter motion-safe:animate-fadeIn" />
    <Skills id="skills" class="chapter s-show-on-scroll invisible" />
    <Work id="work" class="chapter js-show-on-scroll invisible" />
    <Projects id="projects" class="chapter" />
    <Contact
      id="contact"
      class="chapter js-show-on-scroll invisible"
      @emitModal="showModal = true"
    />
  </div>

[TomBell95]

I have pinpointed the problem - it is due to having my nav pages and mobile nav pages spy on the same section...

Tried to use data-scroll-spy-id="desktop-nav" and data-scroll-spy-id="mobile-nav" but have not been able to get this to work yet. Any suggestions?

[Rafnexx]

Hi @TomBell95, I'm facing the same issue, did you resolve it somehow?