【今日からはじめるNuxt.js】Nuxt.jsのビューについて

今回は、Nuxt.jsのビュー(画面表示に関わるところ)について記事を書いていきたいと思います。

1.アプリテンプレートについて

アプリテンプレートとは、文字通り、画面表示のひな形となる部分です。

デフォルトで使用されるアプリテンプレートは、

.nuxt(隠しフォルダ)＞views＞app.template.htmlに記載されています

app.template.html

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

独自のアプリテンプレートを作成したい場合は、プロジェクトフォルダ配下に

「app.html」というファイルを配置します。試してみましょう。

app.html

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>

<head {{ HEAD_ATTRS }}>
    {{ HEAD }}
</head>

<body {{ BODY_ATTRS }}>
    <h1>アプリテンプレートのテストだよ！</h1>
    {{ APP }}
</body>

</html>

配置後は、アプリケーションの再起動を行わないと読み込まれないので注意してください。

ここで、

・デフォルトで用意されているindex.vue

・独自で作成したsubpage.vue

にアクセスしてみましょう。

なお、subpage.vueの実装は以下です。シンプルに。

subpage.vue

<template>
    <h1>サブページ</h1>
</template>

アクセス結果

app.htmlに記載した文字列がいずれのページにも表示されました。

2. デフォルトレイアウト・カスタムレイアウトについて

アプリの外観を変更したい場合、レイアウト用のファイルを作成し
PC用とスマホ用にそれぞれ異なるレイアウトを適用させるみたいな事ができます。

デフォルトレイアウトについて

layoutsフォルダ配下にdefault.vueファイルを作成することでメインレイアウトを拡張できます。メインレイアウトは、レイアウト指定がされていないすべてのページに使用されます。

npx create-nuxt-appコマンドでプロジェクトを作成した場合は

layoutsフォルダ配下に以下のdefault.vueファイルが用意されています。

★重要なポイント

作成したページ(ページコンポーネント)にレイアウトを適用させるためには必ず <nuxt/> コンポーネントを記載しましょう。

default.vue

<template>
  <div>
    <nuxt />
  </div>
</template>

<style>
html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
</style>

文字の大きさを変更してみましょう。

defalut.vue(一部抜粋)

<style>
html {
  /* font-size: 16px;*/
  font-size: 40px;
}

アクセス結果

少しわかりにくいですが、文字の大きさが変わっています。

カスタムレイアウトについて

特定の画面に特定のレイアウトを適用させましょう。

先ほどから登場しているサブページに特定のレイアウトを適用させます。

layoutsディレクトリ配下にsubpagelayout.vueを作成します。

subpageLayout.vue

<template>
  <div>
  　カスタムレイアウトのテスト
    <nuxt />
  </div>
</template>

作成したレイアウトファイルを適用させるために、subpage.vueファイルも編集しましょう。

subpage.vue

<template>
  <h1>サブページ</h1>
</template>

<script>
export default {
  layout: 'subpageLayout'
};
</script>

layoutプロパティを使用することで、作成したレイアウトファイルを適用しています。

アクセス結果

3.エラーページの実装について

404などのエラーが発生した場合にユーザ独自のエラーページを表示させることができます。

layoutsディレクトリにerror.vueファイルを作成します。

エラーの種類によって画面の制御が可能ですが、ここでは404が発生した時のページを作成します。

error.vue

<template>
 <div class="container">
    <h1 v-if="error.statusCode === 404">ページが見つかりません</h1>
    <h1 v-else>エラーが発生しました</h1>
  </div>
</template>

<script>
export default {
  props: ['error']
}
</script>

アクセス結果

4.HTMLヘッダーについて

Nuxt.jsでは、「nuxt.config.js」ファイル内でHTMLヘッダーについての設定が行えます。

npx create-nuxt-appコマンドでプロジェクトを作成した場合はデフォルトで以下のnuxt.config.jsファイルが用意されています。

nuxt.config.js

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

試しに、タブタイトルを変更してみましょう。

nuxt.config.js(一部抜粋)

 /*
  ** Headers of the page
  */
  head: {
    // title: process.env.npm_package_name || '',
    title: 'Hello World!!',
  },

アクセス結果

その他、フォントの変更なども可能です。

5.おわりに

いかがだったでしょうか。
記事を書いている最中に、カスタムレイアウトで定義したsytleが全ページコンポーネントに適用されてしまうという不具合(？)に遭遇したので、いずれそれも記事にしたいと思います。

それでは！

目次

1.アプリテンプレートについて

app.template.html

app.html

subpage.vue

アクセス結果

2. デフォルトレイアウト・カスタムレイアウトについて

デフォルトレイアウトについて

default.vue

defalut.vue(一部抜粋)

アクセス結果

カスタムレイアウトについて

subpageLayout.vue

subpage.vue

アクセス結果

3.エラーページの実装について

アクセス結果

4.HTMLヘッダーについて

アクセス結果

5.おわりに