diff options
| -rw-r--r-- | changelogs/unreleased/docs-update-vue-naming-guidelines.yml | 5 | ||||
| -rw-r--r-- | doc/development/fe_guide/style_guide_js.md | 10 |
2 files changed, 10 insertions, 5 deletions
diff --git a/changelogs/unreleased/docs-update-vue-naming-guidelines.yml b/changelogs/unreleased/docs-update-vue-naming-guidelines.yml new file mode 100644 index 00000000000..95bfd212370 --- /dev/null +++ b/changelogs/unreleased/docs-update-vue-naming-guidelines.yml @@ -0,0 +1,5 @@ +--- +title: Update vue component naming guidelines +merge_request: 17018 +author: George Tsiolis +type: other diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md index 02773162801..cd26baa4243 100644 --- a/doc/development/fe_guide/style_guide_js.md +++ b/doc/development/fe_guide/style_guide_js.md @@ -302,20 +302,20 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation. #### Naming 1. **Extensions**: Use `.vue` extension for Vue components. -1. **Reference Naming**: Use camelCase for their instances: +1. **Reference Naming**: Use PascalCase for their instances: ```javascript // bad - import CardBoard from 'cardBoard' + import cardBoard from 'cardBoard.vue' components: { - CardBoard: + cardBoard, }; // good - import cardBoard from 'cardBoard' + import CardBoard from 'cardBoard.vue' components: { - cardBoard: + CardBoard, }; ``` |