BLANTERORIONv101

Install Bootstrap 5 di Laravel 9 dengan Vite

9 Agustus 2022

Pada tutorial kali ini saya akan membahas tentang Cara Instal Bootstrap 5 di Laravel 9 dengan Vite. Mungkin ada dari teman-teman yang menginstal laravel ui dan bootstrap auth namun mengalamai kendala, artikel ini merupakan solusi untuk kendala tersebut.

Silahkan ikuti langkah-langkah di bawah ini :

Langkah 1. Instal Laravel 9

Pada langkah ini, Anda bisa menginstal project laravel baru dengan perintah di bawah ini:

composer create-project --prefer-dist laravel/laravel example-app

atau jika Anda sudah memiliki project laravel dengan versi 9, silahkan langkahi saja ke langkah kedua.

Langkah 2. Install Laravel UI

Selanjutnya, Anda perlu untuk menjalankan perintah di bawah ini untuk menginstal laravel ui:

composer require laravel/ui

Langkah 3. Buat Auth menggunakan Scaffolding dengan Bootstrap 5

Pada langkah ini, Anda pelru untuk membuat Auth menggunakan Scaffolding dengan perintah dibawah ini:

php artisan ui bootstrap --auth

Langkah 4. Import Path Bootstrap 5 ke vite.config.js

Selanjutnya, Anda perlu untuk mengimpor bootstrap 5 ke vite.config.js

File vite.config.js sebelum diubah:

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

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

File vite.config.js sesudah diubah:

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

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

Ganti file vite.config.js sebelum dengan file yang sudah di ubah.

Langkah 5. Import Bootstrap 5 SCSS

Pada langkah ini, Anda perlu untuk menimpor jalur bootstrap 5 SCSS di direktori resources/js/app.js Seperti dibawah ini:

import './bootstrap';

import '../sass/app.scss'

import * as bootstrap from 'bootstrap'

Langkah 6. Include @vite pada file blade

Jika sudah mengikuti semua langkah-langkah di atas, Anda pelu pergi ke direktori resources/views/layouts/app.blade.php untuk ganti kode dibawah ini :

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

Menjadi :

@vite(['resources/js/app.js'])

Kurang lebih untuk tampilan lengkapnya seperti kode di bawah ini :

<!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>{{ config('app.name', 'Laravel') }}</title>

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

    <!-- Scripts -->
    @vite(['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('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav me-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <!-- Authentication Links -->
                        @guest
                            @if (Route::has('login'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                                </li>
                            @endif

                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>

                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>
</body>
</html>

Langkah 7. Jalankan Perintah Npm

Pada langkah ini, Anda perlu untuk jalankan peribtah npm untuk membangun file asset.

npm install

dan

npm run build

Jika sudah, silahkan jalankan aplikasi Anda dan cek tampilan login dan register Anda.

Instal Bootstrap 5 di Laravel 9 dengan Vite
Gambar 1. Login

Oke, kurang lebih seperti itu untuk tutorial tentang Cara Install Bootstrap 5 di Laravel 9 dengan Vite. Jika Anda masih bingung atau mendapat error silahkan bertanya pada kolom komentar dibawah ini.

Komentar