> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/tighten/ziggy/llms.txt
> Use this file to discover all available pages before exploring further.

# Use your Laravel routes in JavaScript

> Ziggy provides a JavaScript route() helper that works like Laravel's, making it a breeze to use your named Laravel routes in JavaScript.

<div
  style={{
background: 'linear-gradient(135deg, #020627 0%, #11161e 100%)',
borderRadius: '12px',
padding: '48px 32px',
marginBottom: '32px',
border: '1px solid rgba(96,99,146,0.3)'
}}
>
  <h1
    style={{
fontSize: '48px',
fontWeight: '700',
color: '#ffffff',
marginBottom: '16px',
lineHeight: '1.2'
}}
  >
    Ziggy
  </h1>

  <p
    style={{
fontSize: '20px',
color: '#cfd0d2',
marginBottom: '32px',
maxWidth: '700px'
}}
  >
    Use your Laravel named routes in JavaScript with a seamless route() helper function.
  </p>

  <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
    <a
      href="/quickstart"
      style={{
    background: '#238636',
    color: '#ffffff',
    padding: '12px 24px',
    borderRadius: '6px',
    textDecoration: 'none',
    fontWeight: '600',
    display: 'inline-block'
  }}
    >
      Get Started
    </a>

    <a
      href="https://github.com/tighten/ziggy"
      style={{
    background: 'transparent',
    color: '#ffffff',
    padding: '12px 24px',
    borderRadius: '6px',
    textDecoration: 'none',
    fontWeight: '600',
    border: '1px solid rgba(255,255,255,0.2)',
    display: 'inline-block'
  }}
    >
      View on GitHub
    </a>
  </div>
</div>

## Why Ziggy?

Ziggy creates a JavaScript `route()` helper function that works like [Laravel's route() helper](https://laravel.com/docs/helpers#method-route), allowing you to use your Laravel named routes in JavaScript just as easily as you do in PHP.

```javascript theme={null}
// In your Laravel routes
Route::get('posts/{post}', [PostController::class, 'show'])->name('posts.show');

// In your JavaScript
route('posts.show', 1); // 'https://ziggy.test/posts/1'
```

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/installation">
    Install Ziggy via Composer and get started in minutes
  </Card>

  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Learn the basics and start using Ziggy in your app
  </Card>

  <Card title="TypeScript Support" icon="code" href="/typescript">
    Auto-generate types for route names and parameters
  </Card>

  <Card title="Framework Integration" icon="puzzle-piece" href="/javascript-frameworks">
    Use with Vue, React, or any JavaScript framework
  </Card>
</CardGroup>

## Key Features

<CardGroup cols={3}>
  <Card title="Route Helper" icon="route">
    JavaScript route() function that mirrors Laravel's PHP helper
  </Card>

  <Card title="Route Model Binding" icon="link">
    Full support for Laravel's route-model binding with custom keys
  </Card>

  <Card title="TypeScript Ready" icon="file-code">
    Generate type definitions for route autocompletion
  </Card>

  <Card title="Vue Plugin" icon="vuejs">
    Built-in Vue plugin for seamless integration
  </Card>

  <Card title="React Hook" icon="react">
    useRoute() hook for React applications
  </Card>

  <Card title="Route Filtering" icon="filter">
    Control which routes are exposed to JavaScript
  </Card>
</CardGroup>

## Quick Example

```javascript theme={null}
// Basic usage
route('posts.index'); // 'https://ziggy.test/posts'

// With parameters
route('posts.show', 1); // 'https://ziggy.test/posts/1'

// With query parameters
route('posts.index', { page: 2, sort: 'date' }); 
// 'https://ziggy.test/posts?page=2&sort=date'

// Check current route
route().current('posts.index'); // true/false

// Get current route name
route().current(); // 'posts.index'
```

## Getting Started

<Steps>
  <Step title="Install Ziggy">
    Add Ziggy to your Laravel application via Composer

    ```bash theme={null}
    composer require tightenco/ziggy
    ```
  </Step>

  <Step title="Add the Blade directive">
    Include the `@routes` directive in your main layout before your JavaScript

    ```blade theme={null}
    @routes
    <script src="/js/app.js"></script>
    ```
  </Step>

  <Step title="Use the route() helper">
    Start using the route() function in your JavaScript

    ```javascript theme={null}
    route('posts.show', { post: 1 });
    ```
  </Step>
</Steps>

## Community

Ziggy is built and maintained by [Tighten](https://tighten.com), a team dedicated to making Laravel development better. Join thousands of developers using Ziggy in production.

<CardGroup cols={2}>
  <Card title="GitHub" icon="github" href="https://github.com/tighten/ziggy">
    View source code, report issues, and contribute
  </Card>

  <Card title="npm Package" icon="npm" href="https://www.npmjs.com/package/ziggy-js">
    Available as ziggy-js on npm
  </Card>
</CardGroup>
