Nuxt.jsのモジュールを使って、ページに文字列で設定したレイアウトを動的に変更することはできますか?
例えば、ページコンポーネントで以下のようにレイアウトを設定したとします。
Javascript
1export default { 2 layout: 'blog' 3}
このときに、スマホからのアクセスなら /layouts/sp/blog.vue を参照し、それ以外は通常(/layouts/blog.vue)となるようにしたいです。
試行錯誤して、layoutはFunctionを取ることもできることがわかったので、プラグインを追加して関数をinjectしてあげれば、以下のような形で実現できることはわかりました。
Javascript
1export default { 2 layout: (context) => context.app.$layout('blog') 3}
Javascript
1export default (context, inject) => { 2 inject('layout', string => { 3 // isMobile は別途実装 4 if (isMobile) return `sp/${string}` 5 return string 6 }) 7}
これを文字列を指定しただけで実現したいのですが、可能でしょうか?
適切な位置でフックをかければ出来るのではないかと思っているのですが、それがよくわからず...。
Nuxt.js - 特定のフックでタスクを実行する
よろしくお願いします。
あなたの回答
tips
プレビュー