LravelにJSを入れたのだが、定義の仕方を忘れそうなのでメモしておく
今回DLしたSwiperはいくつかのページでしか使わないので、ページ単体用に定義をしていく。
Table of Contents
Swiperファイルを作成
まずはSwiperファイルを作成する。
// resources/js/swiper.js
import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';
document.addEventListener('DOMContentLoaded', () => {
new Swiper('.swiper', {
loop: true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});appテンプレートに@stack記載
{{--省略 --}}
@stack('scripts') {{-- ページごとにJSを「追加」できる記述（homeに追加したいスクリプト明記） --}}
</body>@stack('scripts') によって Vite 経由でページ限定JS（次の章参照）を注入
ページ（home.blade.php）で使いたいJSだけを pushする
@push('scripts'){{-- app.bladeの@stack('scripts')に使いたいJSを pushできる --}}
@vite('resources/js/swiper.js')
@endpush
<x-app-layout>
{{--省略 --}}これにより、レイアウトファイル側（app.blade.php）の @stack('scripts') に自動的に挿入され、最終的に Vite 経由でビルドされたJSが <script type="module" ...> として読み込まれる。
つまり、home.bladeの中だけでswiperを使えるようになる。
homeの中にいつも通りHTMLを書く。
ここまで来れば、いつも通り記述すればOKだ。
<x-app-layout>
{{-- swiper テストコード --}}
<div class="swiper w-full max-w-lg h-64 mx-auto bg-gray-100">
<div class="swiper-wrapper">
<div class="swiper-slide flex items-center justify-center bg-red-300 text-white text-xl font-bold">
Slide 1
</div>
<div class="swiper-slide flex items-center justify-center bg-green-300 text-white text-xl font-bold">
Slide 2
</div>
<div class="swiper-slide flex items-center justify-center bg-blue-300 text-white text-xl font-bold">
Slide 3
</div>
</div>
<!-- オプションのページネーションやナビボタン -->
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</x-app-layout>自分の環境では動いたので、これで開発が進められそうだ。
ちなみに、JSプラグインをUbuntuでインストールするときにエラーが出た場合は、下記を参照すればOK。