> ## 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.
# Quickstart
> Get up and running with Ziggy in minutes. Build your first route()-powered feature from scratch.
# Quickstart Guide
This guide will walk you through creating your first Ziggy-powered feature from a fresh Laravel installation to making your first `route()` call in JavaScript.
## Prerequisites
Before starting, ensure you have:
* Laravel 9.0 or higher installed
* PHP 8.1 or higher
* Node.js and npm (for frontend assets)
## Step 1: Install Ziggy
Install Ziggy via Composer:
```bash theme={null}
composer require tightenco/ziggy
```
Ziggy is now installed and automatically registered!
## Step 2: Create Laravel Routes
Let's create a simple blog post feature. Add these routes to `routes/web.php`:
```php routes/web.php theme={null}
use App\Http\Controllers\PostController;
Route::get('/', function () {
return view('welcome');
})->name('home');
Route::get('/posts', [PostController::class, 'index'])->name('posts.index');
Route::get('/posts/{post}', [PostController::class, 'show'])->name('posts.show');
Route::post('/posts', [PostController::class, 'store'])->name('posts.store');
```
The `.name()` method is crucial—Ziggy only works with **named routes**.
## Step 3: Add @routes to Your Layout
Open your main layout file (typically `resources/views/layouts/app.blade.php` or create it if it doesn't exist):
```blade resources/views/layouts/app.blade.php theme={null}
{{ config('app.name', 'Laravel') }}
{{-- Add Ziggy routes BEFORE your JavaScript --}}
@routes
@vite(['resources/css/app.css', 'resources/js/app.js'])
@yield('content')
```
Place `@routes` **before** `@vite` or any other JavaScript to ensure routes are available when your scripts load.
## Step 4: Create a View with JavaScript
Create a posts listing page at `resources/views/posts/index.blade.php`:
```blade resources/views/posts/index.blade.php theme={null}
@extends('layouts.app')
@section('content')
Blog Posts
Loading posts...
@endsection
```
## Step 5: Use route() in Your JavaScript
Let's create a more complex example with Axios in `resources/js/app.js`:
```js resources/js/app.js theme={null}
import axios from 'axios';
// Configure Axios defaults
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// Example 1: GET request
function loadPost(postId) {
return axios.get(route('posts.show', postId))
.then(response => response.data)
.catch(error => {
console.error('Failed to load post:', error);
throw error;
});
}
// Example 2: POST request with CSRF token
function createPost(postData) {
return axios.post(route('posts.store'), postData)
.then(response => {
console.log('Post created successfully!');
// Redirect to the new post
window.location.href = route('posts.show', response.data.id);
})
.catch(error => {
console.error('Failed to create post:', error);
throw error;
});
}
// Example 3: Using with query parameters
function searchPosts(searchTerm, page = 1) {
const url = route('posts.index', {
search: searchTerm,
page: page,
sort: 'created_at',
});
return axios.get(url).then(response => response.data);
}
// Make functions available globally
window.loadPost = loadPost;
window.createPost = createPost;
window.searchPosts = searchPosts;
```
## Step 6: Test It Out
```bash theme={null}
php artisan serve
```
Visit `http://localhost:8000` and open your browser's developer console (F12).
Test these commands in the console:
```js theme={null}
// Generate a URL
route('posts.show', 1);
// Output: 'http://localhost:8000/posts/1'
// Check if route exists
route().has('posts.index');
// Output: true
// Get current route
route().current();
// Output: 'home' (or whatever page you're on)
// List all routes
Object.keys(Ziggy.routes);
// Output: ['home', 'posts.index', 'posts.show', 'posts.store']
```
Success! You're now using Ziggy to generate type-safe URLs in JavaScript.
## Common Use Cases
### With Alpine.js
```html theme={null}
```
### With Vue 3
First, install the Vue plugin:
```js resources/js/app.js theme={null}
import { createApp } from 'vue';
import { ZiggyVue } from 'ziggy-js';
const app = createApp({});
// Install Ziggy's Vue plugin
app.use(ZiggyVue);
app.mount('#app');
```
Then use it in your components:
```vue PostsList.vue theme={null}
);
}
```
### With Form Submissions
```html theme={null}
```
## Debugging Tips
**Problem:** `Uncaught ReferenceError: route is not defined`
**Solution:**
* Ensure `@routes` is added to your layout **before** your JavaScript
* Clear your view cache: `php artisan view:clear`
* Check that you're on a page that uses the layout with `@routes`
**Problem:** `Ziggy error: route 'posts.show' is not in the route list`
**Solution:**
* Verify the route exists: `php artisan route:list --name=posts.show`
* Make sure the route has a name: `->name('posts.show')`
* Clear route cache: `php artisan route:clear`
* Reload the page to get the latest route list
**Problem:** URLs have wrong domain or protocol (http vs https)
**Solution:**
* Check your `APP_URL` in `.env`
* Configure trusted proxies if behind a load balancer
* See the [TLS/SSL termination docs](https://laravel.com/docs/requests#configuring-trusted-proxies)
## Next Steps
Learn advanced parameter handling and route model binding
Control which routes are exposed to JavaScript
Enable route name autocompletion with TypeScript
Deep dives for Vue, React, and other frameworks
## You're All Set!
Congratulations! You've successfully:
✓✓✓✓
You're now ready to build amazing features with type-safe routing!