The onBefore Event

The onBefore event is triggered before the step is shown. This event is useful when you want to do something before the step is shown. For example, you can use this event to check if the user is allowed to see the step.

<script setup>
  const steps = [{
    target: '[data-step=0]',
    content: 'Text Content',
    onBefore: () => { 
      // Do something before the step is shown
    }
  }];
</script>

INFO

The onBefore event is using await, so you can use a promise to delay the step.

<script setup>
  const steps = [{
    target: '[data-step=0]',
    content: 'Text Content',
    onBefore: new Promise((resolve) => { 
      setTimeout(() => {
        // Do something before the step is shown
        resolve();
      }, 1000);
    })
  }];
</script>