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

🎈 この記事はWP専用です
https://wp.me/pc9NHC-S8

#前置き

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

#構成
##アトミックデザイン
⬇️アトミックデザインや
分け方についてはこちら

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

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

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

file

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

pages/
--| index.vue

##使用するもの
###CSS

NavBread.vue

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!
まずは答えを見ずにやってみましょう♪

#答え
🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-S8