Skip to content

Utilities

Helper functions in the utils/ folder hold reusable logic that is not specific to Vue or reactive state: DOM interactions, string and array manipulation, layout adjustments.

Example: layout scrollbar visibility

import { NO_SCROLLBARS_CLASS } from "@/src/shared/constants/layout";

export const setLayoutScrollbarsVisibility = (scrollbarsVisible: boolean): void => {
  document.body.classList.toggle(NO_SCROLLBARS_CLASS, !scrollbarsVisible);
};

Usage

import { setLayoutScrollbarsVisibility } from "@/src/shared/utils/layout";

setLayoutScrollbarsVisibility(false);

setLayoutScrollbarsVisibility(true);

Best practices

  • Place generic, reusable, non-Vue logic in the utils/ folder. (Vue-specific logic should be in composables/.)
  • Organize files by purpose (e.g., utils/layout.ts, utils/string.ts, utils/dom.ts).
  • Prefer named exports for each utility function.
  • Keep functions small, focused, and easy to test.
  • Use descriptive names that reflect the function’s purpose (e.g., setLayoutScrollbarsVisibility instead of toggleScrollbars).
  • Fully type all function parameters and return values.