方法 1: @stack / @push（推奨）

同じプレースホルダに複数箇所から追加できる「stack」を使う方法。

レイアウト側

    

    
    

    
    @stack('styles')


    @yield('content')

    
    

    
    @stack('scripts')

個別ページ側

@extends('layouts.app')

@section('title', 'ユーザー一覧')

@push('styles')
    
    
@endpush

@section('content')
    
ユーザー一覧
    

        @foreach ($users as $user)
            
{{ $user->name }}
        @endforeach
    
@endsection

@push('scripts')
    
    
@endpush

方法 2: @section / @yield

1 箇所からの挿入のみ (上書き) で十分なケース。

    
    @yield('styles')


    @yield('content')
    
    @yield('scripts')



@extends('layouts.app')

@section('styles')
    
@endsection

@section('content')
    ...
@endsection

@section('scripts')
    
@endsection

@push vs @section の使い分け

@once で重複防止

パーシャル (含めるパーツ) を複数回 include しても、CSS / JS は 1 回だけ読み込みたい:

@once
    @push('styles')
        
    @endpush
    @push('scripts')
        
    @endpush
@endonce




@include('partials.datepicker')
@include('partials.datepicker')
@include('partials.datepicker')

@prepend (先頭に追加)

後から追加するけど stack の先頭に置きたい（jQuery より先に Polyfill 等）:

@prepend('scripts')
    
@endprepend

Vite との統合

Laravel 10+ はデフォルトで Vite を使う:

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


    @yield('content')
    @stack('scripts')



@push('styles')
    @vite(['resources/css/users.css'])
@endpush

@push('scripts')
    @vite(['resources/js/users.js'])
@endpush

# Vite が hot reload + バンドル + cache busting を自動化

条件付き読み込み

@push('scripts')
    @if (auth()->check())
        
    @endif

    @env('production')
        
    @endenv

    @if (config('app.feature.chat'))
        
    @endif
@endpush

パフォーマンスの考慮

• defer / async: @endpush @push('styles') @endpush

  関連記事

  • ヘッダー/フッターの共通コンポーネント
  • aリンクの貼り方と動的URLの作成
  編集

  ページ

  ページを更新

  ページの作成 ページを削除

  テンプレート

  テンプレートを作成

  テンプレートを更新

  テーマ設定

  テーマ設定

  閉じる

  ページの作成

  親となるページを選択してください。

  ページは必ず何かしらの親ページに紐づきます。
  親ページに紐づくページを子ページといいます。
  例： 親=スポーツ, 子1=サッカー, 子2=野球
  
  子ページを親ページとして更に子ページを作成することも可能です。
  例： 親=サッカー, 子=サッカーのルール
  
  親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

  閉じる

  テンプレート

  • コード＋ヘッダ
  • コード

  新規作成

  閉じる
  Post Share
  子ページ

  子ページはありません

  同階層のページ

  1. 親ビューと子ビュー(@section, @yield, @extends, @parent, @include)
  2. 条件分岐(@if)
  3. 繰り返し(@for, @foreach, @forelse, @while)
  4. 個別のページにcssやjsを反映させる方法