How to use select2 dropdown inside a form in laravel with vite -

Category: Frontend Topic: Select dropdown Created: 2 years ago

There is another select2 dropdown post with laravel 8 which is built with asset bundling tool mix. You can check this post here. This tutorial is about creating select2 dropdown using latest asset bundling tool vite which is currently built in laravel 9 onwards.

Step 01: Adding a fresh laravel project. We have set php version as 8.1.0 for the composer intaller.

composer create-project laravel/laravel select2

Step 02: now with command cd select2 installing frontend node packages for laravel

npm install

Step 03: Now installing laravel ui with bootstrap, jquery and select2 plugin

//bootstrap 
composer require laravel/ui
php artisan ui bootstrap

//jquery 
npm install jquery 

//select2 
npm install select2

Step 04: Setting up vite.config.js like following

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/scss/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
            '~select2': path.resolve(__dirname, 'node_modules/select2')
        }
    }    
});

Step 05: now importing js plugins - bootstrap, jquery and select2 inside resources/js/app.js like below

import "./bootstrap";

import $ from "jquery";
window.$ = $;

import select2 from 'select2';
select2($);

$('.basic-select2').select2();

Step 06: now importing css file for bootstrap and select2 inside resources/scss/app.scss

@import "~bootstrap/scss/bootstrap";

@import "~select2/src/scss/core";

Step 07: Now setting up route to pass variables in view file inside routes/web.php. We are not using controller in this tutorial.

Route::get('/', function () {
    $languages = ['php','mysql','aws','machine learning', 'data science'];
    return view('welcome', compact('languages'));
});

Step 08: Lastly setting up welcome.blade.php with html and loading scripts and assets using vite blade directive

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title> Select2 Usage </title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
     @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    Select2 Usage 
                </a>
            </div>
        </nav>

        <main class="py-4">
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Select2') }}</div>

                <div class="card-body"> 
                    <form method="POST" action="">
                        @csrf

                        <div class="row mb-3">
                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Select Language') }}</label>

                            <div class="col-md-6">
                                <select name="language" class="form-control languages basic-select2" >
                                    <option value="">--</option>
                                    @foreach ($languages as $key=>$language)
                                        <option value="{{ $key }}" >{{ $language }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('Select multiple Language') }}</label>

                            <div class="col-md-6">
                                <select class="form-control languages basic-select2" name="languages[]" multiple="multiple" >
                                    <option value="">--</option>
                                    @foreach ($languages as $key=>$language)
                                        <option value="{{ $key }}" >{{ $language }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>                        

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
        </main>
    </div>

</body>
</html>

This code above creates a form with two select dropdowns. The first one allows single selection and second one supports multi selections. Both of these dropdowns use select2 plugin to aid this selection of desired options from those inputs.

Now if we browse to this url http://localhost:8000 running artisan command php artisan serve we will see the form loaded with select2 dropdown both single and multiple option.

Keep in mind we also need to run npm command npm run dev to run vite to track changes in assets (app.scss and app.js)

Last Edited: 2 years ago

Related Posts

How to use select2 dropdown inside a form in laravel