バージョン: 12.x

Asset Bundling (Vite)

Introduction
Installation & Setup
Running Vite
Working With JavaScript
- Aliases
- Vue
- React
- Svelte
- Inertia
- URL Processing
Working With Stylesheets
Working With Blade and Routes
Asset Prefetching
Custom Base URLs
Environment Variables
Disabling Vite in Tests
Server-Side Rendering (SSR)
Script and Style Tag Attributes
Advanced Customization
- Dev Server Cross-Origin Resource Sharing (CORS)
- Correcting Dev Server URLs

Introduction

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

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

Installation & Setup

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

Installing Node

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

node -v
npm -v

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

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

Installing Vite and the Laravel Plugin

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

npm install

Configuring 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 entry points などの高度な構成オプションもサポートしています。

Working With a Secure Development Server

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

Laravel Herd を使用していてサイトを保護している場合、または Laravel Valet を使用していてアプリケーションに対して secure command を実行している場合、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 plugin をインストールして構成できます。信頼できない証明書を使用する場合は、npm run dev コマンドの実行時にコンソールの「ローカル」リンクをクリックして、ブラウザーで Vite 開発サーバーに対する証明書の警告を受け入れる必要があります。

Running the Development Server in Sail on WSL2

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 option の設定も必要になる場合があります。

Loading Your Scripts and Styles

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>

Inline Assets

場合によっては、アセットのバージョン管理された 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 で開発サーバーを実行している場合は、いくつかの additional configuration オプションが必要になる場合があります。

Working With JavaScript

Aliases

デフォルトでは、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

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

React

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 拡張子が付いていることを確認する必要があります。必要に応じて、エントリポイントを shown above として更新することを忘れないでください。

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

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

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

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

Svelte

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 の starter kits には、適切な 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 で使用している場合は、asset prefetching を設定することをお勧めします。

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

URL Processing

Vite を使用し、アプリケーションの HTML、CSS、または JS でアセットを参照する場合、考慮すべき注意事項がいくつかあります。まず、絶対パスでアセットを参照すると、Vite はビルドにアセットを含めません。したがって、アセットがパブリックディレクトリで利用可能であることを確認する必要があります。 dedicated CSS entrypoint を使用する場合は、絶対パスの使用を避ける必要があります。これは、開発中にブラウザがパブリックディレクトリからではなく、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 の starter kits には、適切な Tailwind と Vite 構成がすでに含まれています。または、スターターキットを使用せずに Tailwind と Laravel を使用したい場合は、Tailwind's installation guide for Laravel をチェックしてください。

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

composer run dev

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

Working With Blade and Routes

Processing Static Assets With 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') }}">

Refreshing on Save

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 }
            }],
        }),
    ],
});

Aliases

JavaScript アプリケーションでは、定期的に参照されるディレクトリに対して create aliases を行うのが一般的です。ただし、Illuminate\Support\Facades\Vite クラスの macro メソッドを使用して、Blade で使用するエイリアスを作成することもできます。通常、「マクロ」は service provider の 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 アセットを積極的にプリフェッチする機能を提供します。

service provider の 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();
}

デフォルトでは、page load event が起動するとプリフェッチが開始されます。プリフェッチの開始時期をカスタマイズしたい場合は、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>

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

absolute URLs are not re-written by Vite であるため、プレフィックスは付けられないことに注意してください。

Environment Variables

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

VITE_SENTRY_DSN_PUBLIC=http://example.com

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

import.meta.env.VITE_SENTRY_DSN_PUBLIC

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]
}

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

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

php artisan inertia:start-ssr

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

Script and Style Tag Attributes

Content Security Policy (CSP) Nonce

nonce attribute の一部としてスクリプトとスタイルタグに Content Security Policy を含めたい場合は、カスタム 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 directive に含まれる starter kits など、他の場所で nonce を指定する必要がある場合は、 cspNonce メソッドを使用して取得できます。

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

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

Vite::useCspNonce($nonce);

Subresource Integrity (SRI)

Vite マニフェストにアセットの integrity ハッシュが含まれている場合、Laravel は Subresource Integrity を強制するために、生成するスクリプトとスタイルタグに 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);

Arbitrary Attributes

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

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...
    },
});

Dev Server Cross-Origin Resource Sharing (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's comprehensive and flexible built-in CORS server configuration を使用する必要があります。たとえば、プロジェクトの 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]
});

Correcting Dev Server URLs

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​

Installing Node​

Installing Vite and the Laravel Plugin​

Configuring Vite​

Working With a Secure Development Server​

Running the Development Server in Sail on WSL2​

Loading Your Scripts and Styles​

Inline Assets​

Running Vite​

Working With JavaScript​

Aliases​

Vue​

React​

Svelte​

Inertia​

URL Processing​

Working With Stylesheets​

Working With Blade and Routes​

Processing Static Assets With Vite​

Refreshing on Save​

Aliases​

Asset Prefetching​

Custom Base URLs​

Environment Variables​

Disabling Vite in Tests​

Server-Side Rendering (SSR)​

Script and Style Tag Attributes​

Content Security Policy (CSP) Nonce​

Subresource Integrity (SRI)​

Arbitrary Attributes​

Advanced Customization​

Dev Server Cross-Origin Resource Sharing (CORS)​

Correcting Dev Server URLs​

Introduction

Installation & Setup

Installing Node

Installing Vite and the Laravel Plugin

Configuring Vite

Working With a Secure Development Server

Running the Development Server in Sail on WSL2

Loading Your Scripts and Styles

Inline Assets

Running Vite

Working With JavaScript

Aliases

Vue

React

Svelte

Inertia

URL Processing

Working With Stylesheets

Working With Blade and Routes

Processing Static Assets With Vite

Refreshing on Save

Aliases

Asset Prefetching

Custom Base URLs

Environment Variables

Disabling Vite in Tests

Server-Side Rendering (SSR)

Script and Style Tag Attributes

Content Security Policy (CSP) Nonce

Subresource Integrity (SRI)

Arbitrary Attributes

Advanced Customization

Dev Server Cross-Origin Resource Sharing (CORS)

Correcting Dev Server URLs