nuxt.js+Firebaseで認証ページを作る③

pages&layouts編

さて、今回が
nuxt.jsとFirebaseで認証画面を作る上での下準備の最後になります。

今回は、認証画面に必要な素材となるlayoutファイルとpageファイルを
一通り作っていきたいと思います。


今回のシリーズの全リンクはこちら

nuxt.js+Firebaseで認証ページを作る① (Firebase準備編)
nuxt.js+Firebaseで認証ページを作る② (nuxt.jsインストール編)
nuxt.js+Firebaseで認証ページを作る③ (pages&layouts準備編)
nuxt.js+Firebaseで認証ページを作る④ (認証機能実装編)

まずはページファイルを作る

さて、それでは早速nuxtのpagesにpageファイルを作っていきましょう。
今回の認証画面の最終的なサイト構造はこんな感じ
https://i.imgur.com/fOQ5rXd.png

今は、nuxtを
vuetifyというUIフレームワークを選択して
インストールしただけですので

ページとしてはデフォルトで用意されている
index.vueと
inspire.vueだけです。

ここに、adminディレクトリを追加して
admin/index.vueと
admin/login.vueを作成します。

それでは、ターミナルでnuxtのpagesディレクトリまでcdコマンドで移動しましょう。

pagesディレクトリに移動したら
adminディレクトリを作成しましょう。

mkdir admin

更にtouchコマンドでindex.vueとlogin.vueを作ります。

touch admin/index.vue
touch admin/login.vue


しかし、単なる空ファイルでは
nuxtのサーバーを立ち上げて
「localhost:3000/admin」と「localhost:3000/admin/login」に
アクセスしてもエラーが出るだけですので
vueファイルに最低限必要なコードを書いていきます。

エディタで
admin/index.vueとadmin/login.vue
を開きましょう。

そして下記のコードをコピペしてください。

admin/index.vue
<template>
  <div>
    admin
  </div>
</template>

<script>
  export default {
  }
</script>

<style lang="scss" scoped>

</style>
admin/login.vue
<template>
  <div>
    login
  </div>
</template>

<script>
  export default {
  }
</script>

<style lang="scss" scoped>

</style>

レイアウトファイルを作る

ページファイルが用意できたので
続いてレイアウトも作っていきましょう。

ターミナルでnuxtのlayoutsディレクトリへ移動して
下記コマンドを実行します。

touch login.vue

次に「/admin」ページ用のレイアウトですが
ここではこだわりは特に無いので「layouts/default.vue」を複製して
ファイル名をadmin.vueに変更しておきます。

これで、「/admin」ページ用と「/admin/login」ページ用の
layoutファイルが用意できたので
続いてファイルの中身を編集していきます。

まず、「layouts/admin.vue」の方ですが
こちらは今回はこのままにしておきます。
なので「layouts/login.vue」を編集していきましょう。

完成はこのような感じです。
https://i.imgur.com/eJghrk4.png


このようなログインフォームを作るのは、素のvue.jsでも充分簡単ですが
それでも、一手間はかかるだろうと思います。
ですが今回、UIフレームワークにvuetifyを採用しています。
vuetifyにはすでにこの手のログインフォームはソースコードをコピペするだけで
出来上がるようなサンプルが用意されていますので
それを使っていく事にします。

まず、Vuetify公式へアクセスして
左のサイドバーの「Pre-made layouts」という項目をクリックしてください。
すると下の画像のようにレイアウトの一覧が表示されると思います。
この中の「Centered」というのが今回利用するログインフォーム用のレイアウトです。
https://i.imgur.com/qEhasxi.png


そしたら、「Centered」の下の「< >」をクリックしましょう。
するとレイアウトのソースコードが掲載されているgithubのページが開くので

そのソースコードの templateタグを丸ごとコピーして
「layouts/login.vue」のtemplateタグに上書きしましょう。
下記のコードをコピペして貰っても良いです。

<template>
  <v-app id="inspire">
    <v-content>
      <v-container
        class="fill-height"
        fluid
      >
        <v-row
          align="center"
          justify="center"
        >
          <v-col
            cols="12"
            sm="8"
            md="4"
          >
            <v-card class="elevation-12">
              <v-toolbar
                color="primary"
                dark
                flat
              >
                <v-toolbar-title>Login form</v-toolbar-title>
              </v-toolbar>
              <v-card-text>
                <v-form>
                  <v-text-field
                    label="Login"
                    name="login"
                    prepend-icon="person"
                    type="text"
                  ></v-text-field>

                  <v-text-field
                    id="password"
                    label="Password"
                    name="password"
                    prepend-icon="lock"
                    type="password"
                  ></v-text-field>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <div class="flex-grow-1"></div>
                <v-btn color="primary">Login</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</template>

ページにレイアウトを適用させる

さて、これで
「layouts/login.vue」の準備もできたので
次はpagesのvueファイルにlayoutを設定して
「/admin」ページでは「layouts/admin.vue」のレイアウトを利用し
「/admin/login」ページでは「layouts/login.vue」のレイアウトを使うようにしてやります。

レイアウトを設定するのはものすごく簡単です。
まず、「pages/admin/index.vue」を開きましょう。

<template>
  <div>
    admin
  </div>
</template>

<script>
  export default {
    layout: 'admin'
  }
</script>

<style lang="scss" scoped>

</style>

これだけです。
単に「layout」というプロパティに'admin'と指定してやるだけです。

同様に「pages/admin/login.vue」の方にもレイアウトを適用させましょう。

<template>
  <div>
    login
  </div>
</template>

<script>
  export default {
    layout: 'login'
  }
</script>

<style lang="scss" scoped>

</style>

これでpagesとlayouts全て揃ったので
今回はここまで
と言いたいところなのですが

今の状態でプロジェクトルートでnuxtを起動して
「localhost:3000/admin/login」へアクセスしてみて下さい。
すると下記画像のように一部アイコンが表示されていない状態になっているかと思います。
https://i.imgur.com/YkS7fuK.png

致命的な欠陥とまでは言わないですが
かっこ悪いので直しておきましょう。
このアイコンを表示するには
nuxt.config.jsを編集する必要がありますので、
nuxt.config.jsをエディタで開きます。

headというプロパティの中にlinkというプロパティがあるかと思います。
ここは所謂、HTMLのheadタグの中の設定という事です。
HTMLのheadタグ内をjsのオブジェクトで表現しているだけなので
ここのlinkのところに
アイコンのcssを読み込んでやればいいわけです。

linkのところでは現在faviconが読み込まれているだけだと思うので
その下に下記のように追加してやりましょう。
これで無事アイコンも表示されるようになったはずです。

link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' }
]

まとめ

以上、ここまでで認証画面実装の為の
下準備ができた感じです。

次回がいよいよラストで
本格的に認証機能の実装をやっていくという感じになります。