Atomic Design ってなに？

ボタンやテキスト入力欄などの、最小単位のUI部品を組み合わせてレイアウトを構築する設計手法。
部品の単位に名前がついている。

例えば、Qiita のヘッダーに Atomic Design を適用してみる。

こんな感じ。

赤：Atoms
青：Molecules
黄：Organisms

Nuxt のディレクトリ構成に適用する

/components は /components/atoms みたいな感じで分ける。

Organisms のコンポーネントを使わない
Molecules を2つ使って Molecules を構成することも可能
- 3つ以上だと Organisms にするのをおすすめ
- ここはプロジェクトにおけるルールに従う

子コンポーネントのボタンを作るとき、中身に <slot /> を入れる。

Children.vue

<button>
  <slot />
</button>

親コンポーネントで中身を記述できる。

Parent.vue

<children>
  {{ text }}
</children>

名前付きスロットを使うと、個別にスロットを指定できる。

Children.vue

<div>
  <slot name="hoge" />
  <slot name="fuga" />
</div>

Parent.vue

<children>
  <template #hoge>
    {{ hogeText }}
  </template>   
  <template #fuga>
    {{ fugaText }}
  </template>
</children>

便利なものだけど、状況に応じて使い分けよう！