stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/useStepper.md

category

category
Utilities

useStepper

Provides helpers for building a multi-step wizard interface.

Usage

Steps as array

import { useStepper } from '@vueuse/core';

const {
  steps,
  stepNames,
  index,
  current,
  next,
  previous,
  isFirst,
  isLast,
  goTo,
  goToNext,
  goToPrevious,
  goBackTo,
  isNext,
  isPrevious,
  isCurrent,
  isBefore,
  isAfter,
} = useStepper(['billing-address', 'terms', 'payment']);

// Access the step through `current`
console.log(current.value); // 'billing-address'

Steps as object

import { useStepper } from '@vueuse/core';

const {
  steps,
  stepNames,
  index,
  current,
  next,
  previous,
  isFirst,
  isLast,
  goTo,
  goToNext,
  goToPrevious,
  goBackTo,
  isNext,
  isPrevious,
  isCurrent,
  isBefore,
  isAfter,
} = useStepper({
  'user-information': {
    title: 'User information',
  },
  'billing-address': {
    title: 'Billing address',
  },
  terms: {
    title: 'Terms',
  },
  payment: {
    title: 'Payment',
  },
});

// Access the step object through `current`
console.log(current.value.title); // 'User information'

Type Declarations

export interface UseStepperReturn<StepName, Steps, Step> {
  /** List of steps. */
  steps: Readonly<Ref<Steps>>;
  /** List of step names. */
  stepNames: Readonly<Ref<StepName[]>>;
  /** Index of the current step. */
  index: Ref<number>;
  /** Current step. */
  current: ComputedRef<Step>;
  /** Next step, or undefined if the current step is the last one. */
  next: ComputedRef<StepName | undefined>;
  /** Previous step, or undefined if the current step is the first one. */
  previous: ComputedRef<StepName | undefined>;
  /** Whether the current step is the first one. */
  isFirst: ComputedRef<boolean>;
  /** Whether the current step is the last one. */
  isLast: ComputedRef<boolean>;
  /** Get the step at the specified index. */
  at: (index: number) => Step | undefined;
  /** Get a step by the specified name. */
  get: (step: StepName) => Step | undefined;
  /** Go to the specified step. */
  goTo: (step: StepName) => void;
  /** Go to the next step. Does nothing if the current step is the last one. */
  goToNext: () => void;
  /** Go to the previous step. Does nothing if the current step is the previous one. */
  goToPrevious: () => void;
  /** Go back to the given step, only if the current step is after. */
  goBackTo: (step: StepName) => void;
  /** Checks whether the given step is the next step. */
  isNext: (step: StepName) => boolean;
  /** Checks whether the given step is the previous step. */
  isPrevious: (step: StepName) => boolean;
  /** Checks whether the given step is the current step. */
  isCurrent: (step: StepName) => boolean;
  /** Checks if the current step is before the given step. */
  isBefore: (step: StepName) => boolean;
  /** Checks if the current step is after the given step. */
  isAfter: (step: StepName) => boolean;
}
export declare function useStepper<T extends string | number>(
  steps: MaybeRef<T[]>,
  initialStep?: T,
): UseStepperReturn<T, T[], T>;
export declare function useStepper<T extends Record<string, any>>(
  steps: MaybeRef<T>,
  initialStep?: keyof T,
): UseStepperReturn<Exclude<keyof T, symbol>, T, T[keyof T]>;