初心者向け

Nuxt.jsにPugを導入する!yarn, npmでモジュールをインストール!

nuxt-pug

こんばんは!光です。

大手グローバル企業でWebエンジニアをやっています。

Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。

経歴や実績はこちら

システム開発のお仕事の依頼もお待ちしております。

お問い合わせページTwitterのDMからお気軽にお問い合わせください!

今回はこのような質問をいただきました。

Nuxt.jsでPugを使いたい!

最近ではHTMLを直接書くことなく、Pugを利用することが多くなってきましたよね。

開発効率も上がり、可読性も上がるので積極的に導入していきたいです。

そこで今回はこちらの質問について解説していきます!

環境
  • nuxt:2.15.4
  • composition-api:0.23.3

Pugを導入してみる!

Pugを利用できる環境にするには以下の3つのモジュールを追加します。

  • pug
  • pug-loader
  • pug-plain-loader

yarnで導入

$ yarn add --dev pug pug-loader pug-plain-loader

npmで導入

$ npm install --dev pug pug-loader pug-plain-loader

動作確認!

私は以下のようなファイルを作成して動作確認しました。

<template lang="pug">
  div
    h1.page-title.
      ページタイトル
    p(v-if="isActive").
      ページ本文テキスト
</template>

<script lang="ts">
import { defineComponent, ref } from '@nuxtjs/composition-api'

export default defineComponent({
  setup (_props) {
    const isActive = ref(true)

    return {
      isActive
    }
  }
})
</script>

templateタグのlangにpugを指定します。

正常に表示できたら導入完了です!

Sassの導入はこちら!

あとがき

Pug導入ってけっこう大変なのかなと思っていたのですが、かなりあっさり対応できてしまいました(笑)

HTMLで書いたものが動かなくなるわけではないので途中から導入する場合でもエラーが起きなくて良いですね。

NuxtではせっかくPugが使えるので使っていきたいですね!