バージョン: master

アセットバンドル (Vite) (Asset Bundling (Vite))

Introduction
インストールとセットアップ
ランニングバイト
JavaScript の操作
- Aliases
- Vue
- React
- Svelte
- Inertia
- URL処理
スタイルシートの操作
Bladeとルートの操作
アセットのプリフェッチ
カスタムベースURL
環境変数
テストでの Vite の無効化
サーバーサイドレンダリング (SSR)
スクリプトおよびスタイルタグの属性
高度なカスタマイズ
- 開発サーバーのクロスオリジンリソース共有 (CORS)
- 開発サーバーの URL の修正

導入 (Introduction)

Vite は、非常に高速な開発環境を提供し、実稼働用のコードをバンドルする最新のフロントエンドビルドツールです。 Laravel でアプリケーションを構築する場合、通常は Vite を使用して、アプリケーションの CSS ファイルと JavaScript ファイルを実稼働可能なアセットにバンドルします。

Laravel は、開発および本番用にアセットをロードするための公式プラグインと Blade ディレクティブを提供することで、Vite とシームレスに統合します。

インストールとセットアップ (Installation & Setup)

次のドキュメントでは、Laravel Vite プラグインを手動でインストールして構成する方法について説明します。ただし、Laravel のスターターキットにはこのスキャフォールディングがすべて含まれており、Laravel と Vite を始めるための最速の方法です。

ノードのインストール

Vite と Laravel プラグインを実行する前に、Node.js (16+) と NPM がインストールされていることを確認する必要があります。

node -v
npm -v

ノードの公式ウェブサイトのシンプルなグラフィカルインストーラーを使用して、Node と NPM の最新バージョンを簡単にインストールできます。または、Laravel Sail を使用している場合は、Sail を通じて Node と NPM を呼び出すことができます。

./vendor/bin/sail node -v
./vendor/bin/sail npm -v

Vite と Laravel プラグインのインストール

Laravel を新規インストールすると、アプリケーションのディレクトリ構造のルートに package.json ファイルが見つかります。デフォルトの package.json ファイルには、Vite と Laravel プラグインの使用を開始するために必要なものがすべて含まれています。 NPM 経由でアプリケーションのフロントエンド依存関係をインストールできます。

npm install

Viteの設定

Vite は、プロジェクトのルートにある vite.config.js ファイルを介して設定されます。このファイルはニーズに基づいて自由にカスタマイズでき、アプリケーションに必要な他のプラグイン (@vitejs/plugin-react、@sveltejs/vite-plugin-svelte、@vitejs/plugin-vue など) をインストールすることもできます。

Laravel Vite プラグインでは、アプリケーションのエントリポイントを指定する必要があります。これらは JavaScript または CSS ファイルであり、TypeScript、JSX、TSX、Sass などの前処理された言語が含まれます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Inertia を使用して構築されたアプリケーションを含む SPA を構築している場合、Vite は CSS エントリポイントなしで最適に動作します。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css', // [tl! remove]
            'resources/js/app.js',
        ]),
    ],
});

代わりに、JavaScript 経由で CSS をインポートする必要があります。通常、これはアプリケーションの resources/js/app.js ファイルで行われます。

import './bootstrap';
import '../css/app.css'; // [tl! add]

Laravel プラグインは、複数のエントリポイントと SSRエントリーポイントなどの高度な構成オプションもサポートしています。

安全な開発サーバーの使用

ローカル開発 Web サーバーが HTTPS 経由でアプリケーションを提供している場合、Vite 開発サーバーへの接続で問題が発生する可能性があります。

LaravelのHerd を使用していてサイトを保護している場合、または Laravel Valet を使用していてアプリケーションに対して安全なコマンドを実行している場合、Laravel Vite プラグインは生成された TLS 証明書を自動的に検出して使用します。

アプリケーションのディレクトリ名と一致しないホストを使用してサイトを保護した場合は、アプリケーションの vite.config.js ファイルでホストを手動で指定できます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            // ...
            detectTls: 'my-app.test', // [tl! add]
        }),
    ],
});

別の Web サーバーを使用する場合は、信頼できる証明書を生成し、生成された証明書を使用するように Vite を手動で設定する必要があります。

// ...
import fs from 'fs'; // [tl! add]

const host = 'my-app.test'; // [tl! add]

export default defineConfig({
    // ...
    server: { // [tl! add]
        host, // [tl! add]
        hmr: { host }, // [tl! add]
        https: { // [tl! add]
            key: fs.readFileSync(`/path/to/${host}.key`), // [tl! add]
            cert: fs.readFileSync(`/path/to/${host}.crt`), // [tl! add]
        }, // [tl! add]
    }, // [tl! add]
});

システムの信頼できる証明書を生成できない場合は、@vitejs/plugin-basic-ssl プラグインをインストールして構成できます。信頼できない証明書を使用する場合は、npm run dev コマンドの実行時にコンソールの「ローカル」リンクをクリックして、ブラウザーで Vite 開発サーバーに対する証明書の警告を受け入れる必要があります。

WSL2 上の Sail で開発サーバーを実行する

Windows Subsystem for Linux 2 (WSL2) 上の Laravel Sail 内で Vite 開発サーバーを実行する場合は、ブラウザが開発サーバーと通信できるように、次の構成を vite.config.js ファイルに追加する必要があります。

// ...

export default defineConfig({
    // ...
    server: { // [tl! add:start]
        hmr: {
            host: 'localhost',
        },
    }, // [tl! add:end]
});

開発サーバーの実行中にファイルの変更がブラウザに反映されない場合は、Vite の server.watch.usePolling オプションの設定も必要になる場合があります。

スクリプトとスタイルをロードする

Vite エントリポイントを設定したら、アプリケーションのルートテンプレートの <head> に追加する @vite() Blade ディレクティブでエントリポイントを参照できるようになります。

<!DOCTYPE html>
<head>
    {{-- ... --}}

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

JavaScript 経由で CSS をインポートする場合、含める必要があるのは JavaScript エントリポイントのみです。

<!DOCTYPE html>
<head>
    {{-- ... --}}

    @vite('resources/js/app.js')
</head>

@vite ディレクティブは、Vite 開発サーバーを自動的に検出し、Vite クライアントを挿入してホットモジュール交換を有効にします。ビルドモードでは、ディレクティブは、インポートされた CSS を含む、コンパイルおよびバージョン管理されたアセットを読み込みます。

必要に応じて、@vite ディレクティブを呼び出すときに、コンパイルされたアセットのビルドパスを指定することもできます。

<!doctype html>
<head>
    {{-- Given build path is relative to public path. --}}

    @vite('resources/js/app.js', 'vendor/courier/build')
</head>

インラインアセット

場合によっては、アセットのバージョン管理された URL にリンクするのではなく、アセットの生のコンテンツを含める必要がある場合があります。たとえば、HTML コンテンツを PDF ジェネレーターに渡すときに、アセットコンテンツをページに直接含める必要がある場合があります。 Vite ファサードによって提供される content メソッドを使用して、Vite アセットのコンテンツを出力できます。

@use('Illuminate\Support\Facades\Vite')

<!doctype html>
<head>
    {{-- ... --}}

    <style>
        {!! Vite::content('resources/css/app.css') !!}
    </style>
    <script>
        {!! Vite::content('resources/js/app.js') !!}
    </script>
</head>

ランニングバイト (Running Vite)

Vite を実行するには 2 つの方法があります。 dev コマンドを使用して開発サーバーを実行できます。これは、ローカルで開発する場合に便利です。開発サーバーはファイルへの変更を自動的に検出し、開いているブラウザウィンドウに即座に変更を反映します。

または、build コマンドを実行すると、アプリケーションのアセットがバージョン管理されてバンドルされ、運用環境にデプロイできるようになります。

# Run the Vite development server...
npm run dev

# Build and version the assets for production...
npm run build

WSL2 上の Sail で開発サーバーを実行している場合は、いくつかの追加構成オプションが必要になる場合があります。

JavaScript の操作 (Working With JavaScript)

別名

デフォルトでは、Laravel プラグインは、すぐに作業を開始し、アプリケーションのアセットを簡単にインポートできるようにするための共通のエイリアスを提供します。

{
    '@' => '/resources/js'
}

独自のエイリアスを vite.config.js 構成ファイルに追加することで、'@' エイリアスを上書きできます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel(['resources/ts/app.tsx']),
    ],
    resolve: {
        alias: {
            '@': '/resources/ts',
        },
    },
});

ヴュー

Vue フレームワークを使用してフロントエンドを構築したい場合は、@vitejs/plugin-vue プラグインもインストールする必要があります。

npm install --save-dev @vitejs/plugin-vue

その後、vite.config.js 構成ファイルにプラグインを含めることができます。 Laravel で Vue プラグインを使用する場合、必要となる追加オプションがいくつかあります。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js']),
        vue({
            template: {
                transformAssetUrls: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,

                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directory as expected.
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Laravel のスターターキットには、適切な Laravel、Vue、および Vite 構成がすでに含まれています。これらのスターターキットは、Laravel、Vue、および Vite を始めるための最速の方法を提供します。

反応する

React フレームワークを使用してフロントエンドを構築したい場合は、@vitejs/plugin-react プラグインもインストールする必要があります。

npm install --save-dev @vitejs/plugin-react

次に、vite.config.js 構成ファイルにプラグインを含めることができます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel(['resources/js/app.jsx']),
        react(),
    ],
});

JSX を含むすべてのファイルに .jsx または .tsx 拡張子が付いていることを確認する必要があります。必要に応じて、エントリポイントを上に示したとして更新することを忘れないでください。

既存の @vite ディレクティブと一緒に、追加の @viteReactRefresh Blade ディレクティブを含める必要もあります。

@viteReactRefresh
@vite('resources/js/app.jsx')

@viteReactRefresh ディレクティブは、@vite ディレクティブの前に呼び出す必要があります。

Laravel のスターターキットには、適切な Laravel、React、および Vite 構成がすでに含まれています。これらのスターターキットは、Laravel、React、および Vite を始めるための最速の方法を提供します。

スレンダー

Svelte フレームワークを使用してフロントエンドを構築したい場合は、@sveltejs/vite-plugin-svelte プラグインもインストールする必要があります。

npm install --save-dev @sveltejs/vite-plugin-svelte

その後、vite.config.js 構成ファイルにプラグインを含めることができます。

import { svelte } from '@sveltejs/vite-plugin-svelte';
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.ts'],
      ssr: 'resources/js/ssr.ts',
      refresh: true,
    }),
    svelte(),
  ],
});

Laravel のスターターキットには、適切な Laravel、Svelte、および Vite 構成がすでに含まれています。これらのスターターキットは、Laravel、Svelte、および Vite を始めるための最速の方法を提供します。

Inertia

Laravel Vite プラグインは、Inertia ページコンポーネントの解決に役立つ便利な resolvePageComponent 関数を提供します。以下は、Vue 3 で使用されるヘルパの例です。ただし、この関数は React や Svelte などの他のフレームワークでも利用できます。

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
});

Vite のコード分割機能を Inertia で使用している場合は、アセットのプリフェッチを設定することをお勧めします。

Laravel のスターターキットには、適切な Laravel、Inertia、および Vite 構成がすでに含まれています。これらのスターターキットは、Laravel、Inertia、および Vite を始めるための最速の方法を提供します。

URL処理

Vite を使用し、アプリケーションの HTML、CSS、または JS でアセットを参照する場合、考慮すべき注意事項がいくつかあります。まず、絶対パスでアセットを参照すると、Vite はビルドにアセットを含めません。したがって、アセットがパブリックディレクトリで利用可能であることを確認する必要があります。専用の CSS エントリポイントを使用する場合は、絶対パスの使用を避ける必要があります。これは、開発中にブラウザがパブリックディレクトリからではなく、CSS がホストされている Vite 開発サーバーからこれらのパスをロードしようとするためです。

相対アセットパスを参照する場合、パスは参照先のファイルからの相対パスであることに注意してください。相対パス経由で参照されるアセットはすべて、Vite によって書き換えられ、バージョン管理され、バンドルされます。

次のプロジェクト構造を考えてみましょう。

public/
  taylor.png
resources/
  js/
    Pages/
      Welcome.vue
  images/
    abigail.png

次の例は、Vite が相対 URL と絶対 URL をどのように扱うかを示しています。

<!-- This asset is not handled by Vite and will not be included in the build -->
<img src="/taylor.png">

<!-- This asset will be re-written, versioned, and bundled by Vite -->
<img src="../../images/abigail.png">

スタイルシートの操作 (Working With Stylesheets)

Laravel のスターターキットには、適切な Tailwind と Vite 構成がすでに含まれています。または、スターターキットを使用せずに Tailwind と Laravel を使用したい場合は、Tailwind の Laravel インストールガイドをチェックしてください。

すべての Laravel アプリケーションには、Tailwind と適切に構成された vite.config.js ファイルがすでに含まれています。したがって、Vite 開発サーバーを起動するか、Laravel 開発サーバーと Vite 開発サーバーの両方を起動する dev Composer コマンドを実行するだけで済みます。

composer run dev

アプリケーションの CSS は、resources/css/app.css ファイル内に配置される場合があります。

Bladeとルートの操作 (Working With Blade and Routes)

Vite を使用した静的アセットの処理

JavaScript または CSS でアセットを参照すると、Vite はそれらを自動的に処理してバージョン付けします。さらに、Blade ベースのアプリケーションを構築する場合、Vite は Blade テンプレート内でのみ参照する静的アセットを処理およびバージョン管理することもできます。

ただし、これを実現するには、静的アセットをアプリケーションのエントリポイントにインポートして、Vite にアセットを認識させる必要があります。たとえば、resources/images に保存されているすべての画像と resources/fonts に保存されているすべてのフォントを処理してバージョン管理する場合は、アプリケーションの resources/js/app.js エントリポイントに次の行を追加する必要があります。

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

これらのアセットは、npm run build の実行時に Vite によって処理されるようになります。その後、Vite::asset メソッドを使用してBlade テンプレートでこれらのアセットを参照できます。これにより、特定のアセットのバージョン管理された URL が返されます。

<img src="{{ Vite::asset('resources/images/logo.png') }}">

保存時に更新中

Blade を使用した従来のサーバー側レンダリングを使用してアプリケーションが構築されている場合、Vite はアプリケーション内のファイルを表示するために変更を加えたときにブラウザを自動的に更新することで、開発ワークフローを改善できます。まず、refresh オプションを true として指定するだけです。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: true,
        }),
    ],
});

refresh オプションが true の場合、次のディレクトリにファイルを保存すると、npm run dev の実行中にブラウザがページ全体の更新を実行します。

app/Livewire/**
app/View/Components/**
lang/**
resources/lang/**
resources/views/**
routes/**

routes/** ディレクトリを監視すると、アプリケーションのフロントエンド内でルートリンクを生成するために Ziggy を利用している場合に役立ちます。

これらのデフォルトのパスがニーズに合わない場合は、監視するパスの独自のリストを指定できます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: ['resources/views/**'],
        }),
    ],
});

Laravel Vite プラグインは内部で vite-plugin-full-reload パッケージを使用し、この機能の動作を微調整するための高度な構成オプションを提供します。このレベルのカスタマイズが必要な場合は、config 定義を指定できます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: [{
                paths: ['path/to/watch/**'],
                config: { delay: 300 }
            }],
        }),
    ],
});

別名

JavaScript アプリケーションでは、定期的に参照されるディレクトリに対してエイリアスを作成するを行うのが一般的です。ただし、Illuminate\Support\Facades\Vite クラスの macro メソッドを使用して、Blade で使用するエイリアスを作成することもできます。通常、「マクロ」はサービスプロバイダの boot メソッド内で定義する必要があります。

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Vite::macro('image', fn (string $asset) => $this->asset("resources/images/{$asset}"));
}

マクロを定義すると、テンプレート内でマクロを呼び出すことができます。たとえば、上で定義した image マクロを使用して、resources/images/logo.png にあるアセットを参照できます。

<img src="{{ Vite::image('logo.png') }}" alt="Laravel Logo">

アセットのプリフェッチ (Asset Prefetching)

Vite のコード分割機能を使用して SPA を構築すると、必要なアセットが各ページナビゲーションでフェッチされます。この動作により、UI レンダリングの遅延が発生する可能性があります。これが、選択したフロントエンドフレームワークにとって問題である場合、Laravel は、最初のページ読み込み時にアプリケーションの JavaScript および CSS アセットを積極的にプリフェッチする機能を提供します。

サービスプロバイダの boot メソッドで Vite::prefetch メソッドを呼び出すことで、Laravel にアセットを積極的にプリフェッチするように指示できます。

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Vite;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // ...
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Vite::prefetch(concurrency: 3);
    }
}

上の例では、ページの読み込みごとに最大 3 の同時ダウンロードでアセットがプリフェッチされます。アプリケーションのニーズに合わせて同時実行数を変更したり、アプリケーションがすべてのアセットを一度にダウンロードする必要がある場合は同時実行数の制限を指定したりできません。

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Vite::prefetch();
}

デフォルトでは、ページ_load_イベントが起動するとプリフェッチが開始されます。プリフェッチの開始時期をカスタマイズしたい場合は、Vite がリッスンするイベントを指定できます。

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Vite::prefetch(event: 'vite:prefetch');
}

上記のコードを考慮すると、window オブジェクトで vite:prefetch イベントを手動で送出すると、プリフェッチが開始されます。たとえば、ページが読み込まれてから 3 秒後にプリフェッチを開始することができます。

<script>
    addEventListener('load', () => setTimeout(() => {
        dispatchEvent(new Event('vite:prefetch'))
    }, 3000))
</script>

カスタムベースURL (Custom Base URLs)

Vite コンパイル済みアセットが CDN 経由など、アプリケーションとは別のドメインにデプロイされている場合は、アプリケーションの .env ファイル内で ASSET_URL 環境変数を指定する必要があります。

ASSET_URL=https://cdn.example.com

アセット URL を構成すると、アセットへのすべての書き換えられた URL には、構成された値がプレフィックスとして付加されます。

https://cdn.example.com/build/assets/app.9dce8d17.js

絶対 URL は Vite によって書き換えられませんであるため、プレフィックスは付けられないことに注意してください。

環境変数 (Environment Variables)

アプリケーションの .env ファイル内で環境変数に VITE_ というプレフィックスを付けることで、JavaScript に環境変数を挿入できます。

VITE_SENTRY_DSN_PUBLIC=http://example.com

挿入された環境変数には、import.meta.env オブジェクト経由でアクセスできます。

import.meta.env.VITE_SENTRY_DSN_PUBLIC

テストでの Vite の無効化 (Disabling Vite in Tests)

Laravel の Vite 統合では、テストの実行中にアセットの解決が試行されるため、Vite 開発サーバーを実行するか、アセットを構築する必要があります。

テスト中に Vite をモックしたい場合は、Laravel の TestCase クラスを拡張するあらゆるテストで使用できる withoutVite メソッドを呼び出すことができます。

test('without vite example', function () {
    $this->withoutVite();

    // ...
});

use Tests\TestCase;

class ExampleTest extends TestCase
{
    public function test_without_vite_example(): void
    {
        $this->withoutVite();

        // ...
    }
}

すべてのテストで Vite を無効にしたい場合は、基本 TestCase クラスの setUp メソッドから withoutVite メソッドを呼び出すことができます。

<?php

namespace Tests;

use Illuminate\Foundation\Testing\TestCase as BaseTestCase;

abstract class TestCase extends BaseTestCase
{
    protected function setUp(): void// [tl! add:start]
    {
        parent::setUp();

        $this->withoutVite();
    }// [tl! add:end]
}

サーバーサイドレンダリング (SSR) (Server-Side Rendering (SSR))

Laravel Vite プラグインを使用すると、Vite でのサーバー側レンダリングのセットアップが簡単になります。まず、resources/js/ssr.js で SSR エントリポイントを作成し、構成オプションを Laravel プラグインに渡してエントリポイントを指定します。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
        }),
    ],
});

SSR エントリポイントの再構築を忘れないようにするために、アプリケーションの package.json の「ビルド」スクリプトを拡張して SSR ビルドを作成することをお勧めします。

"scripts": {
     "dev": "vite",
     "build": "vite build" // [tl! remove]
     "build": "vite build && vite build --ssr" // [tl! add]
}

次に、SSR サーバーを構築して起動するには、次のコマンドを実行します。

npm run build
node bootstrap/ssr/ssr.js

Inertia付きSSR を使用している場合は、代わりに inertia:start-ssr Artisan コマンドを使用して SSR サーバーを起動できます。

php artisan inertia:start-ssr

Laravel のスターターキットには、適切な Laravel、Inertia SSR、および Vite 構成がすでに含まれています。これらのスターターキットは、Laravel、Inertia SSR、および Vite を始めるための最速の方法を提供します。

スクリプトおよびスタイルタグの属性 (Script and Style Tag Attributes)

コンテンツセキュリティポリシー (CSP) ナンス

コンテンツセキュリティポリシーの一部としてスクリプトとスタイルタグにノンス属性を含めたい場合は、カスタム middleware 内で useCspNonce メソッドを使用してノンスを生成または指定できます。

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Vite;
use Symfony\Component\HttpFoundation\Response;

class AddContentSecurityPolicyHeaders
{
    /**
     * Handle an incoming request.
     *
     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        Vite::useCspNonce();

        return $next($request)->withHeaders([
            'Content-Security-Policy' => "script-src 'nonce-".Vite::cspNonce()."'",
        ]);
    }
}

useCspNonce メソッドを呼び出した後、Laravel は生成されたすべてのスクリプトタグとスタイルタグに nonce 属性を自動的に含めます。

Laravel のスターターキットに含まれる Ziggy @route ディレクティブなど、他の場所で nonce を指定する必要がある場合は、 cspNonce メソッドを使用して取得できます。

@routes(nonce: Vite::cspNonce())

Laravel に使用するように指示したい nonce がすでにある場合は、その nonce を useCspNonce メソッドに渡すことができます。

Vite::useCspNonce($nonce);

サブリソースの整合性 (SRI)

Vite マニフェストにアセットの integrity ハッシュが含まれている場合、Laravel はサブリソースの整合性を強制するために、生成するスクリプトとスタイルタグに integrity 属性を自動的に追加します。デフォルトでは、Vite のマニフェストには integrity ハッシュが含まれていませんが、vite-plugin-manifest-sri NPM プラグインをインストールすることで有効にすることができます。

npm install --save-dev vite-plugin-manifest-sri

その後、vite.config.js ファイルでこのプラグインを有効にすることができます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import manifestSRI from 'vite-plugin-manifest-sri';// [tl! add]

export default defineConfig({
    plugins: [
        laravel({
            // ...
        }),
        manifestSRI(),// [tl! add]
    ],
});

必要に応じて、整合性ハッシュが見つかるマニフェストキーをカスタマイズすることもできます。

use Illuminate\Support\Facades\Vite;

Vite::useIntegrityKey('custom-integrity-key');

この自動検出を完全に無効にしたい場合は、false を useIntegrityKey メソッドに渡します。

Vite::useIntegrityKey(false);

任意の属性

スクリプトおよびスタイルタグに data-turbo-track 属性などの追加の属性を含める必要がある場合は、useScriptTagAttributes および useStyleTagAttributes メソッドを使用して指定できます。通常、このメソッドはサービスプロバイダから呼び出す必要があります。

use Illuminate\Support\Facades\Vite;

Vite::useScriptTagAttributes([
    'data-turbo-track' => 'reload', // Specify a value for the attribute...
    'async' => true, // Specify an attribute without a value...
    'integrity' => false, // Exclude an attribute that would otherwise be included...
]);

Vite::useStyleTagAttributes([
    'data-turbo-track' => 'reload',
]);

条件付きで属性を追加する必要がある場合は、アセットのソースパス、その URL、そのマニフェストチャンク、およびマニフェスト全体を受け取るコールバックを渡すことができます。

use Illuminate\Support\Facades\Vite;

Vite::useScriptTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
    'data-turbo-track' => $src === 'resources/js/app.js' ? 'reload' : false,
]);

Vite::useStyleTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
    'data-turbo-track' => $chunk && $chunk['isEntry'] ? 'reload' : false,
]);

Vite 開発サーバーの実行中、$chunk および $manifest 引数は null になります。

高度なカスタマイズ (Advanced Customization)

Laravel の Vite プラグインは、そのままの状態で、ほとんどのアプリケーションで機能する賢明な規則を使用しています。ただし、Vite の動作をカスタマイズする必要がある場合があります。追加のカスタマイズオプションを有効にするために、@vite Blade ディレクティブの代わりに使用できる次のメソッドとオプションが提供されています。

<!doctype html>
<head>
    {{-- ... --}}

    {{
        Vite::useHotFile(storage_path('vite.hot')) // Customize the "hot" file...
            ->useBuildDirectory('bundle') // Customize the build directory...
            ->useManifestFilename('assets.json') // Customize the manifest filename...
            ->withEntryPoints(['resources/js/app.js']) // Specify the entry points...
            ->createAssetPathsUsing(function (string $path, ?bool $secure) { // Customize the backend path generation for built assets...
                return "https://cdn.example.com/{$path}";
            })
    }}
</head>

vite.config.js ファイル内で、同じ構成を指定する必要があります。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'storage/vite.hot', // Customize the "hot" file...
            buildDirectory: 'bundle', // Customize the build directory...
            input: ['resources/js/app.js'], // Specify the entry points...
        }),
    ],
    build: {
      manifest: 'assets.json', // Customize the manifest filename...
    },
});

開発サーバーのクロスオリジンリソース共有 (CORS)

Vite 開発サーバーからアセットを取得しているときにブラウザでクロスオリジンリソース共有 (CORS) の問題が発生した場合は、開発サーバーへのカスタムオリジンアクセスを許可する必要がある場合があります。 Vite を Laravel プラグインと組み合わせると、追加の設定なしで次のオリジンが可能になります。

::1
127.0.0.1
localhost
*.test
*.localhost
プロジェクトの .env 内の APP_URL

プロジェクトにカスタムオリジンを許可する最も簡単な方法は、アプリケーションの APP_URL 環境変数がブラウザでアクセスしているオリジンと一致していることを確認することです。たとえば、https://my-app.laravel にアクセスした場合は、次と一致するように .env を更新する必要があります。

APP_URL=https://my-app.laravel

複数のオリジンのサポートなど、オリジンをさらにきめ細かく制御する必要がある場合は、Vite の包括的かつ柔軟な組み込み CORS サーバー構成を使用する必要があります。たとえば、プロジェクトの vite.config.js ファイルの server.cors.origin 構成オプションで複数の起点を指定できます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
    ],
    server: {  // [tl! add]
        cors: {  // [tl! add]
            origin: [  // [tl! add]
                'https://backend.laravel',  // [tl! add]
                'http://admin.laravel:8566',  // [tl! add]
            ],  // [tl! add]
        },  // [tl! add]
    },  // [tl! add]
});

正規表現パターンを含めることもできます。これは、*.laravel など、特定のトップレベルドメインのすべてのオリジンを許可する場合に役立ちます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
    ],
    server: {  // [tl! add]
        cors: {  // [tl! add]
            origin: [ // [tl! add]
                // Supports: SCHEME://DOMAIN.laravel[:PORT] [tl! add]
                /^https?:\/\/.*\.laravel(:\d+)?$/, //[tl! add]
            ], // [tl! add]
        }, // [tl! add]
    }, // [tl! add]
});

開発サーバーの URL の修正

Vite エコシステム内の一部のプラグインは、スラッシュで始まる URL が常に Vite dev サーバーを指すことを前提としています。ただし、Laravel 統合の性質により、これは当てはまりません。

たとえば、vite-imagetools プラグインは、Vite がアセットを提供しているときに次のような URL を出力します。

<img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">

vite-imagetools プラグインは、出力 URL が Vite によってインターセプトされることを予期しており、プラグインは /@imagetools で始まるすべての URL を処理する可能性があります。この動作を想定しているプラグインを使用している場合は、URL を手動で修正する必要があります。これは、transformOnServe オプションを使用して、vite.config.js ファイルで行うことができます。

この特定の例では、生成されたコード内のすべての /@imagetools の先頭に開発サーバー URL を追加します。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { imagetools } from 'vite-imagetools';

export default defineConfig({
    plugins: [
        laravel({
            // ...
            transformOnServe: (code, devServerUrl) => code.replaceAll('/@imagetools', devServerUrl+'/@imagetools'),
        }),
        imagetools(),
    ],
});

これで、Vite がアセットを提供している間、Vite 開発サーバーを指す URL が出力されます。

- <img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520"><!-- [tl! remove] -->
+ <img src="http://[::1]:5173/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520"><!-- [tl! add] -->

導入 (Introduction)​

インストールとセットアップ (Installation & Setup)​

ノードのインストール​

Vite と Laravel プラグインのインストール​

Viteの設定​

安全な開発サーバーの使用​

WSL2 上の Sail で開発サーバーを実行する​

スクリプトとスタイルをロードする​

インラインアセット​

ランニングバイト (Running Vite)​

JavaScript の操作 (Working With JavaScript)​

別名​

ヴュー​

反応する​

スレンダー​

Inertia​

URL処理​

スタイルシートの操作 (Working With Stylesheets)​

Bladeとルートの操作 (Working With Blade and Routes)​

Vite を使用した静的アセットの処理​

保存時に更新中​

別名​

アセットのプリフェッチ (Asset Prefetching)​

カスタムベースURL (Custom Base URLs)​

環境変数 (Environment Variables)​

テストでの Vite の無効化 (Disabling Vite in Tests)​

サーバーサイド レンダリング (SSR) (Server-Side Rendering (SSR))​

スクリプトおよびスタイルタグの属性 (Script and Style Tag Attributes)​

コンテンツ セキュリティ ポリシー (CSP) ナンス​

サブリソースの整合性 (SRI)​

任意の属性​

高度なカスタマイズ (Advanced Customization)​

開発サーバーのクロスオリジンリソース共有 (CORS)​

開発サーバーの URL の修正​

導入 (Introduction)

インストールとセットアップ (Installation & Setup)

ノードのインストール

Vite と Laravel プラグインのインストール

Viteの設定

安全な開発サーバーの使用

WSL2 上の Sail で開発サーバーを実行する

スクリプトとスタイルをロードする

インラインアセット

ランニングバイト (Running Vite)

JavaScript の操作 (Working With JavaScript)

別名

ヴュー

反応する

スレンダー

Inertia

URL処理

スタイルシートの操作 (Working With Stylesheets)

Bladeとルートの操作 (Working With Blade and Routes)

Vite を使用した静的アセットの処理

保存時に更新中

別名

アセットのプリフェッチ (Asset Prefetching)

カスタムベースURL (Custom Base URLs)

環境変数 (Environment Variables)

テストでの Vite の無効化 (Disabling Vite in Tests)

サーバーサイドレンダリング (SSR) (Server-Side Rendering (SSR))

スクリプトおよびスタイルタグの属性 (Script and Style Tag Attributes)

コンテンツセキュリティポリシー (CSP) ナンス

サブリソースの整合性 (SRI)

任意の属性

高度なカスタマイズ (Advanced Customization)

開発サーバーのクロスオリジンリソース共有 (CORS)

開発サーバーの URL の修正