【2019/12/07追記】ログイン後のfooter.vueは使用しないとしました。ログイン後のfooter.vueは、2つの理由で使用しない事としました。重要性がないこと<v-navigation-drawer>と併用した時に下に固定表示され、ユーザーが見る画面領域が狭まる事この変更に伴い、レイアウトファイルのdefault.vueを以下のように変更しました。</v-app></template>なお、記事は修正済みの内容となっています。今回達成すること今回はNuxt.jsのlayoutプロパティを使って、ログイン前と後でレイアウトを切り替えていきます。完成イメージのgifレイアウトファイルの設計レイアウトファイルは、ログインの前後でこのように切り替えます。default.vue以外のファイルは全て作成します。不要ブランチを作成しときましょ新しい作業に入るのでブランチを作成しておきましょう。login_layouting作業に移る前に今回の記事は全てNuxt.js上での作業となります。ターミナルは、Rails内のNuxt.jsプロジェクト(筆者の場合、myapp/frontend)に移動しておいてください。ここに移動しておくそれでは実装に移りましょう。Eslintのルールを緩和するまず、実装の前にEslintのルールを変更します。確認のたびにエラーを吐き出されると困る2つのルールを緩和します。no-consoleconsole.logがある時にエラーを吐きます。warn(警告)に変更します。vue/no-unused-componentstemplate内で使われていないコンポーネントがある時にエラーを吐きます。warn(警告)に変更します。frontend直下.eslintrc.js内のrulesプロパティにルールを追加します。3つを設定する事ができます。}}componentsファイルの作成componentsディレクトリにsharedディレクトリを作成し、その下3つのファイルを作成します。file3}touchコマンドで同じディレクトリ内に複数のファイルを一度に作成するテクニックです。componentsディレクトリはこのようになります。loginHeader.vueデフォルトで入っているlogo.vueは、必要ないので削除しました。作成した3つのファイルを以下のように編集しましょう。{}</script>これでコンポーネントファイルが整いました。layoutファイルの作成ログイン前のトップページとして利用するhome.vueを作成します。layoutsディレクトリ内に作成しましょう。layouts/home.vuelayoutsディレクトリはこのようになります。home.vueログイン前のレイアウト(home.vue)を編集ログイン前のトップページとして利用するhome.vueから、ヘッダーとフッターコンポーネントを呼び出します。ログイン前のヘッダーは「header.vue」を利用するので間違わないようにしてください。このページはログイン前のレイアウト「home.vue」が使用されています。}}</script>ログイン後のレイアウト(default.vue)を編集ログイン後のレイアウトファイルdefault.vueからも同じくヘッダーとフッターを呼び出します。ログイン後のヘッダーは「loginHeader.vue」を呼び出します。/>ログインフラグがfalse、つまりログインしていない場合に表示します。ログインフラグを扱うindex.jsファイルを作成するログインフラグをVuexに作成します。storeディレクトリ内にindex.jsを作成しましょう。store/index.jsindex.jsにloggedInを作成する作成したindex.jsにログイン判定を行うフラグを作成します。false})レイアウトを切り替えるテクニックそれでは、index.vueにレイアウトを切り替える実装を行います。言っても簡単で、layoutプロパティに表示したいファイル名を文字列で渡します。...}</script>layout()には、layoutsディレクトリ内にあるファイル名を文字列で渡します。レイアウトを変更する場合は以下のように書くことができます。'home'}ログインフラグを切り替えるリンクを作成するログインフラグを切り替えるリンクを作成していきましょう。store/index.jsindex.jsにloggedInフラグを変更するactionメソッドを作成します。}}ログイン、ログアウトページの作成pagesディレクトリに、ログイン、ログアウトページを新たに作成します。pages/{login.vue,logout.vue}pagesディレクトリはこのような構成になります。logout.vueログインページにリダイレクト設定を行う/loginに遷移するとトップページにリダイレクトする設定を行います。true)ログインページには、引数にtrueを渡しています。this.$router.replace('/')ページ遷移と同時にトップページへ移動するよう設定しています。ログアウトページにもリダイレクト設定を行うこちらも同じく、/logoutに遷移するとトップページにリダイレクトする設定を行います。false)ログアウトページには、引数にfalseを渡しています。トップページにリンクをセットするhome.vueには、/loginリンクをセットします。このページはログイン前のレイアウト「home.vue」が使用されています。</v-app></template>...index.vueには、/logoutリンクをセットします。...</template>最後に確認してみましょう以上で実装は完了です。Nuxt.jsを起動した後に"http://localhost:3333/"にアクセスして確認してみましょう。devコミットしとこさて、ここまでの変更をコミットしておきましょう。一度Railsプロジェクトに戻ります。../commitしましょう。"add_layout_files"まだ、masterブランチにはマージしません。まとめ今回は、ログイン前とログイン後に利用する、レイアウトファイルとコンポーネントファイルを作成しました。不要Nuxt.jsのレイアウトは、デフォルトでdefault.vueが読み込まれます。このdefault.vueを主に利用するレイアウト設計をした方が、切り替え作業が最小に抑えられます。頭の隅っこに覚えておいてください。次回は?今のままだとかなりブサイクなので、次回はヘッダーとフッターを作り込んでいきます。apiとNuxt.jsでSPA開発」のデモアプリを構築中です。記事になるまでもう少々のお時間が必要です。ブログの更新が止まって申し訳ありません。随時お伝えしてまいります。apiとNuxt.jsでSPA開発」のデモアプリを開発中...。Awesomeもインストールするぜ#04初めてのRailsApiアプリの公開。