Skip to content

[Feature Request] Support types of directives #21475

Closed
@kingyue737

Description

@kingyue737

Problem to solve

Vue 3.5 has support typed directives in template. vuejs/core#3399

I tried to define some Vuetify directives locally and they work fine:

import type { Directive } from 'vue'

export {}

declare module 'vue' {
  export interface GlobalDirectives {
    vTooltip: Directive<HTMLElement, string | { text: string, location: 'top' | 'left' }>
    vRipple: Directive<
      HTMLElement,
      boolean | { class: string },
      'center' | 'circle' | 'stop'
    >
  }
}

effect:

Image

Proposed solution

Vuetify can define the types of directives to extend the Directive type provided by Vue and provide them globally, like components:

declare module 'vue' {
  export interface GlobalDirectives {
    vTooltip: (typeof import('vuetify/directives'))['Tooltip']
    vRipple: (typeof import('vuetify/directives'))['Ripple']
    vClickOutside: (typeof import('vuetify/directives'))['ClickOutside']
    vScroll: (typeof import('vuetify/directives'))['Scroll']
    vMutate: (typeof import('vuetify/directives'))['Mutate']
    vIntersect: (typeof import('vuetify/directives'))['Intersect']
    vTouch: (typeof import('vuetify/directives'))['Touch']
  }
}

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions