Como incluir Select2 no formulário no Laravel 10 com Vite

---

Publicado 22 de fevereiro de 2024

Neste tutorial, será apresentado como incluir Select2 no formulário no Laravel 10 com Vite.

Primeiramente, será demonstrado como usar Vite no Laravel 10.

Em seguida, será explicado como instalar no Laravel o Select2 e jQuery.

Por fim, será mostrado como implementar o Select2 no formulário cadastrar e editar.

Download do código fonte desenvolvido na aula: Download

Curso de Laravel: Mais Detalhes do Curso

Playlist completa sobre Laravel: Acessar

Receber as aulas gratuitas do curso de Laravel: Acessar

Para começar, é utilizado como base o projeto da aula "Como incluir Select2 no formulário no Laravel 10".

Instalado o Select2, o jQuery e o tema do Bootstrap para o Select2.

Instalar o Select2.
npm install select2

Instalar o jQuery.
npm install jquery

Instalar o tema do Bootstrap 5 para Select2.
npm install select2-bootstrap-5-theme

Incluído o JavaScript do Select2, o jQuery e o tema do Bootstrap para o Select2 no arquivo 'resources/js/bootstrap.js'.

// Importar jQuery
import jQuery from 'jquery';
window.$ = jQuery;

// Importar select2
import select2 from 'select2';
select2();

// Importar o axios
import axios from 'axios';
window.axios = axios;

Verificar se no arquivo 'resources/js/app.js' está sendo incluído o 'bootstrap.js'.

/* Importar o arquivo bootstrap */
import './bootstrap';

Verificar se no arquivo 'vite.config.js' está sendo incluído 'resources/js/app.js'.

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/sass/app.scss', 'resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Verificar se no layout, no projeto do tutorial, no arquivo 'resources/views/layouts/admin.blade.php', está sendo incluído 'resources/js/app.js'.

@vite(['resources/sass/app.scss', 'resources/css/app.css', 'resources/js/app.js'])

Para incluir o CSS do layout utilizando o Vite, no arquivo 'resources/css/app.css', foi adicionado o CSS do Select2 e o tema do Bootstrap para o Select2.

/* Importar o CSS do Select2 */
@import 'select2/dist/css/select2.min.css';

/* Importar o layout do Bootstrap para Select2 */
@import 'select2-bootstrap-5-theme/dist/select2-bootstrap-5-theme.min.css';

Verificar se no arquivo 'vite.config.js' está sendo incluído 'resources/css/app.css'.

input: ['resources/sass/app.scss', 'resources/css/app.css', 'resources/js/app.js'],

Verificar se no layout, no projeto do tutorial, no arquivo 'resources/views/layouts/admin.blade.php', está sendo incluído 'resources/css/app.css'.

@vite(['resources/sass/app.scss', 'resources/css/app.css', 'resources/js/app.js'])

É necessário criar a função em JavaScript para carregar o Select2 nos campos que possuem o seletor '.select2' e também adicionar o tema do Bootstrap para o Select2.

// Quando carregar a página execute o select2
$(function () {
    $('.select2').select2({
        theme: 'bootstrap-5'
    });
});

Para finalizar, basta adicionar o seletor 'select2' no campo para que o recurso de pesquisa seja apresentado no campo do tipo select.

<select name="situacao_conta_id" id="situacao_conta_id" class="form-select select2">

Baixar o código-fonte completo do projeto.

Bom, era isso. Espero que o tutorial tenha sido útil!