🔧 02. Instalación y configuración básica

Instalación con NPM o Yarn

Ziggy se puede instalar fácilmente en tu proyecto Laravel utilizando NPM o Yarn. Primero, asegúrate de tener un proyecto Laravel con Node.js configurado.

NPM
Yarn

# Usando NPM
npm install ziggy-js

# Usando Yarn
yarn add ziggy-js

Publicación del archivo ziggy.php

Después de instalar el paquete, necesitas publicar el archivo de configuración de Ziggy. Este archivo te permitirá personalizar qué rutas se exponen a JavaScript y otras opciones.

php artisan ziggy:generate

Este comando creará un archivo ziggy.php en el directorio config de tu proyecto Laravel. El archivo de configuración tiene esta estructura básica:

<?php
// config/ziggy.php

return [
  // Rutas que se expondrán a JavaScript
  'groups' => [
      'web' => [
          'fallback' => true,
          'only' => [],
          'except' => [],
      ],
  ],

  // Dominio base para las rutas
  'url' => env('APP_URL'),

  // Prefijo para las rutas
  'prefix' => null,

  // Dominio para las cookies
  'domain' => null,
];

Agregar Ziggy a vite.config.js o webpack.mix.js

Para integrar Ziggy en tu proceso de compilación de assets, necesitas configurar tu herramienta de compilación. A continuación se muestran ejemplos para Vite y Laravel Mix.

Vite (Laravel 9+)
Laravel Mix (Laravel 8 y anteriores)

Para proyectos Laravel modernos que utilizan Vite:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            // Asegura que Ziggy esté disponible globalmente
            'ziggy-js': '/vendor/tightenco/ziggy/dist/index.js',
        },
    },
});

Luego, en tu archivo JavaScript principal:

import { Ziggy } from './ziggy';
import route from 'ziggy-js';

// Hacer que route esté disponible globalmente
window.route = route;

Para proyectos que utilizan Laravel Mix:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       //
   ])
   .webpackConfig({
       resolve: {
           alias: {
               'ziggy-js': path.resolve('vendor/tightenco/ziggy/dist/index.js'),
           }
       }
   });

Y en tu archivo JavaScript principal:

import { Ziggy } from './ziggy';
import route from 'ziggy-js';

window.route = route;

Incluir Ziggy en la vista Blade principal

Para que Ziggy funcione correctamente, necesitas incluir el archivo de rutas generado en tu vista Blade principal. Hay varias formas de hacerlo:

La forma más sencilla es usar la directiva @routes en tu plantilla Blade principal:

<!DOCTYPE html>
<html>
<head>
    <title>Mi aplicación Laravel</title>
    @routes <!-- Esto inyecta las rutas de Ziggy -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app"><!-- Contenido de la aplicación --></div>
</body>
</html>

También puedes generar un archivo JavaScript con las rutas:

php artisan ziggy:generate resources/js/ziggy.js

Y luego importarlo en tu aplicación:

import { Ziggy } from './ziggy';
import route from 'ziggy-js';

window.route = route;

Si estás usando Inertia.js, puedes incluir Ziggy como una prop compartida:

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'ziggy' => function () use ($request) {
            return array_merge((new Ziggy)->toArray(), [
                'location' => $request->url(),
            ]);
        },
    ]);
}

Y en tu aplicación JavaScript:

import { createInertiaApp } from '@inertiajs/inertia-vue3';
import route from 'ziggy-js';

createInertiaApp({
    // ...
    setup({ el, app, props, plugin }) {
        // Hacer que route esté disponible globalmente
        window.route = (name, params, absolute) => {
            return route(name, params, absolute, props.initialPage.props.ziggy);
        };

        // ...
    },
});

Verificación de la instalación

Para verificar que Ziggy se ha instalado correctamente, puedes abrir la consola del navegador y probar la función route():

// Debería devolver la URL para la ruta 'home'
console.log(route('home'));

// Debería mostrar todas las rutas disponibles
console.log(route().all());

Resumen de instalación

1 Instalar el paquete con NPM o Yarn

2 Publicar el archivo de configuración con php artisan ziggy:generate

3 Configurar tu herramienta de compilación (Vite o Laravel Mix)

4 Incluir Ziggy en tu vista Blade principal

5 Verificar la instalación en la consola del navegador

🐝