【Nuxt.js】Nuxt実践編：パンくずリストを作ろう

前置き

今回はパンくずリストを作成します🍞
すごくシンプルに、
コンポーネント作成のコツを
簡単に理解できるので
ぜひやってみてください✨💪

構成

アトミックデザイン

⬇️アトミックデザインや
分け方についてはこちら
【Nuxt.js】Nuxt番外編： アトミックデザインにおけるフォルダの分け方と サンプル集

他にもいくつか書いているので
ブログ内で検索してみてください🔍

パンくずリストはナビの役割なので
templatesに入れています🎈🧸

また、パンくずリストは
ヘッダーに入れたりするのが基本ですが、
今回は表示ができれば良いので
index.vueでimportしてもらえればOKです🙆‍♀️

使用するもの

CSS

fontsize: 12px;
color: rgba(0, 134, 231, 0.8);

1 2	fontsize: 12px; color: rgba(0, 134, 231, 0.8);

paddingは大体で良いです💡

⬇️横並びはFlexboxにしましょう！
【Nuxt.js】Nuxt実践編：Flexboxを使おう！

template

ABOUTページを開いている状態で、
TOPへのリンクをしてください🌟

また、画像はSVGを使用してみましょう！
できる方はSVGコンポーネントを作成しましょう🧙‍♀️
https://iconmonstr.com/arrow-25-svg/

Let's try!

まずは答えを見ずにやってみましょう♪

ticktack…

答え

Point!

1番外側のタグ(今回はdiv class="nav")
にはなるべくCSSをあてない

基本的にcontainerにCSSをあてます。
外側にやるのはbackground-colorなど。
外側としての役割と
中身の役割をしっかり分けます✂︎

nuxt-link to="/"

topへのリンクなので
aタグではなく
ルーティングを活かした
nuxt-linkを使います🍒

SVG

他の部分で色違いを使うことを考え
SVGにしてみました。
答えのコードはコンポーネント化していますが
iconmonstrのコードをそのまま
コピペでももちろんOKです❤️🙆‍♀️

⬇️SVGのメリットや
　コンポーネント化については
　こちらをご覧ください✨👀
【Nuxt.js】Nuxt番外編：SVGのコンポーネント化でスッキリ管理

SVGの両方にmarginをつけることで
パンくずが長くなっても等間隔になりますね🌟
わざわざflexboxのjustify-contentを
指定しなくてもOKです♪

class名

txtを2箇所に使うことで
&.txt-linkでアンダーラインをつけています♪

<template>
  <div class="nav nav-breadcrumb section">
    <div class="container">
      <nuxt-link
        class="txt txt-link"
        to="/"
      >
        TOP
      </nuxt-link>
      <svg
        class="arw"
        viewBox="0 0 8 9"
      >
        <use xlink:href="#arrow-right" />
      </svg>
      <p class="txt">
        ABOUT
      </p>
    </div>
  </div>
</template>

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

export default Vue.extend({})
</script>

<style lang="scss" scoped>
  .nav-breadcrumb {
    > .container {
      display: flex;
      align-items: center;
      padding: 13px 0;

      > .arw {
        width: 8px;
        margin: 0 8px;
        fill: rgba(0, 134, 231, 0.8);;
      }

      > .txt {
        font-size: 12px;
        color: rgba(0, 134, 231, 0.8);

        &.txt-link {
          text-decoration: underline;
        }
      }
    }
  }
</style>

<nuxt-link

class="txt txt-link"

to="/"

TOP

</nuxt-link>

<svg

class="arw"

viewBox="0 0 8 9"

</svg>

ABOUT

</p>

</div>

</template>

import Vue from 'vue'

export default Vue.extend({})

</script>

.nav-breadcrumb {

> .container {

display: flex;

align-items: center;

padding: 13px 0;

> .arw {

width: 8px;

margin: 0 8px;

fill: rgba(0, 134, 231, 0.8);;

}

> .txt {

font-size: 12px;

color: rgba(0, 134, 231, 0.8);

&.txt-link {

text-decoration: underline;

}

</style>

まとめ

基礎的なことですが、
無駄なことをせず
よりベストな状態に近づけることは
とても大事ですね💕

こちらもチャレンジしてみてください🔥
ページによってパンくずリストの
表示を切り替えます💫
【Nuxt.js】Nuxt実践編：route.nameで表示/非表示を切り替える