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>

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年9月
 1234
567891011
12131415161718
19202122232425
2627282930