【ブログサイト開発其の4】
Nuxt.jsのファイル編集

  • 【ブログサイト開発其の4】
    Nuxt.jsのファイル編集

    Nuxt

    目次

    こんにちは〜！

    前回はNuxt.jsのディレクトリ構成についてを書いていきました！
    ここまでで、Nuxtの起動方法と、ディレクトリ構成の意味を確認できたかと思います。

    今回はNuxtのファイルを編集して実際にページを作成していきたいと思います。
    それではスタートです！

    index.vueの編集

    まずはトップページを編集していきます。

    TOPページはpagesディレクトリのindex.vueの内容が表示されています。
    なので、pages/index.vueを編集してトップページを変更していきましょう！

    index.vueの以下の箇所にトップページの記述をします。

    <!-- pages/index.vue -->
<template>
  <!-- ここに表示させるHTMLを記述 -->
</template>
<script>
export default {
 //ここにVue、Nuxtの処理を記述
}
</script>

    注意点として、<template>のルート要素（親ブロック）は一つしか持てません。

    <!-- pages/index.vue -->
<template>
<!-- ここに表示させるHTMLを記述 -->
  <div>
    <h1>見出し1</h1>
    <h2>見出し2</h2>
  </div>
</template>

    上記はOKですが、

    <!-- pages/index.vue -->
<template>
<!-- ここに表示させるHTMLを記述 -->
  <h1>見出し1</h1>
  <h2>見出し2</h2>
</template>

    上記はNGですので気をつけましょう。

    default.vueの編集

    layout/default.vueはNuxtのレイアウトの設定が記述されています。

    <!-- layout/default.vue -->
<template>
 <div>
  <Nuxt />
 </div>
</template>

    この<Nuxt />の記述は、pages/xxxx.vueの中身が表示される箇所になります。
    そのため、layout/default.vueにはヘッダー、フッターなど全てのページに共通で表示される記述をしていきましょう。

    パーツのコンポーネント化

    先程、layout/default.vueには全ページで共通で表示されるものを記述するといいました。
    私の場合は、ヘッダーとフッターを記述しています。

    <!-- layout/default.vue -->
<template>
 <div class="mainWrapper">
  <the-header />
     <Nuxt />
  <the-footer />
 </div>
</template>

    そのまま、ヘッダーとフッターの記述をdefault.vueに書いてもよいのですが、Nuxtを使用しているのとメンテナンス性を考えて、ヘッダーとフッターはコンポーネント化します。
    （もちろんdefault.vueに書いてってもOKです！）

    コンポーネントはcomponentsにvueファイルを作成していく形になります。
    ここでも注意点ですが、vueにはファイルやpropsなどの命名規則があります。

    例えば、
    ページごとに一つしか使われないコンポーネントには、「The」という接頭辞をつけ、パスカルケースにする規則があります。
    なので、こここでは、TheHeader.vue、TheFotter.vueと命名してファイルを作成しましょう。

    参考
    【Vue】単一ファイルコンポーネントの命名規則まとめ【ファイル名から記法まで】


    TheHeader.vue、TheFotter.vueを作成したら、layout/default.vueに作成したヘッダー、フッターコンポーネントを呼び出す記述をしていきます。

    <!-- layout/default.vue -->
<template>
 <div class="mainWrapper">
  <the-header />
    <Nuxt />
  <the-footer />
 </div>
</template>

    作成したコンポーネントを呼び出す際も注意点があり、DOMテンプレートの中ではケバブケースでの記述を推奨します。
    これはHTMLが大文字、少文字を区別しないということがあるからです。

    ここまでで、ヘッダー、フッターのコンポーネントを作成し、そのコンポーネントを呼び出すことができました！

    vueファイル内でのcss記述

    私の場合は、scssファイルを用意し、そこにサイト全体のスタイリングを記述しています。
    ただ、Nuxtにはvueファイル単位でstyleを書くことができます。

    <!-- example -->
<template>
  <h1>{{ heading1 }}</h1>
</template>
<script>
export default {
 data(){
  return {
   heading1: '見出し1'
  }
 }
}
</script>
<style scoped>
  h1{
   color: #ff0000
  }
</style>

    このようにvueファイルに内にstyleタグを記述しその中にcssを記述することで設定できます。

    ここで、styleタグに見慣れないscoped属性がついています。

    このscoped属性で設定すると、「data-v-XXXX」という属性が自動的にHTMLに付き、
    他ファイルに影響されない、css設定ができます。

    cssに関しては個人の好みもありますので、「cssファイルを作成する」でもいいですし、
    「vueファイル内でscoped属性で記述」するどちらでもOKです。

    お好きな方法で自分のサイトをスタイリングしてください！

    vueファイル内での画像パス

    例えば画像を設定する際、

    <!-- HTML -->
<img src="/assets/img/article/thumb/thumb_01.jpg" alt="" />
<!-- CSS -->
<style>
  .hogehoge {
    background-image: url('/assets/img/visual-home.jpg');
  }
</style>

    などのようにルートからの記述で書くと思いますが、この記述ですと画像が読み込めません。

    これは、Nuxtで最終的にファイルを生成する場合、/_nuxt/assets/~~という風に、_nuxtディレクトリが生成されるためです。

    そのため、vueファイル内の画像パスは以下のように「~@」を先頭につけて、ルートからの読み込みができるように記述が必要です。

    <!-- HTML -->
<img src="~@/assets/img/article/thumb/thumb_01.jpg" alt="" />
<!-- CSS -->
<style>
  .hogehoge {
    background-image: url('~@/assets/img/visual-home.jpg');
  }
</style>

    以下の記事が参考になりますので、こちらも参照しつつ設定してみてください。

    参考
    【Nuxt.js】imgファイルの指定方法について


    また、vue内の処理で変数に画像パスを入れたとします。

    <!-- example -->
<template>
<h1><img :src="heading1Img" alt=""></h1>
</template>
<script>
export default {
 data(){
  return {
   heading1Img: '~@/assets/img/article/thumb/thumb_01.jpg'
  }
 }
}
</script>

    こうすると、~@/assets/img/article/thumb/thumb_01.jpgという画像パスの文字列がそのままsrc属性に入るため、画像が表示されません。

    この場合の対処法としては、画像パスをrequireで囲み画像パスとして認識させます。

    <!-- example -->
<template>
<h1><img :src="heading1Img" alt=""></h1>
</template>
<script>
export default {
 data(){
  return {
   heading1Img: require('@/assets/img/article/thumb/thumb_01.jpg')
  }
 }
}
</script>

    これで画像が表示されると思います！

    しかしこれらは、assetsディレクトリに格納している画像に対しての方法です。

    対して、staticディレクトリに入っているものは以前お伝えしたとおり、

    サーバーに直接アップしたいファイルを格納する場所になります。

    ということなので、
    faviconやstaticディレクトリに格納しているファイルは、スラッシュからのルート記述で読み込むことができます。

    <!-- example -->
<template>
<h1><img :src="heading1Img" alt=""></h1>
</template>
<script>
export default {
 data(){
  return {
   //staticディレクトリに以下の画像が入っている場合
   heading1Img: '/img/article/thumb/thumb_01.jpg'
  }
 }
}
</script>

    ここらへんの画像パス関係は私もなんでだろうと大分調べながらやりましたので、みなさんの助けになると幸いです。

    次回

    今回は、

    • ・トップページの編集
    • ・ページ共通パーツをコンポーネント化（ヘッダー、フッター）
    • ・default.vueでコンポーネントパーツをの読み込み
    • ・vueファイル内でのcss設定
    • ・画像パスの読み込み

    を書いていきいました。

    これでトップページや全体に関わるレイアウトは作成できるかと思います。

    次回は、トップページ以外のページを作成する方法をお伝えしたいと思いますので、
    次回もお楽しみください！

    それでは次回もゆたしく〜〜

    記事一覧に戻る

記事をシェアする