Skip to content

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

Closed
@FloEdelmann

Description

@FloEdelmann

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:

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

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions