Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upAdd Nuxt and Vue Router properties in `order-in-components` #1107
Conversation
|
Thank you for this PR! I think it's good to add Nuxt properties as standard. |
|
@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
force-pushed the
FloEdelmann:order-in-component-nuxt
branch
from
82c305a
to
ec70f8b
|
@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 |
|
@FloEdelmann Thank you for update. Hi @manniL. |
| "LIFECYCLE_HOOKS", | ||
| "methods", | ||
| "head", | ||
| "layout", |
Atinux
Jun 8, 2020
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
FloEdelmann
Jun 8, 2020
•
Author
Contributor
@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',
Atinux
Jun 8, 2020
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",
]
}]
FloEdelmann
Jun 8, 2020
Author
Contributor
Thanks, I've updated the PR to reflect the suggested order (0aa0765).
@ota-meshi Is this order acceptable for you?
|
Looks good to me! |
Closes #980.