「Atomic Design × Nuxt.js」で破綻しにくい実装を目指すために決めたコンポーネント毎の責務 | aumo Tech Blog – アウモテックブログ

ATOMS、MOLECULES、ORGANISMSをcomponentsディレクトリ以下に配置しています。TEMPLATESはNuxt.jsではlayoutsディレクトリがデフォルトで存在するので、そちらに配置しています。PAGESも同様にNuxt.jsではpagesディレクトリがデフォルトで存在するので、そちらに配置しています。 コンポーネントとコンポネート間のデータやりとり 各コンポーネント毎にサンプルコードをベースにし、どのように使用しているのか説明していきます。 ATOMS、MOLECULES、ORGANISMSについて ATOMS 最小単位のパーツでボタンやラベルなどが当てはまります。細かなデザインの違い毎に分割するのではなく、CSSを用意してClassを変えることで異なるデザインが反映されるようにしています。CSSでmarginは持たせないようにします。 データのやり取りについ