How to use Ziggy with Vite in Laravel?

While Ziggy's README focuses on Laravel Mix, you can configure Vite by setting up aliases in vite.config.js to import ziggy-js from the vendor directory, or use community plugins like vite-plugin-ziggy for automatic regeneration.

Ziggy vs Inertia.js for Laravel routing?

Ziggy is solely for URL generation, allowing you to use Laravel routes in JavaScript, while Inertia.js is a full-stack framework for building SPAs with server-side routing. Choose Ziggy for lightweight route sync; Inertia for integrated SPA experiences.

How to filter routes in Ziggy for better security?

Create a config/ziggy.php file with 'only' or 'except' arrays, or define groups to expose specific routes on different pages, as explained in the Filtering Routes section. This prevents sensitive routes from being exposed in HTML.

Can Ziggy handle custom route keys like UUIDs?

Yes, Ziggy supports custom route-model binding keys declared in Laravel routes, such as 'photo:uuid', and will correctly extract values from JavaScript objects when generating URLs, as shown in the route-model binding examples.

What if Ziggy generates HTTP instead of HTTPS URLs?

This often occurs with TLS/SSL termination; fix it by configuring Laravel's trusted proxies according to the documentation, which ensures Ziggy uses the correct scheme based on your app's URL settings.

How to use Ziggy in a React app without Blade?

Import the useRoute hook from ziggy-js and pass the Ziggy config object generated via php artisan ziggy:generate, or set the config globally, as detailed in the React integration section of the README.

Does Ziggy work with Content Security Policies (CSP)?

Yes, you can pass a nonce to the @routes directive or output routes as JSON to comply with CSPs, though this requires additional setup to load the route() function manually, as noted in the 'Using @routes with a Content Security Policy' part.

Ziggy — Laravel Route Helper for JavaScript

What is Ziggy?

Ziggy is a JavaScript library that provides a route() helper function matching Laravel's syntax, allowing developers to generate URLs for named Laravel routes directly in JavaScript. It solves the problem of maintaining consistent URLs between Laravel backend routes and JavaScript frontend code, eliminating manual URL construction and reducing errors.

Target Audience

Laravel developers building JavaScript frontends (Vue, React, or vanilla JS) who need to generate URLs that match their Laravel application's named routes.

Value Proposition

Developers choose Ziggy because it provides a seamless, type-safe way to use Laravel routing in JavaScript with full support for route parameters, query strings, route-model binding, and framework integrations, reducing duplication and ensuring URL consistency.

Use your Laravel routes in JavaScript.

Use Cases

Best For

Generating URLs for AJAX requests in Laravel applications
Building Vue or React frontends that need to link to Laravel routes
Maintaining consistent routing between Laravel backend and JavaScript SPA
Implementing route-model binding in JavaScript frontends
Adding TypeScript autocompletion for Laravel route names
Filtering which Laravel routes are exposed to the frontend for security

Not Ideal For

Projects not using Laravel as the backend framework, since Ziggy is tightly coupled to Laravel's routing system
Applications relying solely on server-side rendering with minimal JavaScript, where frontend route generation adds unnecessary complexity
Teams preferring fully decoupled frontends with independent routing libraries like React Router or Vue Router, without backend dependencies
Non-PHP or multi-framework environments where similar route synchronization is needed but Ziggy's Laravel integration cannot be leveraged

Pros & Cons

Pros

Laravel Syntax Parity

Ziggy's route() function exactly mirrors Laravel's helper, supporting parameters, query strings, and default values, as demonstrated in the README's extensive examples.

Route-Model Binding

Automatically respects Laravel's route-model binding keys like 'slug' or custom keys when passing JavaScript objects, eliminating manual parameter extraction.

Framework Integrations

Includes Vue plugin and React hook for seamless use in modern frontends, with clear setup instructions in the README for both frameworks.

TypeScript Autocompletion

Offers full TypeScript definitions and an Artisan command to generate strict route name checking, enhancing developer experience with IDE support.

Configurable Route Filtering

Allows filtering routes via config files or groups, enabling control over which routes are exposed to the frontend for security, as detailed in the Filtering Routes section.

Cons

Laravel-Only Lock-In

Ziggy is useless outside Laravel ecosystems, making it a poor choice for multi-framework projects or those migrating away from Laravel.

Complex SPA Setup

For single-page applications or separate frontend repos, manual configuration is required to generate and import route files, adding steps compared to integrated solutions.

Default Route Exposure

The @routes Blade directive outputs all named routes in HTML by default, risking unintended information leakage if not explicitly filtered, which the README warns about.

Maintenance Overhead

Changes to Laravel routes necessitate regenerating Ziggy's config, and without automated tooling like the provided Mix plugin, this can be a manual, error-prone process.

Frequently Asked Questions

What is Ziggy?

Target Audience

Laravel developers building JavaScript frontends (Vue, React, or vanilla JS) who need to generate URLs that match their Laravel application's named routes.

Value Proposition

Use Cases

Best For

Generating URLs for AJAX requests in Laravel applications
Building Vue or React frontends that need to link to Laravel routes
Maintaining consistent routing between Laravel backend and JavaScript SPA
Implementing route-model binding in JavaScript frontends
Adding TypeScript autocompletion for Laravel route names
Filtering which Laravel routes are exposed to the frontend for security

Not Ideal For

Projects not using Laravel as the backend framework, since Ziggy is tightly coupled to Laravel's routing system
Applications relying solely on server-side rendering with minimal JavaScript, where frontend route generation adds unnecessary complexity
Teams preferring fully decoupled frontends with independent routing libraries like React Router or Vue Router, without backend dependencies
Non-PHP or multi-framework environments where similar route synchronization is needed but Ziggy's Laravel integration cannot be leveraged

Pros & Cons

Pros

Laravel Syntax Parity

Ziggy's route() function exactly mirrors Laravel's helper, supporting parameters, query strings, and default values, as demonstrated in the README's extensive examples.

Route-Model Binding

Automatically respects Laravel's route-model binding keys like 'slug' or custom keys when passing JavaScript objects, eliminating manual parameter extraction.

Framework Integrations

Includes Vue plugin and React hook for seamless use in modern frontends, with clear setup instructions in the README for both frameworks.

TypeScript Autocompletion

Offers full TypeScript definitions and an Artisan command to generate strict route name checking, enhancing developer experience with IDE support.

Configurable Route Filtering

Allows filtering routes via config files or groups, enabling control over which routes are exposed to the frontend for security, as detailed in the Filtering Routes section.

Cons

Laravel-Only Lock-In

Ziggy is useless outside Laravel ecosystems, making it a poor choice for multi-framework projects or those migrating away from Laravel.

Complex SPA Setup

For single-page applications or separate frontend repos, manual configuration is required to generate and import route files, adding steps compared to integrated solutions.

Default Route Exposure

The @routes Blade directive outputs all named routes in HTML by default, risking unintended information leakage if not explicitly filtered, which the README warns about.

Maintenance Overhead

Changes to Laravel routes necessitate regenerating Ziggy's config, and without automated tooling like the provided Mix plugin, this can be a manual, error-prone process.

Frequently Asked Questions

Ziggy

What is Ziggy?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

Ziggy

What is Ziggy?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?