前のパートに戻る 完了して次のパートへ  

  2-1 ログインページの作成

この章ではログインページを作成し、Google のアカウントでログインできるようにします。

本パートの目標物


本パートではログインページを作成し、ブラウザで以下のログイン画面が確認できるところまで実装します。

layout と page


UI を作るにあたって、Nuxt では以下の 2 つの要素を抑える必要があります。

  • layout
  • page


layout

名前の通りページのレイアウトになります。 ヘッダーやフッター、サイドバーなど、どのページでも共通で表示される UI を表現します。 特に指定をしなければ、全ページで layouts ディレクトリ配下のdefault.vue という名前の vue テンプレートが自動で適用されます。


pages

ここは各ページごとの UI を表現します。 pages ディレクトリ配下に vue ファイルを配置することで、ルーティングまで全て自動で設定されます。

pages/login.vue

を作成すれば、 /login にアクセスすれば、こちらの login.vue が表示されます。

tailwindcss


Nuxt の install 時に tailwind.css というものを導入しました。 これは、css を個別に書かなくても tailwind.css が用意している class を指定するだけで style が適用されるという css フレームワークです。拡張が簡単にできるので今回採用しました。

デザインを調整するにあたっていくつか(色とかサイズとか)拡張をしているので、以下の指定箇所にこちらをそのままコピペしてください。

/tailwind.config.js

以下のファイルも合わせて追加をします。 ( npm run dev でローカルサーバーを起動している場合は ctl + c で一旦止めます。)

$ touch assets/css/tailwind.css


assets/css/tailwind.css

作成したら以下のように変更しましょう。

上記で作成した css はアプリケーション全体で読み込みたいので nuxt の設定ファイルに指定します。

nuxt.config.js

ページの作成


では早速ログインページを作っていきましょう。

デザインは SP 用で作成していきます。chrome のデバッグツールで iPhone や Android 用にブラウザの画面サイズを変更しましょう。

まずは layout から作っていきます。

layouts ディレクトリにある default.vue を以下のように変更しましょう。

layouts/default.vue

ここで注目したいのが、 <nuxt /> という見慣れないタグです。 実はこの <nuxt /> の部分にそれぞれのページごとの html が展開されます。

なのでそれ以外の部分が全ページ共通となるわけです。

次に全画面共通で表示するヘッダー用のコンポーネントを作成します。

$ touch components/Header.vue


components/Header.vue

ヘッダー用のコンポーネントを作成したら先程の layout に追加しましょう。

layouts/default.vue

これで全画面に先程作成したヘッダーが共通で表示されるようになりました。

次に page を作成します。 まず、pages ディレクトリ配下に login.vue を作成しましょう。

以下のコマンドを実行してください。

$ touch pages/login.vue

pages/login.vueにコードを追加します。

pages/login.vue

動作確認


これでログインページが見れるようになりました! npm run dev でコマンドを実行し、早速 http://localhost:3000/login にアクセスしてページを確認してみましょう。

以下のように、layout 側の html と page 側の html が表示されているのが確認できれば OK です。

以上で今回のパートは終了です。

お疲れ様でした。

議論

0 質問

このコースの評価は?