Ziggy

Geliştirici: Tighten

Laravel route tanımlarını JavaScript tarafında route() fonksiyonuyla kullanmanızı sağlayan köprü.

GitHub Deposu →

Kurulum

Composer

composer require tightenco/ziggy

Dokümantasyon & Kullanım

Markdown

Ziggy

Ziggy, Laravel'in isimlendirilmiş rotalarını (named routes) JavaScript tarafına aktararak, frontend katmanında (Vue, React, Svelte, Alpine.js veya vanilya JS) tıpkı PHP tarafındaki route() yardımcısı gibi URL oluşturmanızı sağlayan hafif ve vazgeçilmez bir köprü paketidir.

Neden Tercih Edilmeli?

Hardcoded URL'lerden Kurtulma: JavaScript içinde /api/v1/posts/ gibi statik URL yazım hatalarını ortadan kaldırır.
Inertia.js & Vue/React Uyum: Modern SPA mimarilerinde yönlendirmeleri ve form göndermelerini Laravel rota isimleriyle senkronize tutar.
Parametre & Query String Yönetimi: Rota parametrelerini ({id}, {slug}) ve query string değerlerini otomatik olarak algılar ve biçimlendirir.
TypeScript Desteği: Rota isimleri ve parametreleri için otomatik tip tanımlamaları (ziggy:generate --types) üretebilir.
Filtreleme Desteği: Sadece istemci tarafında ihtiyaç duyulan rotaları dışarı açarak güvenlik ve dosya boyutu avantajı sağlar.

Kurulum

Composer ile Ziggy'yi projenize ekleyin:

composer require tightenco/ziggy

Temel Kullanım

1. Blade Şablonunda Kullanım

Blade şablonunuzun <head> kısmına @routes direktifini ekleyin:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="utf-8">
    <title>Laravel Uygulaması</title>
    @routes
</head>
<body>
    <script>
        // Rota oluşturma
        const profileUrl = route('users.profile', { user: 42 });
        console.log(profileUrl); // https://example.com/users/42

        // Query parametreli rota
        const searchUrl = route('posts.index', { search: 'laravel', page: 2 });
        console.log(searchUrl); // https://example.com/posts?search=laravel&page=2

        // Mevcut route kontrolü
        if (route().current('users.*')) {
            console.log('Kullanıcı yönetim sayfasındasınız.');
        }
    </script>
</body>
</html>

2. Vue / React / Inertia.js Entegrasyonu

NPM üzerinden Ziggy paketini kurun:

npm install ziggy-js

Rotaları statik bir JS dosyası olarak derleyin:

php artisan ziggy:generate

JavaScript dosyanızda (app.js):

import { createApp, h } from 'vue';
import { ZiggyVue } from 'ziggy-js';
import { Ziggy } from './ziggy';

createApp(App)
    .use(ZiggyVue, Ziggy)
    .mount('#app');

Vue Bileşeninde (.vue):

<template>
    <nav>
        <a :href="route('home')">Ana Sayfa</a>
        <a :href="route('posts.show', { post: post.slug })">
            {{ post.title }}
        </a>
    </nav>
</template>

<script setup>
import { route } from 'ziggy-js';

const submitForm = () => {
    fetch(route('api.posts.store'), {
        method: 'POST',
        body: JSON.stringify(formData),
    });
};
</script>

3. Rotaları Filtreleme (Güvenlik)

Yapılandırma dosyasını yayınlayıp (config/ziggy.php):

return [
    'only' => ['home', 'posts.*', 'users.show', 'api.public.*'],
    'except' => ['admin.*', 'horizon.*', 'telescope.*'],
];

Paket Bilgileri

Yazar: Tighten
Kategori: frontend
GitHub Yıldızları: ⭐ 4000
Paket Adı: tightenco/ziggy
Lisans: MIT / Açık Kaynak
Kaynak Kodu: GitHub →

Etiketler

#routing #javascript #vue #react #inertia

Diğer Paketler

Filament ⭐ 19500

TALL stack üzerine kurulu, zarif ve son derece genişletilebilir admin paneli ve CRUD yönetim aracı.

Inertia.js Laravel Adapter ⭐ 3200

API oluşturmadan Vue, React veya Svelte bileşenlerini klasik Laravel controller ve view yapısıyla SPA olarak çalıştırmayı sağlayan adaptör.

Intervention Image ⭐ 14500

PHP ve Laravel için popüler, güçlü, esnek görsel işleme, kırpma, filtreleme ve optimizasyon kütüphanesi.

Tüm Paketleri Gör →