【Vue.js】VueCLI3とGridsomeに「Pug」を導入する

VueCLI3で作ったVue.jsプロジェクトに対して「Pug」を導入した際、設定ファイルに関する理解が乏しく、ハマってしまった。。。

同じ手間をなくすため、自分なりに咀嚼した「Pug」の導入手順をメモしておきます。

この記事なに？

本記事は、VueCLI3およびGridsomeに対して「Pug」を導入した際のメモ記事となります。

VueCLI2については以下記事を参考にしていただければと思います！

【Vue.js】Vue.jsにテンプレートエンジン「Pug」を導入する - zackey推し

本編

VueCLI3の場合

VueCLI3から、Webpackの設定はvue.config.jsに記載することになった。ということを今更知りました。（おそい）

詳しくは以下のご覧ください。

cli.vuejs.org

公式リファレンスのAdding a New Loaderを参考に導入を試みます。

実際に「Pug」を導入したリポジトリはこちらになります。手順じゃなくリポジトリを直接参照されたい方は次からどうぞ。

• GitHub - zakizaki-ri9/vuecli3-pug-sample: VueCLI3で「Pug」を導入する用のリポジトリ

では手順を記載していきます。

プラグインの導入

まずVueのプロジェクトを作り、「Pug」のプラグインを導入していきます。

# プロジェクトの作成
vue create vuecli3-pug-sample
> default (babel, eslint)

# プラグインの導入
cd vuecli3-pug-sample
yarn add pug pug-plain-loader

プロジェクトのルートにvue.config.jsを作成、以下の設定を記述します。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule("pug")
      .test(/\.pug$/)
      .use("pug-plain-loader")
      .loader("pug-plain-loader")
      .end();
  }
};

html → 「Pug」の変換と動作確認

ここまで終えれば、あとはhtmlから「Pug」への変換を行い、動作確認するだけです。

変換対象の*.vueファイルのtemplateタグに対して、以下を追記します。

<template lang="pug">
</template>

そして、次のサイトを用いて「Pug」の形式に変換したコードを取得、templateタグ内にコピペします。

html2jade.org

コピペまで終わりましたら、コンソールから

# 起動
yarn serve

を実行し、表示が問題ないことを確認しましょう。

Gridsomeの場合

Gridsomeの方は簡単です。

Gridsome向けに「Pug」を導入する次のプラグインが作成されています。

• Gridsomeのプラグイン - gridsome-plugin-pug

実際に導入してみたリポジトリはこちらになります。「Pug」以外にも色々導入されていますが、もしよろしければ参考にしていただければと思います。

• GitHub - zakizaki-ri9/gridsome-sample: Gridsomeの練習

手順

念のため、導入手順を記載しておきます。

# プラグインの導入
yarn add -D pug gridsome-plugin-pug

// gridsome.config.js
module.exports = {
    plugins: [
        'gridsome-plugin-pug' // add
    ]
}

上記で設定終了です。あとは任意の*.vueファイルに対して、コードを「Pug」に書き換え、以下で実行＆動作確認します。

# 起動
gridsome develop

おわり

短いですが、以上になります。

もし間違い等ありましたら、FBいただけると嬉しいです！