nuxtにて、使用する機能は同じだけれどもエンドユーザによって
表示するページの見た目やレイアウトを切り替えると言う仕組みを
作りたいと考えています。
本仕組みのためにlayoutディレクトリにエンドユーザ別のCSSファイルを作成し、
ページ表示する際のクエリストリングにエンドユーザ用のIDを埋め込み、
pagesのコンテンツを表示する際にlayoutの情報を
クエリストリングの値を基にfirebase realtime databaseの所定の
フィールドから参照して表示を切り替えたいと思うのですが上手く出来ません。
ざくっと以下のようなイメージです
lang
1<script> 2export default { 3 : 4 layout: (ここでのlayoutの指定をfirebaseDBから取得したい) 5 : 6} 7</script>
以下、実施してみたことです。
1.layoutプロパティにてDB参照を行い、情報を取得する
→DBの情報取得が非同期で動作するが、
layoutプロパティにてpromiseが効かないためNG
2.layout情報読み込み用のmiddlewareファイルを作成してDB参照を行い、取得した値を渡す
→ローカル環境では動作したけれども、
サーバ側にデプロイするとSSRモードでは初回表示時に
middlewareの処理が動作しないため断念
3.vuexのNuxtServerInitにてDB情報を取得しlayoutに渡す
→NuxtServerInitからクエリストリングの値を取得する方法が分からず
こちらどなたか実現可能な方法をご存じな方がいらっしゃいましたら
ご教示下さい。
よろしくお願いいたします。
あなたの回答
tips
プレビュー