Utility Types ​

PropType<T> ​

Used to annotate a prop with more advanced types when using runtime props declarations.

• Example

  ts

  import type { PropType } from 'vue'
  
  interface Book {
    title: string
    author: string
    year: number
  }
  
  export default {
    props: {
      book: {
        // provide more specific type to `Object`
        type: Object as PropType<Book>,
        required: true
      }
    }
  }

• See also Guide - Typing Component Props

MaybeRef<T> ​

Alias for T | Ref<T>. Useful for annotating arguments of Composables.

• Only supported in 3.3+.

MaybeRefOrGetter<T> ​

Alias for T | Ref<T> | (() => T). Useful for annotating arguments of Composables.

• Only supported in 3.3+.

ExtractPropTypes<T> ​

Extract prop types from a runtime props options object. The extracted types are internal facing - i.e. the resolved props received by the component. This means boolean props and props with default values are always defined, even if they are not required.

To extract public facing props, i.e. props that the parent is allowed to pass, use ExtractPublicPropTypes.

• Example

  ts

  const propsOptions = {
    foo: String,
    bar: Boolean,
    baz: {
      type: Number,
      required: true
    },
    qux: {
      type: Number,
      default: 1
    }
  } as const
  
  type Props = ExtractPropTypes<typeof propsOptions>
  // {
  //   foo?: string,
  //   bar: boolean,
  //   baz: number,
  //   qux: number
  // }

ExtractPublicPropTypes<T> ​

Extract prop types from a runtime props options object. The extracted types are public facing - i.e. the props that the parent is allowed to pass.

• Example

  ts

  const propsOptions = {
    foo: String,
    bar: Boolean,
    baz: {
      type: Number,
      required: true
    },
    qux: {
      type: Number,
      default: 1
    }
  } as const
  
  type Props = ExtractPublicPropTypes<typeof propsOptions>
  // {
  //   foo?: string,
  //   bar?: boolean,
  //   baz: number,
  //   qux?: number
  // }

ComponentCustomProperties ​

Used to augment the component instance type to support custom global properties.

• Example

  ts

  import axios from 'axios'
  
  declare module 'vue' {
    interface ComponentCustomProperties {
      $http: typeof axios
      $translate: (key: string) => string
    }
  }

  TIP

  Augmentations must be placed in a module .ts or .d.ts file. See Type Augmentation Placement for more details.

• See also Guide - Augmenting Global Properties

ComponentCustomOptions ​

Used to augment the component options type to support custom options.

• Example

  ts

  import { Route } from 'vue-router'
  
  declare module 'vue' {
    interface ComponentCustomOptions {
      beforeRouteEnter?(to: any, from: any, next: () => void): void
    }
  }

  TIP

  Augmentations must be placed in a module .ts or .d.ts file. See Type Augmentation Placement for more details.

• See also Guide - Augmenting Custom Options

ComponentCustomProps ​

Used to augment allowed TSX props in order to use non-declared props on TSX elements.

• Example

  ts

  declare module 'vue' {
    interface ComponentCustomProps {
      hello?: string
    }
  }
  
  export {}

  tsx

  // now works even if hello is not a declared prop
  <MyComponent hello="world" />

  TIP

  Augmentations must be placed in a module .ts or .d.ts file. See Type Augmentation Placement for more details.

CSSProperties ​

Used to augment allowed values in style property bindings.

• Example

  Allow any custom CSS property

  ts

  declare module 'vue' {
    interface CSSProperties {
      [key: `--${string}`]: string
    }
  }

  tsx

  <div style={ { '--bg-color': 'blue' } }>

  html

  <div :style="{ '--bg-color': 'blue' }"></div>