SSRサイトでVue.jsを導入する際に、モデルをDOMの各要素に吐き出すのではなく、htmlのdata属性にJSONオブジェクトして吐き出してもらいVueで利用する方法です。
これで、バックエンド側とフロントエンドでの棲み分けがしやすくなります。
これまではバックエンド側でもHTMLをガリガリいじってみっともない形に変貌するということが起こっていました。もう触らないでねという願いも込めて。
今回はサーバサイドでdata属性(data-model)にセットしたポイントを表示するというページです。
今回のファイル
シンプルに必要最低限のファイル群
$ src
├── app.js
├── _mixin.js
├── App.vue
└── index.html
index.html
よくあるサンプルの形。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample</title>
</head>
<body>
<div id="app" data-model='{ "point": 8000 }'></div>
</body>
</html>
app.js
よくあるサンプルの形。App.vueをインポートして#appにレンダリングします。
テンプレートはApp.vueで定義しています。
今回は数値に3桁カンマをつけるfilterも利用しています。
import Vue from 'vue'
import App from './App.vue'
// 数値の3桁カンマ処理共通フィルタ
Vue.filter('getCommaNum', (val) => {
return val.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')
})
new Vue({
el: '#app',
render: h => h(App)
});
_mixin.js
今回のポイントとなるJSです。
複数のページでの共通処理として定義したモジール。
data()にてDOMからdata属性に設定されたオブジェクトモデルをVue.$dataにセットします。
このモジュールを後述のApp.vueでimportします。
export default {
data() {
const el = document.getElementById('app')
return JSON.parse(el.dataset.model)
}
}
App.vue
"_mixin.js"をインポートします。これをVueインスタンスのmixinsにセットします。
これで、取得したdataがセットされます。
今回はpointに3桁カンマをつけるfilterも噛ませています。
<template>
<div id="app">
<p>あなたのポイントは、{{ point | getCommaNum }}ポイントです。</p>
</div>
</template>
<script>
import mixin from '@/_mixin'
export default {
mixins: [mixin],
name: "App"
};
</script>
これだけです。
他にもいろんなやり方があれば教えて欲しいです。SSRサイトでVueをどう使っていますか？