Add Nuxt and Vue Router properties in order-in-components (#1107)

* Add other Nuxt properties * Add Vue Router's navigation guard properties * Update rule docs * Change order according to feedback
vuejs · Jun 9, 2020 · 1823583 · 1823583
1 parent ad70c98
commit 1823583
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
@@ -65,31 +65,48 @@ export default {
     "order": [
       "el",
       "name",
+      "key",
       "parent",
       "functional",
       ["delimiters", "comments"],
       ["components", "directives", "filters"],
       "extends",
       "mixins",
+      ["provide", "inject"],
+      "ROUTER_GUARDS",
+      "layout",
+      "middleware",
+      "validate",
+      "scrollToTop",
+      "transition",
+      "loading",
       "inheritAttrs",
       "model",
       ["props", "propsData"],
+      "emits",
+      "setup",
       "fetch",
       "asyncData",
       "data",
+      "head",
       "computed",
       "watch",
+      "watchQuery",
       "LIFECYCLE_HOOKS",
       "methods",
-      "head",
       ["template", "render"],
       "renderError"
     ]
   }]
 }
 ```
 
-- `order` (`(string | string[])[]`) ... The order of properties. Elements are the property names or `LIFECYCLE_HOOKS`. If an element is the array of strings, it means any of those can be placed there unordered. Default is above.
+- `order` (`(string | string[])[]`) ... The order of properties. Elements are the property names or one of the following groups:
+
+  - `LIFECYCLE_HOOKS`: [Vue Lifecycle Events](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram), in the order they are called
+  - `ROUTER_GUARDS`: [Vue Router Navigation Guards](https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards), in the order they are called
+
+  If an element is an array of strings, it means any of those can be placed there unordered. Default is above.
 
 
 ## :books: Further reading

diff --git a/lib/rules/order-in-components.js b/lib/rules/order-in-components.js
@@ -13,6 +13,7 @@ const defaultOrder = [
 
   // Global Awareness (requires knowledge beyond the component)
   'name',
+  'key', // for Nuxt
   'parent',
 
   // Component Type (changes the type of the component)
@@ -29,6 +30,15 @@ const defaultOrder = [
   'mixins',
   ['provide', 'inject'], // for Vue.js 2.2.0+
 
+  // Page Options (component rendered as a router page)
+  'ROUTER_GUARDS', // for Vue Router
+  'layout', // for Nuxt
+  'middleware', // for Nuxt
+  'validate', // for Nuxt
+  'scrollToTop', // for Nuxt
+  'transition', // for Nuxt
+  'loading', // for Nuxt
+
   // Interface (the interface to the component)
   'inheritAttrs',
   'model',
@@ -45,17 +55,18 @@ const defaultOrder = [
   'fetch', // for Nuxt
   'asyncData', // for Nuxt
   'data',
+  'head', // for Nuxt
   'computed',
 
   // Events (callbacks triggered by reactive events)
   'watch',
+  'watchQuery', // for Nuxt
   'LIFECYCLE_HOOKS',
 
   // Non-Reactive Properties (instance properties independent of the reactivity system)
   'methods',
 
   // Rendering (the declarative description of the component output)
-  'head', // for Nuxt
   ['template', 'render'],
   'renderError'
 ]
@@ -77,6 +88,11 @@ const groups = {
     'renderTracked', // for Vue.js 3.x
     'renderTriggered', // for Vue.js 3.x
     'errorCaptured' // for Vue.js 2.5.0+
+  ],
+  ROUTER_GUARDS: [
+    'beforeRouteEnter',
+    'beforeRouteUpdate',
+    'beforeRouteLeave'
   ]
 }