Custom buttons (Next/Prev) in Nuxt 3

[thefubon]

https://vue-horizontal.fuxing.dev/design/navigation#above-content

Please tell me how to properly install the custom switch buttons to make them work in Nuxt 3. And when switching between pages, the buttons will be initialized. If not to overload the page. The buttons are not displayed.

<nav>
        <button @click="prev" :class="{'active': hasPrev, 'inactive': !hasPrev}">
          <svg viewBox="0 0 24 24">
            <path d="m9.8 12 5 5a1 1 0 1 1-1.4 1.4l-5.7-5.7a1 1 0 0 1 0-1.4l5.7-5.7a1 1 0 0 1 1.4 1.4l-5 5z"/>
          </svg>
        </button>
        <button @click="next" :class="{'active': hasNext, 'inactive': !hasNext}">
          <svg viewBox="0 0 24 24">
            <path d="m14.3 12.1-5-5a1 1 0 0 1 1.4-1.4l5.7 5.7a1 1 0 0 1 0 1.4l-5.7 5.7a1 1 0 0 1-1.4-1.4l5-5z"/>
          </svg>
        </button>
      </nav>

export default {
  data() {
    return {
      hasPrev: false,
      hasNext: true,
    }
  },
  methods: {
    prev() {
      this.$refs.horizontal.prev()
    },
    next() {
      this.$refs.horizontal.next()
    },
    onScroll({hasPrev, hasNext}) {
      this.hasPrev = hasPrev
      this.hasNext = hasNext
    }
  },
}

[vietanhbui]

how to implement in nuxt 3? Tks

[Benholio]

This works for me if I pass the click event along in the prev/next handlers:

prev(e) {
  this.$refs.horizontal.prev(e)
},
next(e) {
  this.$refs.horizontal.next(e)
}