Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Add slots to vue/order-in-components default order #2399

New issue
New issue
Closed
#2153
Closed
Add slots to vue/order-in-components default order#2399
#2153
Labels
accepted propositionbreaking changeenhancementsemver-major
@FloEdelmann

Description

@FloEdelmann
FloEdelmann
opened on Feb 7, 2024

What rule do you want to change?

vue/order-in-components

Does this change cause the rule to produce more or fewer warnings?

More.

How will the change be implemented? (New option, new default behavior, etc.)?

Add slots to default order. Currently, the default order is:

eslint-plugin-vue/lib/rules/order-in-components.js

Lines 14 to 76 in e936a15

const defaultOrder = [
// Side Effects (triggers effects outside the component)
'el',
// 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 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',
['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)
'asyncData', // for Nuxt
'data',
'fetch', // for Nuxt
'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)
['template', 'render'],
'renderError'
]

I'd propose to add the slots option after emits, in the Interface category. This is probably a breaking change, but we could argue that the slots option (which was introduced in Vue 3.3) is not in use for long, so intentionally breaking might be okay.

@ota-meshi what do you think?

Metadata

Metadata

Assignees

No one assigned

    Labels

    accepted propositionbreaking changeenhancementsemver-major

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions