Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from Jun 9, 2020
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
423a6ba
Add other Nuxt properties
FloEdelmann Apr 22, 2020
4ac0671
Add Vue Router's navigation guard properties
FloEdelmann Apr 22, 2020
ec70f8b
Update rule docs
FloEdelmann Apr 22, 2020
0aa0765
Change order according to feedback
FloEdelmann Jun 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 19 additions & 2 deletions docs/rules/order-in-components.md
View file
Open in desktop
Expand Up @@ -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",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From my POV, I believe that Nuxt properties should be at least before methods, I don't want to scroll til the end to see what special properties my page has

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Atinux Thanks for your answer. What do you think about the following?

  // Global Awareness (requires knowledge beyond the component)
  'name',
+ 'key', // for Nuxt
  'parent',

  // Component Type (changes the type of the component)
  'functional',

  // Template Modifiers (changes the way templates are compiled)
  ['delimiters', 'comments'],

  // Template Dependencies (assets used in the template)
  ['components', 'directives', 'filters'],

  // Composition (merges properties into the options)
  'extends',
  '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
+ 'middleware', // for Nuxt
+ 'validate', // for Nuxt
+ 'layout', // for Nuxt
+ 'transition', // for Nuxt
+ 'loading', // for Nuxt
+ 'scrollToTop', // for Nuxt

  // Interface (the interface to the component)
  'inheritAttrs',
  'model',
  ['props', 'propsData'],
  'emits', // for Vue.js 3.x

  // Note:
  // The `setup` option is included in the "Composition" category,
  // but the behavior of the `setup` option requires the definition of "Interface",
  // so we prefer to put the `setup` option after the "Interface".
  'setup', // for Vue 3.x

  // Local State (local reactive properties)
  'fetch', // for Nuxt
  'asyncData', // for Nuxt
  'data',
  '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',

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After talking with @alexchopin and @pi0, we suggest the following:

{
  "vue/order-in-components": ["error", {
    "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",
      ["template", "render"],
      "renderError",
    ]
  }]

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I've updated the PR to reflect the suggested order (0aa0765).

@ota-meshi Is this order acceptable for you?

["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
Expand Down
18 changes: 17 additions & 1 deletion lib/rules/order-in-components.js
View file
Open in desktop
Expand Up @@ -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)
Expand All @@ -29,6 +30,11 @@ const defaultOrder = [
'mixins',
['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

// Interface (the interface to the component)
'inheritAttrs',
'model',
Expand All @@ -49,15 +55,20 @@ const defaultOrder = [

// 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
'layout', // for Nuxt
['template', 'render'],
'renderError'
'renderError',
'transition', // for Nuxt
'loading', // for Nuxt
'scrollToTop' // for Nuxt
]

const groups = {
Expand All @@ -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'
]
}

Expand Down