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.

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

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

merged 4 commits into from Jun 9, 2020

Conversation

FloEdelmann
Copy link
Member

Closes #980.

@ota-meshi
Copy link
Member

Thank you for this PR!

I think it's good to add Nuxt properties as standard.
But I'm not sure if this order is acceptable to Nuxt developers.
Is there a documented recommended Nuxt property order?

@FloEdelmann
Copy link
Member Author

FloEdelmann commented Apr 23, 2020

@ota-meshi Unfortunately, as far as I know, there is no recommended property order.

@Atinux and @alexchopin from the @nuxt core team: Are there plans to add a style guide similar to Vue's to the Nuxt documentation? Is the order suggested in this PR suitable? Could it maybe fit into the Views > Pages section in the docs?

@FloEdelmann
Copy link
Member Author

FloEdelmann commented Jun 7, 2020

@ota-meshi I updated the pull request to reflect your changes for Vue 3 (#1181). Unfortunately, none of the Nuxt maintainers has responded to any of the issues yet 🙁

@ota-meshi
Copy link
Member

ota-meshi commented Jun 7, 2020

@FloEdelmann Thank you for update.

Hi @manniL.
Can you review if this order is common to Nuxt developers?

"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?

Copy link
Member

@ota-meshi ota-meshi left a comment

Choose a reason for hiding this comment

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

Looks good to me!
Thank you for your contribution @FloEdelmann!
Thank you for your reviews and opinions @Atinux, @alexchopin and @pi0!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add all Nuxt properties in order-in-components
3 participants