Laravel＋Vue3にPugを導入するメモ

Laravel Mixでフロントエンド開発している際に、Pug小型犬テンプレートエンジンをVueの単一ファイルコンポーネント内で使う手順をメモしときます。

bladeはvue-routerで使えないんでね。

【Laravel 9.x】Laravel＋Mix＋Vue 3＋TypeScript＋Sass(＋PurgeCSS)完全導入ガイド

https://0115765.com/archives/7336

インストール

pugと関連パッケージをインストール。

$  npm i --save-dev pug pug-plain-loader

Webpack設定

次にビルド時の設定を行います。といっても以下を追記するだけ。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .webpackConfig({
            // 以下を追記
            module: {
                rules: [{
                    test: /\.pug$/,
                    loader: 'pug-plain-loader',
                }],
            }
        }
    )
    .sass('resources/sass/app.scss', 'public/css');

.vueファイルに書くだけ

最後にvue-cli同様、<template>タグにlang=pugを付与すればPugとして認識してくれます。

App.vue

<template lang="pug">
    .container
        p {{ id }}
	 ︙

Laravel Mixのホットリロードにも対応していますー。

[補足]PhpStormでPugを便利に使う

最後に補足としてPhpStormで使うときにはプラグイン必須ですよ。って話

初期設定でPugにも対応してると思いきやマスタッシュ構文が勝手に改行されるのでエラーが発生する。IDEの設定からPug (ex-jade) をインストールしましょう。

シンタックスハイライトはもちろん、コードフォーマットも動きます。