Ziggy
Ziggy stats
- Downloads
- 12.4M
- Stars
- 3,419
- Open Issues
- 4
- Forks
- 253
Generates a Blade directive exporting all of your named Laravel routes. Also provides a nice route() helper function in JavaScript.
Ziggy – Use Your Laravel Routes in JavaScript
Ziggy is a Laravel package designed to make Laravel's named routes accessible in JavaScript, providing a seamless way to generate URLs based on your routes directly from your client-side scripts. It's compatible with Laravel version 5.4 and up, and supports all modern browsers.
Key Features:
- JavaScript Route Helper: Mimics Laravel's PHP
route()helper, allowing you to generate URLs for your named routes in JavaScript. - Support for Route Parameters: Pass parameters to your routes just like you do in Laravel, including support for route-model binding.
- Integration with JavaScript Frameworks: Works out-of-the-box with popular frameworks like Vue and React, including a Vue plugin and a React hook.
- TypeScript Support: Comes with unofficial TypeScript definitions to help integrate with TypeScript projects.
- Advanced Route Filtering: Provides options to filter which routes are made available to your JavaScript, optimizing load times and enhancing security.
- Flexible Setup Options: Can be used with the Blade directive or via an API endpoint, making it adaptable to various application architectures including SPAs.
Installation:
- Add Ziggy to your Laravel project:
composer require tightenco/ziggy
- Include the
@routesBlade directive in your main layout file, before any JavaScript is loaded.
Usage:
- Generating URLs:
route('posts.show', { id: 1 }); // Generates URL for the posts.show route with id 1
- Accessing Route Functions:
When called with no arguments,
route()returns aRouterinstance, allowing access to methods likecurrent(),has(), and properties likeparams.
Advanced Setup:
- Non-Blade Environments: Use
php artisan ziggy:generateto create a routes file, or configure an endpoint to provide route configuration as JSON. - Framework Integration:
- Vue: Use the ZiggyVue plugin for easy integration.
- React: Utilize the
useRoute()hook for seamless route generation.
Practical Considerations:
- Security with Content Security Policies (CSP): If using CSP, pass a nonce to the
@routesdirective to enable inline script execution. - TLS/SSL Termination: Ensure proper proxy configuration to prevent URL scheme mismatches in generated URLs.
Contributing:
Contributors are welcome! Check the GitHub repository for issues that need help.
License:
Ziggy is open-source software licensed under the MIT license.
For comprehensive details on setup and usage, refer to the package's full documentation and GitHub repository.