Nuxt.jsでPugを使う方法です。前回作ったNuxtプロジェクトで必要にPugのモジュールを追記します。

$ yarn add -D pug pug-plain-loader

準備はこれだけでOK。

Pugで書く

インストールが終わったら/app/pages/index.vueのテンプレート部分を以下のように書き換えましょう。

<template lang="pug">
section.container
  div
    logo
    h1.title sriaweb-nuxt
    h2.subtitle My badass Nuxt.js project
    .links
      a(
        href="https://nuxtjs.org/",
        target="_blank",
        class="button--green") Documentation
      a(
        href="https://github.com/nuxt/nuxt.js",
        target="_blank",
        class="button--grey") GitHub
</template>

ポイントはど頭のtemplateタグにlang属性を追記し、値に「pug」を指定することです。

こうするとtemplate内でpugが使えるようになります。