🐶

webpackでVueのテンプレートエンジンとしてPugを使う方法

2022/04/27に公開約2,800字

この記事について

この記事では webpackVue Loader を使って Vue のシングルファイルコンポーネントを作成する時にテンプレートエンジンとして Pug を使う方法について紹介します。ソースコードについては この記事のGistページ からダウンロード可能です。

おおまかな手順

おおまかな手順を下記に示します。

  1. コーディング
  2. 動作確認

コーディング

下記のコマンドを実行してコーディングの準備をします。

mkdir webpack-vue-pug
cd webpack-vue-pug
npm init -y
npm install --save vue
npm install --save-dev pug pug-plain-loader vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server
touch app.js component.vue index.html webpack.config.js

webpack.config.js

エディタでwebpack.config.jsを開いて下記の内容を入力します。

ポイントを下記に示します。

  1. Vueファイルのtemplate要素でlang属性にpugが指定された時にローダーとしてpug-plain-loaderを使うように設定しています。
  2. Vueファイルのローダーとしてvue-loaderを使うように設定しています。

index.html

エディタでindex.htmlを開いて下記の内容を入力します。

app.js

エディタでapp.jsを開いて下記の内容を入力します。

component.vue

エディタでcomponent.vueを開いて下記の内容を入力します。

ポイントを下記に示します。

  1. template要素のlang属性をpugに設定することでテンプレートエンジンとしてPugを使用することを指定しています。

動作確認

ターミナルで下記のコマンドを実行してwebpack-dev-serverを起動します。

webpack serve

ブラウザで http://localhost:8080/ にアクセスして「Hello world!」と表示されることを確認します。

ブラウザで http://localhost:8080/ アクセスした様子です。Webページの見出しはwebpackでPugを使ってVueのテンプレートを書く方法であり、本文はHello world!です。

参考にしたWebページ

この記事を作成するために参考にしたWebページを下記に示します。

おわりに

私はWebアプリを開発する時にExpressでPugを使ってモックアップを作り、仕様が確定してからVueを使ってユーザーインタフェースを実装していくことが多いので、ExpressからVueへPugのソースコードをコピーできることにとても助けられています。

しかしながら「vue pug」でGoogle検索するとその未来は明るくないようです。私と同じようにVueファイルのテンプレートエンジンとしてPugを使っていた方がHTMLへ回帰している様子が散見されます。大きな理由としてはlinter(ソースコードの書き方について警告を表示するツール)などの静的解析ツールが利用できないことに起因しているようです。

HTMLのソースコードを読むのはともかくとして書くのはEmmetなどを使えばPugなしでもやっていけるので、今後はExpressでも EJS を使用するなどして徐々にPugからHTMLへ移行していこうと感じました。

この記事をお読みになった方の中で新しいツールや言語などを試したけれど最終的には元に戻した経験などがありましたらお気軽にコメントをいただければ幸いです。最後までお読みいただきありがとうございました!

関連記事

GitHubで編集を提案

Discussion

ログインするとコメントできます