Re-arrange <script> tags before <template> tags in .vue files3612-update-script-template-order-in-vue-files

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/38743

1 files changed, 20 insertions, 1 deletions

diff --git a/doc/development/fe_guide/style_guide_js.md b/doc/development/fe_guide/style_guide_js.md
index c8d23609280..77ae6d2a0ea 100644
--- a/doc/development/fe_guide/style_guide_js.md
+++ b/doc/development/fe_guide/style_guide_js.md
@@ -470,7 +470,25 @@ On those a default key should not be provided.
   ```
 
 #### Ordering
-1. Order for a Vue Component:
+
+1. Tag order in `.vue` file
+
+  ```
+  <script>
+    // ...
+  </script>
+
+  <template>
+    // ...
+  </template>
+
+  // We don't use scoped styles but there are few instances of this
+  <style>
+    // ...
+  </style>
+  ```
+
+1. Properties in a Vue Component:
   1. `name`
   1. `props`
   1. `mixins`
@@ -490,6 +508,7 @@ On those a default key should not be provided.
   1. `beforeDestroy`
   1. `destroyed`
 
+
 #### Vue and Bootstrap
 
 1. Tooltips: Do not rely on `has-tooltip` class name for Vue components