Vueコンポーネントの強く推奨される名付け方

Vueの公式ドキュメントが強く推奨するVueコンポーネントのファイル名の命名規則。

単一ファイルコンポーネント

• 単一ファイルコンポーネントのファイル名はPascalCaseかkebab-case。
• mycomponent.vue、myComponent.vue
• MyComponent.vue、my-component.vue

ベースコンポーネント

• 頻繁に使われるベースコンポーネント(ステートを持たないDumpコンポーネントやPureコンポーネントと呼ばれるもの)は、Base、AppまたはVで始めないとならない。
• MyComponent.vue VueTable.vue Icon.vue
• BaseButton.vue AppTable.vue VIcon.vue

シングルインスタンスコンポーネント

• シングルインスタンスコンポーネント(1ページにつき1個しか使われないコンポーネント)は、Theを付ける。
• Heading.vue SideBar.vue
• TheHeading.vue TheSideBar.vue

強い結合関係にあるコンポーネント

• 親子関係にあるようなコンポーネント群は、親コンポーネントの名前を子コンポーネントの接頭辞にする。
• エディタでファイル一覧を出した時、関連性のあるコンポーネントがまとまるようにするため。

TodoList.vue
TodoItem.vue
TodoButton.vue
SearchSidebar.vue
NavigationForSearchSidebar.vue

TodoList.vue
TodoListItem.vue
TodoListItemButton.vue
SearchSidebar.vue
SearchSidebarNavigation.vue

出典

• Vue.js