From 423a6ba81fdb76521a190d6dc64947ebc091218d Mon Sep 17 00:00:00 2001 From: Flo Edelmann Date: Wed, 22 Apr 2020 21:35:29 +0200 Subject: [PATCH 1/4] Add other Nuxt properties --- lib/rules/order-in-components.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/lib/rules/order-in-components.js b/lib/rules/order-in-components.js index 65ba64f16..7f683a82d 100644 --- 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,10 @@ const defaultOrder = [ 'mixins', ['provide', 'inject'], // for Vue.js 2.2.0+ + // Page Validation (determines if the router request is suitable) + 'middleware', // for Nuxt + 'validate', // for Nuxt + // Interface (the interface to the component) 'inheritAttrs', 'model', @@ -49,6 +54,7 @@ const defaultOrder = [ // Events (callbacks triggered by reactive events) 'watch', + 'watchQuery', // for Nuxt 'LIFECYCLE_HOOKS', // Non-Reactive Properties (instance properties independent of the reactivity system) @@ -56,8 +62,12 @@ const defaultOrder = [ // Rendering (the declarative description of the component output) 'head', // for Nuxt + 'layout', // for Nuxt ['template', 'render'], - 'renderError' + 'renderError', + 'transition', // for Nuxt + 'loading', // for Nuxt + 'scrollToTop' // for Nuxt ] const groups = { From 4ac0671c26c0473f04a292b960b8fe75e569e890 Mon Sep 17 00:00:00 2001 From: Flo Edelmann Date: Wed, 22 Apr 2020 21:37:52 +0200 Subject: [PATCH 2/4] Add Vue Router's navigation guard properties --- lib/rules/order-in-components.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/lib/rules/order-in-components.js b/lib/rules/order-in-components.js index 7f683a82d..36bc6a62e 100644 --- a/lib/rules/order-in-components.js +++ b/lib/rules/order-in-components.js @@ -31,6 +31,7 @@ const defaultOrder = [ ['provide', 'inject'], // for Vue.js 2.2.0+ // Page Validation (determines if the router request is suitable) + 'ROUTER_GUARDS', // for Vue Router 'middleware', // for Nuxt 'validate', // for Nuxt @@ -87,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' ] } From ec70f8b89caf8f89b31e8fb8281d8430cc53e21a Mon Sep 17 00:00:00 2001 From: Flo Edelmann Date: Wed, 22 Apr 2020 22:01:38 +0200 Subject: [PATCH 3/4] Update rule docs --- docs/rules/order-in-components.md | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md index 25c62fe88..4c9d4b2a1 100644 --- 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", + "middleware", + "validate", "inheritAttrs", "model", ["props", "propsData"], + "emits", + "setup", "fetch", "asyncData", "data", "computed", "watch", + "watchQuery", "LIFECYCLE_HOOKS", "methods", "head", + "layout", ["template", "render"], - "renderError" + "renderError", + "transition", + "loading", + "scrollToTop" ] }] } ``` -- `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 From 0aa076527912fb4b830da0a3747b171a274f1a87 Mon Sep 17 00:00:00 2001 From: Flo Edelmann Date: Mon, 8 Jun 2020 20:35:07 +0200 Subject: [PATCH 4/4] Change order according to feedback --- docs/rules/order-in-components.md | 12 ++++++------ lib/rules/order-in-components.js | 14 +++++++------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md index 4c9d4b2a1..81708c9f1 100644 --- a/docs/rules/order-in-components.md +++ b/docs/rules/order-in-components.md @@ -74,8 +74,12 @@ export default { "mixins", ["provide", "inject"], "ROUTER_GUARDS", + "layout", "middleware", "validate", + "scrollToTop", + "transition", + "loading", "inheritAttrs", "model", ["props", "propsData"], @@ -84,18 +88,14 @@ export default { "fetch", "asyncData", "data", + "head", "computed", "watch", "watchQuery", "LIFECYCLE_HOOKS", "methods", - "head", - "layout", ["template", "render"], - "renderError", - "transition", - "loading", - "scrollToTop" + "renderError" ] }] } diff --git a/lib/rules/order-in-components.js b/lib/rules/order-in-components.js index 36bc6a62e..29c34f26d 100644 --- a/lib/rules/order-in-components.js +++ b/lib/rules/order-in-components.js @@ -30,10 +30,14 @@ const defaultOrder = [ 'mixins', ['provide', 'inject'], // for Vue.js 2.2.0+ - // Page Validation (determines if the router request is suitable) + // 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', @@ -51,6 +55,7 @@ const defaultOrder = [ 'fetch', // for Nuxt 'asyncData', // for Nuxt 'data', + 'head', // for Nuxt 'computed', // Events (callbacks triggered by reactive events) @@ -62,13 +67,8 @@ const defaultOrder = [ 'methods', // Rendering (the declarative description of the component output) - 'head', // for Nuxt - 'layout', // for Nuxt ['template', 'render'], - 'renderError', - 'transition', // for Nuxt - 'loading', // for Nuxt - 'scrollToTop' // for Nuxt + 'renderError' ] const groups = {