🥕

Laravel9＋Vite＋Vuetify3＋TypeScript＋Router＋Sass環境構築

2022/10/19に公開

Laravel

Laravel 9.1くらいからJavaScriptやCSSのデフォルトのビルド環境がLaravel MixからViteへ変更になりました。なので一からLaravel＋Vuetify3の環境を構築してみたので備忘録。（Reactばっかなので）

また、今回作成した環境テンプレートをGithubで公開したので手順でエラーが出たりする場合はこちらからどうぞ。Viteは仕様変更が激しいので…

git clone https://github.com/ichii731 && cd
composer install
npm install
cp .env.example .env
php artisan key:generate
npm run dev

以下の環境を用意していきます

Laravel 9
TypeScript
Vite (with laravel-plugin)
Vue.js 3
Vue Router
Vuetify 3.0.0 Beta.14

Viteプラグインを導入

前提としてLaravel 9.x系をインストールしましょう

composer create-project --prefer-dist laravel/laravel:^9.x *********

Laravelプロジェクトのセットアップが完了するとこれまでだとpackage.jsonにLaravel Mix関連のバッケージがあったかと思いますが、現在ではViteのパッケージに入れ替わっていますのでインストールしましょう。

npm i

Vue3＋Vuetify3＋Vue Router導入

続いてはVue関連をインストールします。
Vue3に関しては、@vitejs/plugin-vueというViteのプラグインパッケージをインストールすればOKです。

npm i @vitejs/plugin-vue vue

ついでに今回はRouterやVuetify3も入れます。

npm i vuetify@next vue-router

(注意)TypeScriptについて

Laravel Mixだと本来ここらで各種トランスパイラの導入が必要ですが、Viteの環境ではTypeScripの場合不要です。そのまま次に進みます。
…が、Vite with Laravelの環境ではTypeScriptの型チェックは行わない点は要注意です。要はトランスパイルするだけでVolarとか使えという事らしい。

Viteは.tsファイルに対してトランスパイルを行うだけで、型チェックを行うことはありません。型チェックはIDEやビルドプロセスで行われることを想定しています。参考→Vite with Laravel Using TypeScript

また、Sassの場合はトランスパイラをインストールしましょう。

npm i sass -D

app.ts作成

JavaScriptの大元となるapp.tsを作ってVuetifyやらRouterやらを読み込みます。

/resources/js/app.ts

import './bootstrap'
import 'vuetify/styles' // Global CSS has to be imported
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import App from './App.vue'
// Route設定は次に行います
import router from "./route"

const app = createApp(App)
const vuetify = createVuetify()

app.use(router)
app.use(vuetify)
app.mount('#app')

Vueコンポーネント作成

続いてはLaravel Mixと同様に/resources配下ディレクトリでフロントエンド開発を行います。Router設定ファイル・各ページのコンポーネントなども作ります。因みにVueコンポーネントをimportする際に拡張子を省略したらエラーになります。

/resources/js/App.vue

<template>
  <v-container class="counter">
  <!-- class="container"はSass動作チェックのために付与してるものです -->
    <router-view></router-view>
  </v-container>
</template>

route.ts

import TopPage from './pages/TopPage.vue';
import NextPage from './pages/NextPage.vue';
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
    {
        path: '/',
        name: 'TopPage',
        component: TopPage,
    },
    {
        path: "/next",
        name: 'NextPage',
        component: NextPage,
    },
];
const router = createRouter({
    routes,
    history: createWebHistory(),
})
export default router;

各ページのコンポーネントも作りましょう。(トップページ以外は割愛)

/resources/js/pages/TopPage.vue

<template>
  <p>Top Page</p>
  <h1>{{ count }}</h1>
  <v-btn color="blue" @click="count++">Increment</v-btn>

  <router-link to="/next">To Next Page →</router-link>
</template>

<script setup lang="ts">
import { ref } from "vue";
const count = ref<number>(0);
</script>

Sassファイルを作成

SassやScssなどのAltCSSも開発に使う場合はこちらも作成しておきましょう。

/resources/sass/app.scss

#app {
    .counter {
        margin: 0 auto;
        text-align: center;
    }
}

vite関連設定

最後にViteを用いてビルドを行う際に必要な設定をしましょう。

vite.config.ts(ビルド設定)

ルードディレクトリにviteのビルド設定ファイルを設置します。laravel()内にはビルドさせたいファイルを指定します。SaSSもTypeScriptもなんでもぶちこんでOKです。

/vute.config.ts

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

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

基本的にはこれでViteの設定は終わりですが、Vuetifyの場合は以下に続く。

VuetifyでのTreeShaking

Vuetifyをそのまままるごとバンドルさせるとビルド後のファイルが大きくなり、肥大化防止のためにVuetifyのViteプラグインでTreeshakingを設定しましょう。
ブラグインをインストールしてvute.config.tsに追記。

npm i vite-plugin-vuetify

vute.config.ts

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

export default defineConfig({
    plugins: [
        vue(),
+         vuetify({ autoImport: true }),
        laravel([
            'resources/sass/app.scss',
            'resources/js/app.ts',
        ]),
    ],
});

Blade内で読み込み

ビルドされたJSファイルをBlade内で読み込みます。Laravel Mixだと@mix()で読み込んでましたが、Viteでは@viteを使います。カッコ内にはビルド前のファイル名を入力します。
他のサイトでは@viteに配列にファイル名を入れてますが以下のようにCSS,JSを別で読み込むことも出来ます。

resources/view/welcome.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel 9</title>
    @vite('resources/sass/app.scss')
</head>
<body>
    <div id="app"></div>
    @vite('resources/js/app.ts')
</body>
</html>

また、Viteのプラグインは非常に優秀でProductionビルドを行ったら乱数が付与されバージョン管理も勝手にやってくれます。

ビルドテスト

# 開発ビルド（ホットリード）
npm run dev
# 本番ビルド
npm run build

開発ビルドで正常にVuetifyのコンポーネントが表示されたらOKです。

そして、プロダクションビルドを行った際にTreeshaking含めアセットが生成されてたら完了です。爆速な開発をお楽しみください。

もし間違いやもっと簡単な手段がありましたらやIssueやプルリクしていただけるとありがたいです。