Vueと共通

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

前置き

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


構成

アトミックデザイン

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

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

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

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

directory

components/
--| templates/
----| navs
------| NavBread.vue

pages/
--| index.vue


使用するもの

CSS

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でアンダーラインをつけています♪


まとめ

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

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

-Vueと共通
-,

© 2021 aLiz Nuxt