node.js expressでフロントエンドのVue.jsのオブジェクトを生成するスクリプトに変数を渡したい
Expressで作成したサーバー内のローカルファイルの内容をフロントエンドのVue.jsのテンプレートオブジェクトを生成する際のdataとして与えたいです。
唯の文字列であれば上手くできそうなのですが、目的のファイルはmarkdown形式で多数の改行やバッククォートが含まれています。
そのため、クライアントで動かすjavascript内でテンプレートを展開すると途中に存在するバッククォートで文字列が終了してしまいうまく渡すことができません。
expressのルーティングが以下のようになっています。
router.get('/', (req, res, next) => {
const str = fs.readFileSync(filepath).toString().replace('`', '\`');
res.render('md', { data: obj });
});
また、フロント側のejsは以下のようになっています。
<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js'></script>
<script>
window.onload = () => {
new Vue({
el: '#editor',
data: {
input: `<%= data %>`
},
filters: {
marked: marked,
},
});
};
</script>
</head>
<body>
...
chrome等のインスペクタで確認すると、<%= %>で展開しているdataの文字列のバッククォートで文字列が終了してしまい、それ以降の文字が正常に取り込まれていませんでした。
res.localsに値を持たせることでクライアント側のjsで用いることができるのか?とも思いましたがクライアントのjsではundefinedとなってしまいましたため共有はできないようです。
サーバーで生成したdataの中身をVueのオブジェクトに渡す方法はありますか?