フロントエンド
Laravel Mixとは
- Webpackを簡単に使えるようにしてくれるライブラリ。
- Laravel9.2からviteに変わったので、最新版ではLaravel Mixは使われない。
- Laravelインストール直後はpackage.jsonにaxiosやpostcssが記述されているのでsail npm installでそれらをインストールしsail npm run devでコンパイルを実行する。
匿名コンポーネント
- Laravel6まではBladeの継承機能を使っていたが、Laravel7からはコンポーネント機能が使えるようになった。
- resorces/views/componentsの中に作成したbladeファイルは匿名コンポーネントとして<x-xxx>で呼び出すことができる。
- componentsにディレクトリを作成した場合はドット区切りで指定する。
- 属性は文字列として渡される。
変数を渡したい場合は:title="$title"のように属性の前にコロンをつける。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
@vite(['resources/css/app.css', 'resources/js/app.js'])
<title>{{ $title ?? 'つぶやきアプリ' }}</title>
</head>
<body>
{{ $slot }}
</body>
</html><x-layout title="TOP | つぶやきアプリ">
<h1>つぶやきアプリ</h1>
@auth
〜以下省略〜
</x-layout>登録フォームのコンポーネント化
resources/views/tweet/index.blade.phpを以下のようにし、layout/single、tweet/form/post、tweet/list、のコンポーネントに分ける。
（各コンポーネントの記述はここでは省略）
<x-layout title="TOP | つぶやきアプリ">
<x-layout.single>
<h2 class="text-center text-blue-500 text-4xl font-bold mt-8 mb-8">
つぶやきアプリ
</h2>
<x-tweet.form.post></x-tweet.form.post>
<x-tweet.list :tweets="$tweets"></x-tweet.list>
</x-layout.single>
</x-layout>Tailwind CSS
- Laravel BreezeをインストールするとTailwind CSSもインストールされる。
- resorces/layoutsの中のファイルを見ると
@vite(['resources/css/app.css', 'resources/js/app.js'])がある。 - resources/css/app.cssは以下のようになっていて、Tailwind CSSが使えるようになっている。
@tailwind base;
@tailwind components;
@tailwind utilities; - テンプレート修正後は
npm run devでのコンパイルが必要。
スタック
@stack('css')
として@push
<style>h1 {color: red;}</style>
@endpush
とすると、@stack(‘css’)に@pushの内容が追記されていく。
コメント