Skip to content

Utility Types

INFO

This page only lists a few commonly used utility types that may need explanation for their usage. For a full list of exported types, consult the source code.

PropType<T>

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

  • Example

    import { 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

ComponentCustomProperties

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

ComponentCustomOptions

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

  • Example

    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

    declare module 'vue' {
      interface ComponentCustomProps {
        hello?: string
      }
    }
    
    export {}
    
    // 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

    declare module 'vue' {
      interface CSSProperties {
        [key: `--${string}`]: string
      }
    }
    
    <div style={ { '--bg-color': 'blue' } }>
    
    <div :style="{ '--bg-color': 'blue' }">
    

TIP

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

See also

SFC <style> tags support linking CSS values to dynamic component state using the v-bind CSS function. This allows for custom properties without type augmentation.

Utility Types has loaded