komagataのブログ

今までの流れはこうでした。

1. @machidaがslimでモックとして作る。
2. 僕がjsにするためにhtmlに翻訳してfoo.vueに移す。

これがクッソ面倒だったのですが、pugならslimとほとんど同じなのでコピペでいけました。

$ yarn add pug

templateタグにlang="pug"を追加する。

app/javascripts/packs/components/foo.vue:

<template lang="pug">
  header.content
    h1 トップページ
</template>
<script>
いろいろ
</script>
<style>
いろいろ
</style>

「ヒューッ！」

webpackerの設定は一切無し。

RubyMineを使ってるなら、pugプラグインを入れればシンタックスハイライトもちゃんと動きますね。