LARAVILT
Laravilt
Seiten · Laravilt

Utilities

TypeScript utility functions for Laravilt frontends.

Laravilt provides utility functions in resources/js/lib/utils.ts for common frontend operations.

utils.ts

cn() - Class Name Merger

Combines and deduplicates Tailwind CSS classes using clsx and tailwind-merge:

typescript

urlIsActive() - Active URL Detection

Detects if a URL matches the current page for navigation highlighting:

typescript

Implementation Details:

  • Normalizes URLs by removing query strings and trailing slashes
  • Root paths (single segment like /admin) only match exactly
  • Nested routes (/admin/users) match both exact and child routes
  • Prevents partial matches (/admin/cat won't match /admin/categories)

toUrl() - URL Extraction

Extracts URL string from Inertia link objects:

typescript

Composables

useSidebar()

Access sidebar state from anywhere in your components:

typescript

usePage()

Access Inertia page props reactively:

typescript

useForm()

Inertia form handling with validation:

typescript

Active State for Clusters

For cluster-style navigation where multiple pages share a URL prefix:

typescript

Usage in navigation items:

typescript

Best Practices

Always Use cn() for Dynamic Classes

vue

Check Active State Reactively

typescript

Handle URL Edge Cases

typescript