この記事で達成すること

Nxutプロジェクトにレイアウトファイルを導入し、GitHubにPushします。

Nuxtプロジェクトディレクトリを追加する

前回インストールしたパッケージnuxt-create-appでは、Nuxtを動かす最小のディレクトリを用意します。このままではNuxtが用意している機能をフルに活用できません。

そこで、Nuxtが予め用意しているディレクトリを作成します。

ターミナルから、プロジェクトディレクトリ直下で下記コマンドを実行してください。

% mkdir assets layouts middleware plugins

Nuxt.jsのディレクトリ構成 - Nuxt.js

作成後のNuxtプロジェクトの構成は以下のようになります。

% ls -1
README.md
assets
components
jest.config.js
layouts
middleware
node_modules
nuxt.config.js
package.json
pages
plugins
static
store
test
tsconfig.json
yarn.lock

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

Nuxtのレイアウトファイルは、表示するページの共通部品を設置するファイルとなります。

ページファイルの土台となるファイルですね。

レイアウトファイルは、layoutsディレクトリ以下で管理します。

default.vueを作成する

layoutsディレクトリ以下に、default.vueを作成します。

default.vueは、ページでレイアウトが何も指定されていない場合に、自動で読み込まれるベースレイアウトファイルとなります。

% touch layouts/default.vue
% ls layouts

default.vue

これで現在のpages/index.vueには、default.vueのレイアウトが使用されるようになりました。

default.vueを編集する

default.vueを仮編集します。

layouts/default.vue

<template>
  <div>
    layouts/default.vue
    <nuxt />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'DefaultLayout'
})
</script>

• <nuxt /> ... このタグの場所にpagesディレクトリのコンテンツが表示される。
• <script lang="ts"> ... langにtsを指定することでTypeScriptが使用可能。

ブラウザで確認しよう

Nuxtを起動して、

% yarn dev

localhost:3000にアクセスすると、default.vueの文字列が表示されいています。

レイアウトファイルの設定がうまくいったことが確認できました。

ローカルGitにコミット

ローカルGitにコミットします。

% git add -A
% git commit -m "Created nuxt project"

GitHubにPushする

ここまでの変更をGitHubにPushします。

GitHubへのSSH接続については、下記記事をご覧ください。

【GitHub】秘密鍵の生成・公開鍵を追加・SSH接続するまでを画像で分かりやすく

リモートリポジトリの作成

https://github.com/newから、GitHubに新しいリポジトリを作成します。

• Repository nameを入力
• Public（一般公開）or Private（非公開）を選択
• Create repositoryボタンより作成

リモートリンクを取得

• SSHを選択して、
• コピーボタンよりリモートリポジトリのURLをコピー

ローカルGitにPush先を追加する

ローカルGItのoriginに、リモートリポジトリURLを追加します。

% git remote add origin <コピーしたSSH>

# 筆者の場合
% git remote add origin git@github.com:andou0/demo-blog-v2.git

追加できたか確認します。

% git remote -v

origin	git@github.com:andou0/demo-blog-v2.git (fetch)
origin	git@github.com:andou0/demo-blog-v2.git (push)

GitHubにPushする

それではGItHubにPushしましょう。

初回Pushのみ、--set-upstreamオプションを付与します。

% git push --set-upstream origin master

• --set-upstream origin master ... リモートoriginにmasterブランチをpushする設定。次回以降は省略可能でgit pushを行うと、自動でoriginにmasterブランチがpushされる。

リモートリポジトリを確認しよう

GitHubのリポジトリを確認してください。

NuxtプロジェクトがPushされました。

今回の作業は以上です。

次回は?

Nuxt.jsでTypeScriptを扱いやすくするパッケージ、nuxt-property-decoratorをインストールします。

どうぞお楽しみに。