包简介

Use your Laravel routes in JavaScript - A powerful alternative to Ziggy

README 文档

README

Use your Laravel routes in JavaScript — A powerful alternative to Ziggy

Installation • Usage • Features • Frameworks • API

Why Pathify?

Pathify brings your Laravel routes to JavaScript with extras that Ziggy doesn't have:

┌─────────────────────────────────┬─────────┬─────────┐
│ Feature                         │  Ziggy  │ Pathify │
├─────────────────────────────────┼─────────┼─────────┤
│ Route generation & parameters   │    ✓    │    ✓    │
│ TypeScript support              │    ✓    │    ✓    │
├─────────────────────────────────┼─────────┼─────────┤
│ Permission checking (can())     │         │    ✓    │
│ Minimal mode (reduce payload)   │         │    ✓    │
│ Route caching                   │         │    ✓    │
│ Intelligent prefetching         │         │    ✓    │
│ Auto breadcrumbs                │         │    ✓    │
│ Navigation builder              │         │    ✓    │
│ Multi-language URLs (i18n)      │         │    ✓    │
│ Auto .gitignore management      │         │    ✓    │
└─────────────────────────────────┴─────────┴─────────┘

Installation

# Install via Composer
composer require herolabid/pathify

# Publish config (optional)
php artisan vendor:publish --tag=pathify-config

# Publish JavaScript files (for Vue/React/TypeScript projects)
php artisan vendor:publish --tag=pathify-js

This will copy JS/TS files to resources/js/vendor/pathify/.

Usage

Blade (Simplest)

Just add the directive — no imports needed:

<head>
    @pathify
    @vite(['resources/js/app.js'])
</head>

// Available globally via window.Pathify
route('posts.index')              // → /posts
route('posts.show', { post: 1 })  // → /posts/1

With Vue/React (Import Method)

After publishing JS files:

// Vue
import { useRoute } from '@/vendor/pathify/vue'
const route = useRoute()

// React
import { useRoute } from '@/vendor/pathify/react'
const route = useRoute()

// Vanilla JS
import { route } from '@/vendor/pathify/route'

Inertia.js

import { setupPathifyFromPage, createPathifyListener } from '@/vendor/pathify/inertia'
import { router } from '@inertiajs/vue3' // or @inertiajs/react

createInertiaApp({
    setup({ el, App, props, plugin }) {
        // Initialize BEFORE mounting
        setupPathifyFromPage(props.initialPage)

        // Keep in sync during navigation
        router.on('navigate', createPathifyListener())

        // Mount app...
    },
})

Basic Examples

route('posts.index')                            // → /posts
route('posts.show', { post: 1 })                // → /posts/1
route('posts.show', [1])                        // → /posts/1 (positional)
route('posts.index', { page: 2, sort: 'desc' }) // → /posts?page=2&sort=desc

route.current()                                 // → 'posts.show'
route.current('posts.*')                        // → true
route.has('posts.index')                        // → true
route.params                                    // → { post: '1' }

Features

Minimal Mode (NEW in v1.4.0)

Reduce payload by sending only routes relevant to current page:

// config/pathify.php
'minimal' => [
    'enabled' => true,
    'include_current' => true,   // users.show includes users.*
    'include_common' => true,
    'common_routes' => ['home', 'login', 'logout', 'dashboard'],
    'always_include' => [],
],

Or via Blade directive:

{{-- Auto minimal (based on current route) --}}
@pathifyMinimal

{{-- Manual patterns --}}
@pathify(['users.*', 'roles.*', 'dashboard'])

Result: If on users.edit, only sends ~10 routes instead of 50+!

Permission Checking

route.can('admin.dashboard')    // → false (requires auth)
route.can('posts.create')       // → false (requires permission)

// Laravel route with permission
Route::middleware(['auth', 'can:create-posts'])->group(function () {
    Route::get('/posts/create', [PostController::class, 'create'])->name('posts.create');
});

<a v-if="route.can('posts.create')" :href="route('posts.create')">New Post</a>

Route Filtering

// config/pathify.php
'only' => ['dashboard', 'users.*', 'roles.*'],
// atau
'except' => ['admin.*', 'api.*', '_debugbar.*'],

Route Groups

// config/pathify.php
'groups' => [
    'public' => ['home', 'login', 'register'],
    'admin' => ['users.*', 'roles.*'],
],

@pathify('admin')  {{-- Only admin routes --}}

Breadcrumbs

route.breadcrumbs()
// → [
//   { name: 'home', label: 'Home', url: '/' },
//   { name: 'posts.index', label: 'Posts', url: '/posts' },
//   { name: 'posts.show', label: 'Show', url: '/posts/1' }
// ]

Navigation Builder

// config/pathify.php
'navigation' => [
    'main' => [
        ['route' => 'home', 'label' => 'Home'],
        ['route' => 'dashboard', 'label' => 'Dashboard', 'auth' => true],
        ['label' => 'Admin', 'permission' => 'admin', 'children' => [
            ['route' => 'admin.users', 'label' => 'Users'],
        ]],
    ],
],

route.navigation('main') // Auto-filtered by user permissions

Localization

// config/pathify.php
'localization' => [
    'enabled' => true,
    'locales' => ['en', 'id', 'es'],
    'default' => 'en',
],

route('posts.index', { _locale: 'id' })  // → /id/posts
route.t('posts.index', {}, 'es')         // → /es/posts

Prefetching

// config/pathify.php
'prefetch' => [
    'enabled' => true,
    'strategy' => 'hover', // 'hover', 'viewport', 'idle'
],

Caching

// config/pathify.php
'cache' => ['enabled' => env('PATHIFY_CACHE', false), 'ttl' => 3600],

php artisan pathify:clear

Frameworks

Vue

import { createApp } from 'vue'
import { PathifyVue } from '@/vendor/pathify/vue'

createApp(App).use(PathifyVue).mount('#app')

<script setup>
import { useRoute } from '@/vendor/pathify/vue'
const route = useRoute()
</script>

<template>
    <a :href="route('home')">Home</a>
    <span v-if="route.current('posts.*')">Viewing posts</span>
</template>

React

import { useRoute } from '@/vendor/pathify/react'

function Nav() {
    const route = useRoute()
    return <a href={route('home')}>Home</a>
}

Inertia (Vue/React)

import { setupPathifyFromPage, createPathifyListener } from '@/vendor/pathify/inertia'
import { router } from '@inertiajs/vue3'

createInertiaApp({
    setup({ el, App, props, plugin }) {
        setupPathifyFromPage(props.initialPage)
        router.on('navigate', createPathifyListener())
        // ...
    },
})

TypeScript

Generate type definitions:

php artisan pathify:types

route('posts.show', { post: 1 })  // ✓ OK
route('posts.show', {})           // ✗ Error: missing 'post'

API

JavaScript

route(name, params?, absolute?)       // Generate URL
route.current()                       // Get current route name
route.current(name, params?)          // Check if matches
route.is(name, params?)               // Alias for current()
route.has(name)                       // Check existence (supports wildcard)
route.can(name)                       // Check permission
route.params                          // Current route parameters
route.url                             // Base URL
route.breadcrumbs(name?, params?)     // Get breadcrumbs
route.navigation(name)                // Get nav items
route.t(name, params?, locale?)       // Localized URL

Blade Directives

@pathify                      {{-- All routes --}}
@pathify('admin')             {{-- Group mode --}}
@pathify(['users.*'])         {{-- Minimal mode with patterns --}}
@pathifyMinimal               {{-- Auto minimal mode --}}
@pathifyMinimal(['users.*'])  {{-- Manual minimal mode --}}
@pathifyConfig                {{-- Raw JSON config --}}

Artisan Commands

php artisan pathify:generate          # Generate JS config file
php artisan pathify:generate --types  # With TypeScript definitions
php artisan pathify:types             # TypeScript definitions only
php artisan pathify:clear             # Clear route cache

Generated files are auto-added to .gitignore.

Troubleshooting

Problem	Solution
`Pathify config not found`	Add `@pathify` directive or call `setupPathifyFromPage()`
Routes not appearing	Add name: `->name('posts.index')`, check `except` config
TypeScript errors	Run `php artisan pathify:types`
Inertia not updating	Add `router.on('navigate', createPathifyListener())`
Permissions not working	Set `include_permissions: true` in config

Support

If you find this package helpful, consider buying me a coffee:

License

MIT - Built by Herolab ID

herolabid/pathify 适用场景与选型建议

herolabid/pathify 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 9 次下载、GitHub Stars 达 0，最近一次更新时间为 2026 年 01 月 23 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「javascript」「routes」「laravel」「react」「typescript」「vue」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 herolabid/pathify 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 herolabid/pathify 我们能提供哪些服务？

定制开发 / 二次开发

基于 herolabid/pathify 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 herolabid/pathify 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

microweber-deps/ziggy 0

Generates a Blade directive exporting all of your named Laravel routes. Also provides a nice route() helper function in JavaScript.

skydiver/laravel-route-blocker 81

Block routes by IP

odan/twig-assets 22

Caching and compression for Twig assets (JavaScript and CSS).

firmaprofesional/js-translation-bundle 0

A pretty nice way to expose your translation messages to your JavaScript.

eventix/cache 0

Provides caching methods which can be easily used for caching routes.

machy8/google-closure-compiler 5

PHP client for the Google Closure Compiler API in one file.

herolabid/pathify

包简介

关键字：