Laravel 8 Livewire Select2 Dropdown Tutorial Example
Laravel 8 livewire select2 example. In this tutorial, you will learn how to implement the livewire select2 dropdown in laravel 8 app.
This tutorial will help you step by step on how to implement the livewire select2 dropdown in laravel 8 app.
Laravel 8 Livewire Select2 Dropdown Example
- Step 1: Install Laravel 8 App
- Step 2: Add Database Detail
- Step 3: Install Livewire Package
- Step 4: Create Select2 Component using Artisan
- Step 5: Add Route For Livewire Select2
- Step 6: Create View File
- Step 7: Run Development Server
Step 1: Install Laravel 8 App
First of all, Open your terminal OR command prompt and run following command to install laravel fresh app for laravel livewire file upload app:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Add Database Detail
In this step, Add database credentials in the .env file. So open your project root directory and find .env file. Then add database detail in .env file:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here
Now, open your command prompt and run the following command to create the table into your database:
php artisan migrate
Step 3: Install Livewire Package
In this step, you need to install livewire package to your laravel project using the following command:
composer require livewire/livewire
Step 4: Create Select2 Component using Artisan
In this step, create the livewire components for creating a livewire select2 dropdown component using the following command. So Open your cmd and run the following command:
php artisan make:livewire select2
This command will create the following components on the following path:
app/Http/Livewire/Select2.php
resources/views/livewire/select2.blade.php
Now, Navigate to app/Http/Livewire folder and open Select2.php file. Then add the following code into your Select2.php file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <?php namespace App\Http\Livewire; use Livewire\Component; class Select2 extends Component{ public $selCity = ''; public $cities = [ 'Rajkot', 'Surat', 'Baroda', ]; /** * Write code on Method * * @return response() */ public function render() { return view('livewire.select2')->extends('layouts.app'); }} |
After that, Navigate to resources/views/livewire folder and open select2.blade.php file. Then add the following code into your select2.blade.php file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <div> <h1>Laravel 8 Livewire Select2 Example - Tutsmake.com</h1> <strong>Select2 Dropdown: {{ $selCity }}</strong> <div wire:ignore> <select class="form-control" id="select2" > <option value="">-- Select City --</option> @foreach($cities as $city) <option value="{{ $city }}">{{ $city }}</option> @endforeach </select> </div></div> @push('scripts')<script> $(document).ready(function() { $('#select2').select2(); $('#select2').on('change', function (e) { var data = $('#select2').select2("val"); @this.set('selCity', data); }); });</script>@endpush |
Step 5: Add Route For Livewire Select2
In this step, Navigate to routes folder and open web.php. Then add the following routes into your web.php file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?php use Illuminate\Support\Facades\Route; use App\Http\Livewire\Select2; /*|--------------------------------------------------------------------------| Web Routes|--------------------------------------------------------------------------|| Here is where you can register web routes for your application. These| routes are loaded by the RouteServiceProvider within a group which| contains the "web" middleware group. Now create something great!|*/ Route::get('select2', Select2::class); |
Step 6: Create View File
In this step, navigate to resources/views/livewire folder and create one blade view files that name app.blade.php file. Then add the following code into your app.blade.php file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html><html><head> <title>Laravel Livewire Example - Tutsmake.com</title> @livewireStyles <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /></head><body> <div class="container"> @yield('content')</div> </body> @livewireScripts@stack('scripts')</html> |
Step 7: Run Development Server
Finally, you need to run the following PHP artisan serve command to start your laravel livewire upload file app:
php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080
Now, you are ready to run laravel 8 livewire select2 app. So open your browser and hit the following URL into your browser:
localhost:8000/select2
