ざきの学習帳（旧 zackey推し ）

日々の学びを書きます

【Vue.js】Vue.jsにテンプレートエンジン「Pug」を導入する

プログラミング Vue.js

f:id:kic-yuuki:20190127154915p:plain

Web開発に携わってからPugという便利なものを知りました。（遅い）

github.com

この記事では、Vue.jsにPugを導入する方法を記載していきます。

Pugとは？

本記事ではざっくり解説になりますので、詳細知りたい方は以下記事を参照していただけると幸いです。

tech.qookie.jp

ざっくり解説

PugはHTMLを楽に書くためのテンプレートエンジンです。

ざっくりこんな書き方ができます。

html

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>sample</title>
</head>

<body>
  <div id="app"></div>
</body>

</html>

pug

html(lang='en')
  head
    meta(charset='utf-8')
    title sample
  body
    #app

Pugは、タグの閉じ忘れを心配する必要がなくなりますので、以下のような方におすすめです。

  • HTMLを編集している際に「タグの閉じ忘れが発生していやだ」と感じる方
  • Rails等でSlimの書き方に慣れ、Vue.jsでもSlimのように書きたい方

導入やっていき

実際にPugを導入した以下リポジトリを元に導入手順と解説を記載していきます。

github.com

README.mdに実際に導入した方法を記載していますので、そちらを参照していただいても構いません。

手順

公式リファレンスにて導入方法が記載されていました。

vue-loader.vuejs.org

自分にわかるように咀嚼しながら手順を書いていきます。

pug,pug-plain-loaderの導入

# Vue.jsのプロジェクト作成
vue init webpack-simple vue-pug-sample

# Pugの導入
yarn add pug pug-plain-loader

webpack.config.jsへの追記

module.exports = {
  module: {
    rules: [
      // ここから
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      }
      // ここまで
    ]
  }
}

*.vueのテンプレート構文をPug記法に修正

「src/App.vue」を例にbefore,afterを記載します。

HTMLとJade/Pugを相互変換指定くれるサイトがありますので、ありがたく使わせていただきましょう。

html2jade.org

before

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

after

<template lang="pug">
  #app
    img(src='./assets/logo.png')
    h1 {{ msg }}
    h2 Essential Links
    ul
      li
        a(href='https://vuejs.org', target='_blank') Core Docs
      li
        a(href='https://forum.vuejs.org', target='_blank') Forum
      li
        a(href='https://chat.vuejs.org', target='_blank') Community Chat
      li
        a(href='https://twitter.com/vuejs', target='_blank') Twitter
    h2 Ecosystem
    ul
      li
        a(href='http://router.vuejs.org/', target='_blank') vue-router
      li
        a(href='http://vuex.vuejs.org/', target='_blank') vuex
      li
        a(href='http://vue-loader.vuejs.org/', target='_blank') vue-loader
      li
        a(href='https://github.com/vuejs/awesome-vue', target='_blank') awesome-vue
</template>

実行

この後、yarn run devで問題なく表示できればOKです。

おわり

以上になります。

Pugは、最初に書き方について戸惑うと思いますが、書いていくうちに生のHTMLを書くときのわずらわしさがなくなり、しっくり馴染んでくると思います。

もし、興味があればためしに導入してみてください。

また、何か間違い等ありましたら、FBいただけると嬉しいです！