erag/laravel-location-kit
Laravel Location Kit provides complete location datasets (countries, states, cities, currencies, timezones, dial codes) with Laravel-friendly APIs: facades/helpers, Blade directives, caching, search, Inertia shared props, plus bundled Vue composables and React hooks.
erag/laravel-location-kit is a complete Laravel location data package for countries, states, cities, currencies, timezones, and dial codes with Laravel helpers, Blade directives, Inertia support, Vue composables, and React hooks.
Built for modern Laravel applications using Laravel + Inertia + Vue / React.
composer require erag/laravel-location-kit
php artisan erag:install-location-kit
npm install ./vendor/erag/laravel-location-kit/vue
npm install ./vendor/erag/laravel-location-kit/react
Countries : 246
States : 4,120
Cities : 48,313
Currencies: 162
Timezones : 419
'data' => storage_path('app/location'),
'inertia' => [
'enabled' => true,
'prop' => 'locationKit',
'share' => [
'countries' => true,
'states' => true,
'cities' => false,
'currencies' => true,
'timezones' => false,
'dial_codes' => true,
],
],
City dataset is large, so it is disabled by default for better performance.
'cities' => true
use LaravelLocationKit\Facades\LocationKit;
LocationKit::countries();
LocationKit::states('india');
LocationKit::cities('gujarat');
LocationKit::currencies();
LocationKit::timezones();
LocationKit::dialCodes();
LocationKit::search('india');
LocationKit::countries();
LocationKit::states(?string $countryKey = null);
LocationKit::cities(?string $stateKey = null);
LocationKit::currencies();
LocationKit::timezones();
LocationKit::dialCodes();
LocationKit::search(string $query, int $limit = 10);
LocationKit::countryOptions();
LocationKit::stateOptions(string $countryKey);
LocationKit::cityOptions(string $stateKey);
page.props.locationKit
You can override bundled package data without editing vendor files.
Create your own files inside:
storage/app/location/
Supported files:
countries.json
states.json
cities.json
currencies.json
When the same key exists, your custom record replaces the default package record.
[
{
"name": "Bharat",
"key": "india",
"countryCodes": ["91"],
"isoCode2": "IN",
"isoCode3": "IND"
}
]
[
{
"country": "india",
"name": "Gujarat",
"key": "gujarat"
},
{
"country": "india",
"name": "Maharashtra",
"key": "maharashtra"
}
]
[
{
"state": "gujarat",
"name": "Ahmedabad",
"key": "ahmedabad"
},
{
"state": "gujarat",
"name": "Surat",
"key": "surat"
}
]
[
{
"code": "INR",
"name": "Indian Rupee",
"symbol": "₹",
"decimal_digits": 2,
"countries": ["india"]
}
]
'data' => storage_path('app/location'),
php artisan location-kit:clear-cache
countries
statesForCountry(countryKey)
citiesForState(stateKey)
findCountry(countryKey)
callingCodeForCountry(countryKey)
phoneMaxLength(countryKey)
localPhoneDigits(countryKey, value)
maskPhone(countryKey, value)
LocationKit::countryOptions();
LocationKit::stateOptions('india');
LocationKit::cityOptions('gujarat');
[
'label' => 'India',
'value' => 'india',
'key' => 'india',
]
location_countries();
location_states('india');
location_cities('gujarat');
location_currencies();
location_timezones();
location_dial_codes();
@locationCountries
@locationStates('india')
@locationCities('gujarat')
<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useLocationKit } from '@erag/laravel-location-kit/vue'
const selectedCountry = ref('india')
const phone = ref('9876543210')
const locationKit = useLocationKit()
const dialCode = computed(() =>
locationKit.callingCodeForCountry(selectedCountry.value)
)
const maxLength = computed(() =>
locationKit.phoneMaxLength(selectedCountry.value)
)
const maskedPhone = computed(() =>
locationKit.maskPhone(selectedCountry.value, phone.value)
)
watch(phone, (value) => {
const digits = locationKit.localPhoneDigits(selectedCountry.value, value)
if (value !== digits) {
phone.value = digits
}
})
</script>
<template>
<div class="space-y-3">
<input
v-model="phone"
inputmode="numeric"
:maxlength="maxLength ?? undefined"
class="h-10 w-full rounded border px-3"
placeholder="Enter phone number"
/>
<div class="rounded border px-3 py-2">
<div>Dial Code: {{ dialCode }}</div>
<div>Masked Phone: {{ maskedPhone }}</div>
</div>
</div>
</template>
Input : 9876543210
Output: +91 98765 43210
use App\Http\Controllers\LocationKitExampleController;
Route::get('/location-kit-example', [LocationKitExampleController::class, 'index'])
->name('location-kit.example');
<?php
namespace App\Http\Controllers;
use LaravelLocationKit\Facades\LocationKit;
use Inertia\Inertia;
use Inertia\Response;
class LocationKitExampleController extends Controller
{
public function index(): Response
{
return Inertia::render('LocationKitExample', [
'countries' => LocationKit::countryOptions(),
'states' => LocationKit::stateOptions('india'),
'cities' => LocationKit::cityOptions('gujarat'),
]);
}
}
<script setup lang="ts">
defineProps({
countries: Array,
states: Array,
cities: Array,
})
</script>
<template>
<div class="space-y-4 p-6">
<h1 class="text-2xl font-bold">🌍 Location Kit Example</h1>
<select class="h-10 w-full rounded border px-3">
<option
v-for="country in countries"
:key="country.value"
>
{{ country.label }}
</option>
</select>
<select class="h-10 w-full rounded border px-3">
<option
v-for="state in states"
:key="state.value"
>
{{ state.label }}
</option>
</select>
<select class="h-10 w-full rounded border px-3">
<option
v-for="city in cities"
:key="city.value"
>
{{ city.label }}
</option>
</select>
</div>
</template>
import { useLocationKit } from '@erag/laravel-location-kit/vue'
const {
countries,
statesForCountry,
citiesForState,
callingCodeForCountry,
phoneMaxLength,
localPhoneDigits,
maskPhone,
} = useLocationKit()
import { useLocationKit } from '@erag/laravel-location-kit/vue'
export default function App() {
const {
countries,
statesForCountry,
citiesForState,
maskPhone,
} = useLocationKit()
return null
}
If you like this package, give it a GitHub star.
How can I help you explore Laravel packages today?