Improve documentation on Vue component naming conventions

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Description

The official Vue Style Guide includes some Component Naming Conventions. This includes various options when registering and referencing a component within HTML templates.

Proposal

Given the existing codebase and some discussions during some merge requests here are some notes that are worth giving some extra thought.

1. Extend the style guide documentation (current, to be merged) on naming (as discussed in https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17533#note_62041970):

Use PascalCase for component names, snake_case for file names and their equivalents kebab-case for templates.

2. Drop any redundant filename prefix or suffix (as discussed in https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17533#note_62049788):

Don't use the _component suffix and any vue_ or component_ prefix on the filename.

3. Don't include component prefix in the component name (as discussed in https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/17533#note_62068669): (Removed as discussed in https://gitlab.com/gitlab-org/gitlab-ce/issues/44261#note_69000226).

A component name should be List, not BoardList.

4. Use/Don't use a filename suffix for filters, mixins, models, services, stores. There is quite a lot of mix regarding this.

Notes: Regarding 3, there is usually a main component which references most (if not all) of the rest of the components. That could be named Boards.

@jschatz1 @iamphill @fatihacet @filipa @ClemMakesApps @mikegreiling what do you think? 🥝