nuxt.jsにおける「components」ディレクトリの規約（案）

nuxt.jsでは、特殊な事情がない限り３つのディレクトリにコンポーネントファイルが格納されます。layouts pagesディレクトリについては公式ドキュメントを参考にし、残りのcomponentsディレクトリについてオリジナルの規約（整理方法)を定めてます。後々喧嘩にならならないように。

• /layouts
• /pages
• /components <- オリジナルの規約について

「components」ディレクトリの規約（案）

規約はいいすぎ？以下は至極基礎的な案なので、みんな仲良く話し合えばいいと思います。

格納するファイル

componentsディレクトリに格納するのは、「再利用可能」もしくは「複数回利用」するコンポーネントと定めます。

• 再利用可能なコンポーネント
  • 他プロジェクトでも流用する可能性がある
  • 他プロジェクトでも必ず作成するから置き場を固定したい
• 複数回利用するコンポーネント
  • UIに関するコンポーネント
  • カテゴリ単位で使い回すコンポーネントなど

ディレクトリ構成

componentsはシンプルに保つために「layouts」「pages」「ui」の３つに分けます。nuxt.jsの規約に合わせるでこと悩む時間を削減します。

• /components
  • /layouts
    • header・footer要素など、レイアウトに関係するコンポーネント
    • プロジェクトをまたいで再利用されやすい
  • /pages
    • だいたいカテゴリ（ページ）単位で流用するコンポーネント
    • 再利用されないけど、複数回利用されやすい
  • /ui
    • 名前まんまで、ボタンとかuiのコンポーネント
    • プロジェクトをまたいでの再利用もサイト内でも利用もされまくり
    • いうなれば自分たちの資産の塊だから大事にしようね

呼び出し方法について

「layouts」と「pages」は、個別にコンポーネントを登録しても手間はありません。「ui」は肥大化しがちなので一括で登録します。

個別登録＆呼び出し（例）

layouts/default.vue

<template>
  <div class="layouts">
    <header class="layouts__header">
      <l-header />
      <l-nav />
    </header>
    <main class="layouts__main">
      <nuxt />
    </main>
    <footer class="layouts__footer">
      <l-footer />
    </footer>
  </div>
</template>

<script>
import LHeader from '~/components/layouts/header'
import LNav from '~/components/layouts/nav'
import LFooter from '~/components/layouts/footer'

export default {
  components: {
    LlHeader,
    LNav,
    LFooter,
    ...
  },
  ...
}
</script>

一括登録＆呼び出し（例）

plugins経由で登録を行うことで、どこからでも呼び出せるようにします。

１）ui.jsを作成

plugins/ui.js

import Vue from 'vue'


import TthTitle from '~/components/ui/TheTitle'
import BaseSection from '~/components/ui/BaseSection'
import BaseHr from '~/components/ui/BaseHr'
import BaseHeading from '~/components/ui/BaseHeading'
import BaseButtonReadmore from '~/components/ui/BaseButtonReadmore'

Vue.mixin({
  components: {
    TheTitle,
    BaseSection,
    BaseHr,
    BaseHeading,
    BaseButtonReadmore
  }
})

2)ui.jsをnuxt.confing.jsに登録

nuxt.config.js

module.exports = {
  plugins: [
    '~plugins/ui',
    ...
  ],
  ...
}

3)呼び出しテスト

test.vue

<template>
  <div>
    <TheTitle title="規約大好き" sub="love" />
    <BaseSection>
      <BaseHeading title="h２タイトル" sub="h2-hdding" lank="h2" />
      <p>コンテンツ</p>
      <BaseHr />
      <BaseButtonReadmore to="/yourDir/" />
    </BaseSection>
  </div>
</template>

---

おまけ

アトミックデザインは優秀だと思いますが、何でもかんでもアトミックボンバー…はやりすぎと感じるところです。小規模ならば、少し決め事しておくだけでいいと思います。いろんな案があると思いますので、ご意見お待ちしております。

何はともあれ…

シンプルに生きたいのです。

更新履歴

• 2020/2/4　pugをhtml表記に修正しました。文言を少しリライトしました。
• 2020/2/5 コンポーネントの命名規則をスタイルガイドに合わせました。