Building Dependent Dropdowns with Laravel Inertia Vue: A 2026 Guide

Creating dynamic and interactive web applications often requires components that can react to user input in real-time. One common feature is dependent dropdowns, where the options in one dropdown menu depend on the selection made in another. This guide will show you how to implement dependent dropdowns using Laravel, Inertia.js, and Vue.js. This combination leverages the strengths of each technology to create a seamless full-stack experience.

Key Takeaways

• Learn to set up a Laravel backend with Inertia.js and Vue.js for dynamic dropdowns.
• Understand how to pass data between Laravel and Vue using Inertia.
• Implement real-time dropdown updates based on user selection.
• Troubleshoot common issues with dependent dropdowns.

In this tutorial, you'll learn how to create a dependent dropdown feature in a Laravel application using Inertia.js and Vue.js. This is a practical guide aimed at developers who want to enhance their web applications with interactive UI components. By the end of this tutorial, you will have a functional, dynamic dropdown system that responds to user inputs in real-time.

Prerequisites

• Basic knowledge of Laravel and Vue.js.
• Laravel 10 or later installed on your system.
• Node.js and npm installed for managing Vue.js dependencies.
• Understanding of JavaScript ES6 features and Vue.js reactivity principles.

Step 1: Set Up Your Laravel Project

First, ensure you have Laravel installed. You can create a new project using Composer:

composer create-project --prefer-dist laravel/laravel dependent-dropdown

Navigate to the project directory:

cd dependent-dropdown

Install Inertia.js, Vue.js, and the necessary dependencies:

composer require inertiajs/inertia-laravel

npm install vue@next @inertiajs/inertia @inertiajs/inertia-vue3

Step 2: Create the Database and Models

Set up your database in the .env file and run migrations to construct tables for provinces and cities:

php artisan migrate

Create models for Province and City:

php artisan make:model Province -m

php artisan make:model City -m

Update the migration files to define schema:

public function up() { Schema::create('provinces', function (Blueprint $table) { $table->id(); $table->string('name'); $table->timestamps(); }); Schema::create('cities', function (Blueprint $table) { $table->id(); $table->string('name'); $table->foreignId('province_id')->constrained()->onDelete('cascade'); $table->timestamps(); }); }

Step 3: Populate the Database

Seed the database with sample data for provinces and cities:

php artisan tinker

\App\Models\Province::create(['name' => 'Province A']); \App\Models\City::create(['name' => 'City A1', 'province_id' => 1]);

Step 4: Set Up Your Backend Routes and Controller

Create a controller to handle requests:

php artisan make:controller AddressController

Add methods to fetch provinces and cities:

public function loadProvinces() { return Province::all(); } public function loadCities(Request $request) { $provinceId = $request->province_id; return City::where('province_id', $provinceId)->get(); }

Step 5: Configure Inertia and Vue Components

Set up Inertia pages in resources/js/Pages:

// In resources/js/Pages/Create.vue import { ref } from 'vue';import { useForm } from '@inertiajs/inertia-vue3';const form = useForm({ province_id: null, city_id: null });const provinces = ref([]);const cities = ref([]);const loadProvinces = async () => { const response = await axios.get('/api/provinces'); provinces.value = response.data;};const loadCities = async () => { const response = await axios.post('/api/cities', { province_id: form.province_id }); cities.value = response.data;};

Step 6: Connect Frontend and Backend

Ensure your routes in web.php and api.php are properly defined:

Route::get('/api/provinces', [AddressController::class, 'loadProvinces']);Route::post('/api/cities', [AddressController::class, 'loadCities']);

Common Errors/Troubleshooting

Ensure your API endpoints return the correct data format. Use browser's developer tools for API debugging. Common issues include:

• Incorrectly configured routes leading to 404 errors.
• JavaScript errors due to missing props or undefined vars.
• Ensure Vue components are properly imported and registered.

Conclusion

Congratulations! You have successfully implemented a dependent dropdown feature using Laravel, Inertia.js, and Vue.js. This functionality enhances user experience by dynamically updating dropdown options based on prior selections, showcasing the power of real-time data binding and the seamless integration between backend and frontend technologies.

Frequently Asked Questions

What is Inertia.js?

Inertia.js is a framework that allows you to create modern single-page applications using classic server-side routing and controllers.

Why use dependent dropdowns?

Dependent dropdowns enhance user experience by dynamically updating options based on prior selections, ensuring relevant data display.

How does Vue.js help with frontend development?

Vue.js provides a reactive and component-based architecture, making it easier to build interactive UIs and manage complex state.