Helpers

Helpers & Composables — Supercharging Peak Development

To help Peak developers maintain clean, reusable, and expressive code across the stack, the framework provides a powerful set of Helpers and Composables. These are split into two main categories:

Backend Helpers (app/helpers.php)

These helper functions serve as utility shortcuts to streamline common logic within your PHP application. They are globally accessible, making them especially handy inside Blade files, controllers, and service classes.

Examples of Backend Helpers

• current_theme_name() Quickly retrieve the name of the currently active theme. Useful for applying conditional logic or loading theme-specific assets.
• is_current_route(string $routeName) Returns true if the current route matches the provided name. This is perfect for active link highlighting in navigation menus.

These backend helpers improve code readability and reduce repetition, allowing developers to focus on building features rather than writing repetitive boilerplate.

Frontend Composables

Peak offers a rich set of Vue 3 composables located under @peak/Composables/, which encapsulate reusable frontend logic. These are designed to be clean, reactive, and compatible with the script setup syntax and Inertia.js.

useAuth()

Handles all user-related logic:

• Access the authenticated user (user), their roles, and permissions.
• Check if a user has specific roles (hasRole(...)) or permissions (hasPermission(...)).
• Determine if the current user is an admin (isAdmin) based on roles from the backend config.

This makes role-based UI rendering and access control intuitive and consistent across your app.

<script setup>
import { useAuth } from '@peak/Composables/useAuth.js';

const { user, roles, hasRole, permissions, hasPermission, isAdmin } = useAuth();

if (hasRole('editor', 'moderator')) {
    console.log('User has editor or moderator role');
}

if (hasPermission('delete.posts')) {
    console.log('User can delete posts');
}

console.log('Is Admin:', isAdmin.value);
</script>

useConfirm()

Provides a reusable SweetAlert2-based confirmation modal.

Displays customizable confirmation dialogs.

Returns a Promise<boolean> that resolves to true if confirmed.

<script setup>
  import { useConfirm } from '@peak/Composables/useConfirm.js';

  async function deletePost() {
  const confirmed = await useConfirm({
  title: 'Delete Post?',
  text: 'Are you sure you want to delete this post? This cannot be undone.',
  confirmButtonText: 'Yes, delete it!',
});

  if (confirmed) {
  // Perform delete action
  console.log('Post deleted');
}
}
</script>

🧼 Great for destructive actions (delete, reset, etc.) with user confirmation safety.

useFeature()

Handles feature toggles dynamically from the backend:

featureEnabled(name) and featureDisabled(name) help check if a given feature is currently available or not.

📦 Ideal for implementing progressive rollout, A/B testing, or subscription-based feature gating.

<script setup>
  import { useFeature } from '@peak/Composables/useFeature.js';

  const { featureEnabled, featureDisabled } = useFeature();

  if (featureEnabled('video_uploads')) {
  console.log('Video uploads are enabled');
}

  if (featureDisabled('user_comments')) {
  console.log('User comments are disabled');
}
</script>

useLocale()

Access the current language data from the Inertia page props:

Gives access to localized content (language) loaded per request.

🌍 Useful for switching languages, formatting text, or building multilingual interfaces.

<script setup>
  import { useLocale } from '@peak/Composables/useLocale.js';

  const { language } = useLocale();

  console.log('Current language object:', language.value);
</script>

useSubscription()

Expose the current user’s subscription details:

Access subscription, plan, and provider directly from props.

💼 Ideal for displaying billing tiers, upsell prompts, and managing feature access.

<script setup>
  import { useSubscription } from '@peak/Composables/useSubscription.js';

  const { subscription, plan, provider } = useSubscription();

  console.log('Active subscription:', subscription);
  console.log('Plan:', plan);
  console.log('Provider:', provider);
</script>

useTranslate() (a.k.a __())

Provides custom translation utility with dot-notation and dynamic replacement support.

Usage: __('auth.login'), with support for placeholders like :name.

🗣 This ensures clean and consistent internationalization across your Vue app.

<script setup>
  import { __ } from '@peak/Composables/useTranslate.js';

  const welcomeMessage = __('welcome.user', { user: 'Alice' });
  console.log(welcomeMessage); // => "Welcome, Alice" (depending on translation)

  const raw = __('not.translated.key');
  console.log(raw); // => fallback to key if not found
</script>

Conclusion

Peak’s Helpers and Composables are thoughtfully designed to offload repetitive logic and enforce consistency. Whether you're working on access control, internationalization, subscriptions, or UI confirmation flows, there's a helper ready to make your life easier.

💡 Tip: The real power comes from combining these — for example, using useAuth() and useFeature() together to hide premium features from non-subscribers.