デザインできないのでLaravel6にAdminLTEを導入してみる

環境

php 7.4
Laravel 6.0
composer 1.8.5

Laravel６でログイン機能を作る

Laravelのプロジェクトは既に作成している状態からはじめます。
Laravel6の公式ドキュメントを見ながら、認証機能を実装していきます。
認証画面のViewは公式と同じくVueベースのものを使います。

// laravel/uiをインストール
$ composer require laravel/ui "^1.0" --dev

// VueとBootstrapをインストール
$ php artisan ui vue --auth

// 必要なパッケージをインストール
$ npm install

// CSS,JSファイルをビルド
$ npm run dev

// マイグレーション実行
$ php artisan migrate

ここまで完了するとこんな登録画面が表示されます。

が、デザインがシンプルすぎるので少しオシャレにしてみたいと思います。
そこで登場するのがAdminLTE。

AdminLTEとは

AdminLTEは、Bootstrapベースでつくられた、管理画面作成などに特化したCSSフレームワークです。

LaravelのプロジェクトにAdminLTEを組み込む

Laravel-AdminLTEを使います。
Laravel-AdminLTEについてはGithubのREADME.mdでこんな感じで説明されています。

This package provides an easy way to quickly set up AdminLTE v3 with Laravel 6 or higher. It has no requirements and dependencies besides Laravel, so you can start building your admin panel immediately.

// Laravel-AdminLTEをインストール
$ composer require jeroennoten/laravel-adminlte
$ php artisan adminlte:install

// 認証用のViewを作成
$ php artisan adminlte:install --only=auth_views

実行すると認証関連の画面がAdminLTEのデザインに変更されています。
登録画面はこんな感じ。

AdminLTEを日本語化する

config/app.phpの言語設定をenからjaに変更します。

app.php

<?php

return [

... 省略

    /*
    |--------------------------------------------------------------------------
    | Application Locale Configuration
    |--------------------------------------------------------------------------
    |
    | The application locale determines the default locale that will be used
    | by the translation service provider. You are free to set this value
    | to any of the locales which will be supported by the application.
    |
    */

    'locale' => 'ja',

HOME画面にAdminLTEのテンプレートを使ってみる

HOME画面にはLaravel-AdminLTEのWikiにあるテンプレートを使ってみます。

resources/views/home.blade.php

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <p>Welcome to this beautiful admin panel.</p>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
    <script> console.log('Hi!'); </script>
@stop

ホーム画面も良い感じになりました。