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

こんばんは！ヒカリです。

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

今流行の仮想通貨を自動売買してみました！

リモートワークでおすすめのグッズ紹介してみました！

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

Nuxt.jsでPugを使いたい！

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

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

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

環境

nuxt：2.15.4
composition-api：0.23.3

Pugを導入してみる！
- yarnで導入
- npmで導入
動作確認！
あとがき

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の導入はこちら！