Weave Code
Ziggy Laravel Package
microweber-deps/ziggy
Ziggy exposes Laravel named routes to JavaScript via a Blade directive, so front-end code can call route() helpers with route names, parameters, and query strings. This Microweber dependency package bundles Ziggy for its ecosystem, simplifying URL generation in client-side scripts.
Ziggy provides a convenient route() helper for JavaScript, letting you reference your Laravel named routes in frontend code just as you would in PHP. It exposes your application's routes—including parameters, middleware, and current URL state—as a JSON configuration consumed by the included JavaScript library.
This microweber-deps build packages the library for use within Microweber's dependency stack, removing the need to hardcode URLs in the frontend.
- Works with Laravel named routes, parameters, and default values
- Blade directives for injecting route config into views
- Filterable routes and groups for fine-grained exposure
- Supports Vue, React, and plain JavaScript
- Includes
@routesand@routehelpers
Frequently asked questions about Ziggy
- How do I install Ziggy in a Laravel app?
- Install it with Composer using composer require microweber-deps/ziggy. Add the @routes Blade directive to your main layout before your JavaScript bundle so the route list is available to the page. Optionally publish the config file if you need to customize route filtering or grouping. Then import or expose the route() helper in your front-end code.
- How does Ziggy expose Laravel named routes to JavaScript?
- Ziggy reads Laravel's registered routes and outputs a JSON structure containing names, URIs, parameters, and defaults. That structure is injected into the page through the @routes directive or fetched from a generated endpoint. The JavaScript route() helper then looks up a route by name and builds the URL with the parameters you pass.
- Can I limit which routes Ziggy shares with JavaScript?
- Yes, Ziggy supports only and except filters in its config file, so you can whitelist or blacklist route names. You can also define route groups and pass a group name to the @routes directive to expose only that subset. This is useful for keeping the payload small and avoiding leaking admin or internal route names.
- How do I use Ziggy's route() helper in Vue or React?
- Install the ziggy-js npm package and import the route helper where needed, for example import { route } from ziggy-js. In Vue you can add it to the global properties or provide it through a composable; in React you can import it directly into components or put it on a context. The @routes directive still needs to be present in the Blade layout so the helper has route data to read.
- Which Laravel versions are supported by this Ziggy package?
- Support depends on the Ziggy major version: Ziggy 1.x generally targets Laravel 8 and 9, while Ziggy 2.x targets Laravel 9 and newer, including 10 and 11, with PHP 8.1 or higher. Because this is a Microweber dependency build, check the composer.json constraints for the exact Laravel and PHP versions it allows before upgrading.
- Do I still need the ziggy-js npm package when using the Blade directive?
- The @routes directive provides the route data, but the route() function itself comes from the ziggy-js JavaScript package in typical modern setups. Install ziggy-js with npm or yarn, import route where you need it, and optionally assign it to window for global access. The Blade directive alone does not replace the JavaScript helper library.
- How can I test front-end code that calls Ziggy's route() helper?
- For unit tests, mock the ziggy-js module or set a minimal global Ziggy object containing only the routes your test needs. For browser or end-to-end tests, include the @routes directive in the rendered layout so the helper has real route data. Keep route names and parameters in sync with your Laravel routes to avoid false positives.
- Does Ziggy handle route parameters and query strings?
- Yes, you can pass positional parameters like route('posts.show', 1) or named parameters like route('posts.show', { post: 1 }). Any extra parameters that are not part of the URI become query string values automatically. Optional route parameters can be omitted, and Ziggy will use defaults where they are defined.
- What are some alternatives to Ziggy for Laravel routes in JavaScript?
- Common alternatives include manually hard-coding URLs, exposing a custom JSON endpoint that returns route URLs, or using other route-to-JavaScript packages such as laravel-js-routes. Ziggy remains the most widely used option because it supports filtering, groups, and Blade injection. If your app only needs a few URLs, a small custom helper may be simpler than adding a dependency.
- Is Ziggy production-ready and can I cache the generated routes?
- Yes, Ziggy is widely used in production Laravel applications. You can run php artisan ziggy:generate to create a static route file and include that instead of rebuilding the route list on every request. Regenerate the file whenever your routes change, and combine it with Laravel's route caching for better performance.
Weaver
How can I help you explore Laravel packages today?