テンプレートエンジンとVueの組み合わせ方

基本的には、Rails等とVueを組み合わせる際にはテンプレートは使わない

RailsはAPIのみに専念することになる

https://gyazo.com/a13892a980e664049ac921ff63ba775b

しかし、下記のようにテンプレートとVueを両方使いたいケースもある

既存のRailsプロジェクトにVueを載せたい場合

SSRが必要な場合

そのような場合に取れるパターンについて書く。

VueコンポーネントからHTTPリクエストで取得する

ワンテンポ反映が遅れるが、Vue管理部分は必ずAPI経由で値を取得するのは正攻法

windowを通して値をVueのRootコンポーネントに引き渡す

エスケープは必要

data-* 属性値に JSON をいれてもらって、ルートコンポーネント or ルートコンポーネントを生成するエントリファイルで JSON.parse する

data属性値を介すことでXSSへの対策にもなる

scriptタグ内でJSON.parseし、インスタンス生成時のdataに渡す

NGな例

Vueが管理するテンプレート内にユーザ入力由来のデータを入れてしまう

Railsのエスケープを信用してVueのテンプレート内を生成してしまうと、mustacheを突っ込まれてXSSされてしまう

VueのテンプレートはJavaScriptと同種のものと考えたほうが良い。JSを動的生成するのがやばいのと同様、Vueのテンプレートを動的生成すること自体が危険

その他参考資料

prerenderで十分なケースも出てくるかも？

Nuxt.jsを使う