Laravel8でログイン機能を実装する。

となっています。
Blade ComponentsファイルはApp¥View¥Componentsに保存すると自動で認識されます。
対応するviewファイルはresources/views/layouts/guest.blade.phpということがここでわかります。
つまりx-guest-layoutで始まるBlade Componentsがapp¥View¥Components￥GuestLayout.phpに対応するってことらしいです。
ファイル名で分からないの辛い。
Bladeコンポーネントのタグ名はx-{コンポーネント名}となり、
resources/views/フォルダ内に配置。
新規で作る場合わかりやすいように
resources/views/componentsに配置すると良いかもしれません。
タグで囲われているlogin.blade.phpですが、囲われている部分が
guest.blade.php内の{{$slot}}の場所に挿入される仕組みになっています。こんなんわかるか。

        

            {{ $slot }}
        
    

この部分ですね。
今までは@extend, @yield, @sectionといったディレクティブを使ってきましたが
{{ $slot }}

のような形に変わるんですね。と覚えておいても問題ないと思う。
CSS読み込んでない
ここまで来てやっとわかったのが、やっぱCSSを読み込んでないね。
@vite　の部分にCSSとJavascriptが読み込まれるはず
これですね。
Laravel8はLaravel mixではなくviteを標準使用になったらしいです。
大幅に変わりすぎだろ。
@viteではコンパイル後のファイルを参照するのではなく、
コンパイル元のファイルパスを指定するみたいです。
というかコンパイルされてないよねこれ？
これまでのLaravel mixのコンパイル設定はwebpack.mix.jsに書いていましたが、
vite仕様に変わってしまったのでvite.config.jsの方に記載する必要があります。
よく見るとルートディレクトリにありましたのでこれを編集していきます。
当環境ではこうなっていました。
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Viewファイルのコードの方は
@vite(['resources/css/app.css', 'resources/js/app.js'])

となっていたのでこのままでいいんですかね？
ルートディレクトリのpackage.jsonを開いてみると
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.4.7",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0"
    }
}

のようになっていた。
それではコンパイルするとしよう。
npm run development

すると、public/にCSSとJavascriptが生成されました。
・・・で？
\resources\views\layouts\guest.blade.php
に


とコードを追加した所、

CSSが適用されました！
って違うよねこれ？
@vite(['resources/css/app.css', 'resources/js/app.js'])

だけで動くはずなんだろうな・・・
もうちょっと調べますか・・・。
解決方法
https://nodejs.org/en/download
node最新版を入れます。
その後、
npm install
npm run dev

いやちょっとまてよこれLaravel-mixとVite混在してるな。
今回
npm run development

で書き出したものってLaravel-mix側のものを書き出してるわ。
基本的にpackage.jsonに書かれている方に合わせる方が無難ということでしたので
resources/views/layouts/app.blade.php の読み込み部分をLaravel-mix形式に書き換えるほうがいいそうです・・・
マジかー！
でもこの方法が一番正しいらしいです。
早速読み込み部分を書き換えていきましょう。
Laravel-mix形式に書き換え
resources/views/layouts/app.blade.phpを開きます。

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

↓
//コメントアウト
{{--        @vite(['resources/css/app.css', 'resources/js/app.js'])--}}
//追加
        
        

でいきましょう！
※この記事は追記の可能性があります。
共有:
Facebook
X
いいね:
いいね 読み込み中…

Related Posts


【自分用メモ】Laravel 7.30.4 新規開発時の準備でいつもやってることメモ
どんな記事？ 何度かLarav…


Laravel migrate でカラム名の変更
どんな記事？ Laravel …


PHP+MySQLを使うときにPDOで接続したりするんだって
PHP5.5以降はmysqlな…