Vue.jsのpug templateで途中で改行を入れたい場合

問題点

Vue.jsでtemplateはpugでも書くことができてタグを書くのは楽になりますが、styleなど複数のプロパティを設定したいときに改行できずに困ったときの対応方法です。

<template lang="pug">
//- どんどん横に伸びていく・・・
.component(
  :style="{ width: $data.width + 'px', height: $data.height + 'px' }"
)
</template>

解決方法

あんまり知られていないですが、pugは後ろに\を入れると改行してもコンパイル時には同じ行とみなしてくれるので、これを入れることで適切な場所に改行を入れることができます。

<template lang="pug">
//- \で改行を入れられる！
.component(
  :style="{\
    width: $data.width + 'px',\
    height: $data.height + 'px',\
  }"
)
</template>

まとめ

pugの場合は\を入れることで途中で改行できて、classとかstyleのバインディング時にみやすくなるように適切に改行を入れることができました。
可読性が上がると思うので是非使ってみてください。