【Nuxt 2】Pugの導入
Pug とは
Pug は、HTML の記述を簡略化できるテンプレートエンジンです。 タグを使わずに HTML を記述するため、効率化が見込めます。
NuxtJS への導入
Pug を NuxtJS で利用するために、以下をインストールします。
$ npm i pug pug-loader pug-plain-loaderあとは<template>で言語を指定すれば利用できます。
<template lang="pug">
</template>基本構文
こちらのサイトで Pug の動作を確認できます。
Pug では、タグを使わずインデントによって HTML を記述していきます。 まずは簡単な例をみてください。
div
p Hello World!これは以下の HTML と同義です。
<div>
<p>Hello World!</p>
</div>Pug では、タグではなく要素名のみを使用します。 また、インデント構造によって親子関係を表します。 これが Pug の基本となります。
テキスト
テキストを表示する場合は、要素名の後に 1 つスペースを開けて記述します。
p Hello World!親子関係
要素の親子関係については、先程記述した通りインデント構造によって決まります。
div
p Hello World!親子関係が 1:1 の場合は、コロン（:）を使って以下のように記述できます。
div: p Hello World!属性
属性は()を用いて記述します。
a(href="https://hogehoge.com") Hoge Site<a href="https://hogehoge.com">Hoge Site</a>当然ながら、Vue.js のディレクティブも記述できます。
a(:href="url") Hoge Siteid・class
id と class は属性として指定することもできますが、CSS と同様に#、.を用いて以下のように記述することができます。
main#main
div.container<main id="main">
<div class="container">
</div>
</main>id または class を指定する場合、divは省略することができます。
.container<div class="container">
</div>インライン要素
以下のようにインライン要素のタグを使うことができます。
p Hello <span style="color: red">World</span>!<p>Hello <span style="color: red">World!</span>!</p>上記は#[]（インターポレーション）を使用することで、Pug の表記に置き換えることができます。
p Hello #[span(style="color: red") World]!また|（パイプ）を使用することで、インラインを改行して記述することができます。
p Hello
| #[span(style="color: red") World]!エスケープ
=と"を使用することで特定の文字をエスケープすることができます。
p= "<script>"<p><script></p>コメント
コメントは//になります。
//コメント<!-- コメント -->複数行のコメントは、以下のようにインデントを用います。
//
複数行の
コメント//では HTML 反映されるコメントになりますが。//-とすれば HTML には反映されなくなります。
//- これは反映されないコメントその他の機能について
Pug には、ifやforといった制御構文など紹介していない機能があります。
これらを使えば HTML を効率よく記述することができるでしょう。
ただし、ここでは Vue.js（NuxtJS）で使うことが前提のため、制御構文などは当然 Vue.js のものを使用します。 Vue.js における Pug の役割は、Markup Language の表記からインデントベースの表記に変えるだけです。 あくまで記述のしやすさやコードの見た目の問題だけなので、無理に導入することはありません。