nuxt.jsにpugをインストールする方法

htmlの閉じたタグや「class=」などを書くのが嫌だと思ったことはありませんか。

nuxtでプロジェクトを作る上では、html、cssでコーディングを行うのもありですが、pugとstylusを使ったほうがコードもスッキリする上に、同じことをなんかいも書かなくていいので効率が上がります。

nuxtにstylusを入れる方法はこちら

環境とバージョンについて

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

上記のコマンドだけで使えるようになります。

あとは「.vue」ファイル内でlangの設定をして上げるだけです。

サーバーを立ち上げて表示れていればOKです。

バージョンが違うなどでうまく行かないときもあるかもしれません。


p テキストテキスト
  br
  | 改行テキスト
  span spanタグ
  br
  | 改行テキスト

上記の記述で下記のようなhtmlになります。

テキストテキスト
改行テキストspanタグ
改行テキスト

pugのコメントにはhtmlに書き出しされるコメントと表示されないコメントがあります。

記述方法は下記になります。


//- Pug
// これはHTMLに表示されるコメントです

//- これはHTMLに表示されないコメントです

上記をコンパイルをすると下記の記述になります。

効率よくコーディングを行うのにpugはかなり役に立つと思います。

なれてしまえば、htmlでコーディングを行うのはかなり面倒なるのできをつけてくださいwww

また、sassやstylusなどは使われていることが多いですが、pugに関してはあまり使われていないので、自分はできるけど他の人はできないなどといったことになるかもしれません。