Nuxt.js に pugを導入する

Nuxt.jsのプロジェクトでpugを導入したので、紹介をします

pugとは？
閉じタグがなくて、
インデントを整えて書いていくテンプレートエンジンですね
https://pugjs.org/api/getting-started.html:embed:cite

Nuxt.jsへのpugの導入はめっちゃ簡単です
公式にも書いてるしね
https://ja.nuxtjs.org/faq/pre-processors/:title

yarn add pug pug-plain-loader

これだけ
pugをloaderをyarn addするだけ
特に設定ファイルを用意する必要もありません

次にpugで書いた例を

下がプロジェクトを作成したばかりの
Nuxt.jsのトップページにあたるデフォルトのindex.vue

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

これをpugで書き直すと

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

めっちゃスッキリ！
pugいいよ〜