Nuxt.jsでPugを使用する

Nuxt.jsでPugを使用する方法をメモ。

設定方法

Nuxt.jsのプロジェクトを準備した後で、必要なパッケージをインストールします。

npm install --save-dev pug pug-plain-loader

templateにlang=”pug”を指定することで、Pugで記述ができます。

<template lang="pug">
.p-article-list
  article.p-article-item(v-for="article of articles" :key="article.id")
    NuxtLink.p-article-item__link(v-bind:to="'/article/' + article.id + '/'")
      .p-article-item__date {{ article.date }}
      p.p-article-item__ttl {{ article.title }}
</template>