2021.05.05

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

野田竣介

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

Nuxt.jsでPugを使いたい！

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

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

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

環境

nuxt：2.15.4
composition-api：0.23.3

Contents

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