Laravelのインストール

下記コマンドでLaravelをインストール。
今回はバージョン9.19がインストールされました。

$ composer create-project --prefer-dist laravel/laravel vite-test
cd vite-test

package.jsonを開いてviteが含まれていることを確認しましょう。

package.json
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.6.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.0.0"
    }
}

確認できたらモジュールをインストール

$ yarn

動作確認

何も設定していない状態で動作確認してみましょう。

app.jsを次のように書き換えます。
これはidがappの要素にテキストを表示する簡単なプログラムです。

resources/js/app.js
document.getElementById('app').textContent = 'Hello Vite !';

初期表示されるビューファイルであるwelcome.blade.phpも編集します。
idがappの要素を追加したことと@viteディレクティブを使用してアセットパスを指定しています。
publicの出力先パスではなく、ビルド前のパスになるので注意してください。

resources/views/welcome.blade.php
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Viteの開発サーバーを起動します。

$ yarn run dev

Laravelも動かすようにする必要があります。
今回はビルドインサーバーを使用します。

$ php artisan serv

http://localhost:8000にアクセスして「Hello Vite !」が表示されていることを確認してください。

TypeScriptを使う

次はTypeScriptを扱えるようにしてみます。
先ほど作成たapp.jsファイルとディレクトリをtsにリネームして、ファイルを下記のように編集します。

resources/ts/app.ts
document.getElementById('app')!.textContent = 'Hello Typescript !';

vite.config.jsのresources/js/app.jsとなっていたところを書き換えます。

vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';


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

welcome.blade.phpの@viteのパスも変更しましょう。

resources/views/welcome.blade.php
@vite(['resources/css/app.css', 'resources/ts/app.ts'])

再度画面を確認して「Hello Typescript !」が表示されていることを確認してください。

Reactを使う

Reactを動かすのに必要なモジュールをインストールします。

$ yarn add -D react react-dom @types/react @types/react-dom @vitejs/plugin-react @vitejs/plugin-react-refresh

app.tsをapp.tsxに変更してReact動作確認ようのファイルを作成します。

resources/ts/app.tsx
import React from 'react'
import { createRoot } from 'react-dom/client'


const App = () => {
  return <h1>Hello React !</h1>
}


const root = createRoot(
  document.getElementById('app') as HTMLElement
)
root.render(<App />)

vite.config.jsはパスの変更の他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({
      input: ['resources/css/app.css', 'resources/ts/app.tsx'],
      refresh: true,
    }),
    react()
  ],
});

welcome.blade.phpの@viteのパスも変更しましょう。

resources/views/welcome.blade.php
@viteReactRefresh
@vite(['resources/css/app.css', 'resources/ts/app.tsx'])

エイリアスの設定

インポートするときtsディレクトリのルートからパス指定したいですよね。
その場合はエイリアスを設定します。

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


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

これで@を指定すると/resources/tsからパスが指定されます。

import { Title } from '@/components/Title'

ただこれだけだとVSCodeで開くとエラー表示になりますので、tsconfig.jsonも作成します。

vite.config.js
{
  "compilerOptions": {
    "baseUrl": "./resources/ts",
    "paths": {
      "@/*": ["*"]
    }
  }
}

ビルド

開発が終わったら最後にビルドしてファイルに書き出します。

$ yarn run build

ファイルがpublic/build/assetsに書き出されていることを確認してください。
この状態ならVite開発サーバーを閉じても動作確認できると思います。