I’m trying to use the Tailwind PrimeVue v3 Stepper component and I need to perform some actions before moving between each StepperPanel.

For example, I want to perform a simple console.log("before panel change") from inside the <script setup lang='ts'> area before each panel changes.

How can that be done?

The PrimeVue Stepper component has update:activeStep and step-change emits but those are triggered after the panels change. And I need to do the script actions before the panel changes.

The docs show the use of prevCallback and nextCallback for moving between panels, so I assume I need to hook into those somehow. But those are provided inside the template and I have no idea how to access them inside the script tag area.

Here is a live URL to try with: https://stackblitz.com/edit/nuxt-starter-k97nc8?file=app.vue

<template>
  <div class="card flex justify-center">
    <Stepper>
      <StepperPanel header="Header I">
        <template #content="{ nextCallback }">
          <div class="flex flex-col h-[12rem]">
            <div
              class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-md bg-surface-0 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium"
            >
              Content I
            </div>
          </div>
          <div class="flex pt-4 justify-end">
            <Button
              label="Next"
              icon="pi pi-arrow-right"
              iconPos="right"
              @click="nextCallback"
            />
          </div>
        </template>
      </StepperPanel>
      <StepperPanel header="Header II">
        <template #content="{ prevCallback, nextCallback }">
          <div class="flex flex-col h-[12rem]">
            <div
              class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-md bg-surface-0 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium"
            >
              Content II
            </div>
          </div>
          <div class="flex pt-4 justify-between">
            <Button
              label="Back"
              severity="secondary"
              icon="pi pi-arrow-left"
              @click="prevCallback"
            />
            <Button
              label="Next"
              icon="pi pi-arrow-right"
              iconPos="right"
              @click="nextCallback"
            />
          </div>
        </template>
      </StepperPanel>
      <StepperPanel header="Header III">
        <template #content="{ prevCallback }">
          <div class="flex flex-col h-[12rem]">
            <div
              class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-md bg-surface-0 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium"
            >
              Content III
            </div>
          </div>
          <div class="flex pt-4 justify-start">
            <Button
              label="Back"
              severity="secondary"
              icon="pi pi-arrow-left"
              @click="prevCallback"
            />
          </div>
        </template>
      </StepperPanel>
    </Stepper>
  </div>
</template>

<script setup lang="ts">
// Do something in here BEFORE moving between stepper panels
// For example, do a console.log("before panel change")
// I assume I need to use nextCallback and prevCallback from the template
// But I don't know how to access those callbacks here inside script
</script>

<style scoped>
.p-stepper {
  flex-basis: 50rem;
}
</style>