Help us understand the problem. What is going on with this article?

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

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

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

「components」ディレクトリの規約(案)

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

格納するファイル

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

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

ディレクトリ構成

componentsはシンプルに保つために「layouts」「pages」「ui」の3つに分けます。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経由で登録を行うことで、どこからでも呼び出せるようにします。

1)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="h2タイトル" sub="h2-hdding" lank="h2" />
      <p>コンテンツ</p>
      <BaseHr />
      <BaseButtonReadmore to="/yourDir/" />
    </BaseSection>
  </div>
</template>

おまけ

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

何はともあれ…

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

更新履歴

  • 2020/2/4 pugをhtml表記に修正しました。文言を少しリライトしました。
  • 2020/2/5 コンポーネントの命名規則をスタイルガイドに合わせました。
amishiro
5年近く作っていた自作テンプレートから離れて、最近はnuxtで開発してる。フロントエンドの未来は明るい。寂しいのでフォロープリーズ。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした