Types ​

BootstrapVueNext is a complete rewrite that strives for full TypeScript compatibility. This is a list of types we use in this library and that you can use too.

Alignment ​

ts
type AlignmentCommon = 'start' | 'end' | 'center' | 'fill'
type AlignmentContent = AlignmentCommon | 'between' | 'around' | 'stretch'
type AlignmentHorizontal = AlignmentCommon | 'between' | 'around'
type AlignmentJustifyContent = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
type AlignmentTextHorizontal = 'start' | 'end' | 'center'
type AlignmentVertical = AlignmentCommon | 'baseline' | 'stretch'
type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom'
type ContainerVerticalAlign = Exclude<VerticalAlign, 'baseline' | 'text-top' | 'text-bottom'>
type ContainerHorizontalAlign = 'start' | 'center' | 'end'
type ContainerPosition = `${ContainerVerticalAlign}-${ContainerHorizontalAlign}`

AriaInvalid ​

ts
type AriaInvalid = boolean | 'grammar' | 'spelling'

AttrsValue ​

ts
type AttrsValue = Record<string, any>

BodyProp ​

This type is only used for the Toast component.

ts
type BodyProp =
  | string
  | VNode<
      RendererNode,
      RendererElement,
      {
        [key: string]: any
      }
    >
  | undefined

This type is only used for the Breadcrumb component.

ts
interface BreadcrumbItem {
  active?: boolean
  disabled?: boolean
  href?: string
  text: string
  to?: string | Record<string, any>
}
type BreadcrumbItemRaw = BreadcrumbItem | string

Breakpoint ​

ts
type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'

ButtonType ​

ts
type ButtonType = 'button' | 'submit' | 'reset'

ButtonVariant ​

ts
type ButtonVariant =
  | ColorVariant
  | 'link'
  | 'outline-primary'
  | 'outline-secondary'
  | 'outline-success'
  | 'outline-danger'
  | 'outline-warning'
  | 'outline-info'
  | 'outline-light'
  | 'outline-dark'

CheckboxOption ​

ts
type CheckboxOption = {
  text: string
  value: CheckboxValue
  disabled?: boolean
}

CheckboxOptionRaw ​

ts
type CheckboxOptionRaw = string | number | (Partial<CheckboxOption> & Record<string, unknown>)

CheckboxValue ​

ts
type CheckboxValue =
  | readonly unknown[]
  | ReadonlySet<unknown>
  | string
  | boolean
  | Readonly<Record<string, unknown>>
  | number
  | null

ClassValue ​

ts
export type ClassValue = any

ColorVariant ​

ts
type ColorVariant =
  | 'primary'
  | 'secondary'
  | 'success'
  | 'danger'
  | 'warning'
  | 'info'
  | 'light'
  | 'dark'

ColsNumbers ​

ts
export type ColsBaseNumbers = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5'

export type ColsNumbers =
  | ColsBaseNumbers
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11
  | 12
  | '6'
  | '7'
  | '8'
  | '9'
  | '10'
  | '11'
  | '12'

export type GutterNumbers = ColsBaseNumbers | 0 | '0'

export type ColsOrderNumbers = ColsBaseNumbers | 'first' | 'last'

export type ColsOffsetNumbers = ColsNumbers | 0 | '0'

CombinedPlacement ​

ts
type CombinedPlacement = Placement | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'

ContainerPosition ​

ts
type ContainerVerticalAlign = Exclude<VerticalAlign, 'baseline' | 'text-top' | 'text-bottom'>
type ContainerHorizontalAlign = 'left' | 'center' | 'right'
type ContainerPosition = `${ContainerVerticalAlign}-${ContainerHorizontalAlign}`

InputType ​

ts
type InputType =
  | 'text'
  | 'number'
  | 'email'
  | 'password'
  | 'search'
  | 'url'
  | 'tel'
  | 'date'
  | 'time'
  | 'range'
  | 'color'
  | 'datetime'
  | 'datetime-local'
  | 'month'
  | 'week'

LinkTarget ​

ts
type LinkTarget = '_self' | '_blank' | '_parent' | '_top'

Placement ​

ts
type Placement = 'top' | 'bottom' | 'start' | 'end'

Position ​

ts
type Position =
  | 'position-static'
  | 'position-relative'
  | 'position-absolute'
  | 'position-fixed'
  | 'position-sticky'

RadioOption ​

ts
type RadioOption = {
  text: string
  value: RadioValue
  disabled?: boolean
}

RadioOptionRaw ​

ts
type RadioOptionRaw = string | number | (Partial<RadioOption> & Record<string, unknown>)

RadioValue ​

ts
type RadioValue =
  | boolean
  | string
  | readonly unknown[]
  | Readonly<Record<string, unknown>>
  | number
  | null

RadiusElement ​

ts
type RadiusElement =
  | 'circle'
  | 'pill'
  | 'none'
  | 'sm'
  | 'md'
  | 'lg'
  | '0'
  | '1'
  | '2'
  | '3'
  | '4'
  | '5'
  | 0
  | 1
  | 2
  | 3
  | 4
  | 5

RadiusElementExtendables ​

ts
type RadiusElementExtendables = {
  rounded?: boolean | RadiusElement
  roundedTop?: boolean | RadiusElement
  roundedBottom?: boolean | RadiusElement
  roundedStart?: boolean | RadiusElement
  roundedEnd?: boolean | RadiusElement
}

SelectValue ​

ts
type SelectValue =
  | boolean
  | string
  | readonly unknown[]
  | Readonly<Record<string, unknown>>
  | number
  | null

Size ​

ts
type Size = 'sm' | 'md' | 'lg'

SpinnerType ​

ts
type SpinnerType = 'border' | 'grow'

TableField ​

ts
type TableFieldFormatter<T = any> =
  | string
  | ((value: unknown, key?: LiteralUnion<keyof T>, item?: T) => string)

type TableFieldAttribute<T = any> =
  | Record<string, unknown>
  | ((value: unknown, key?: LiteralUnion<keyof T>, item?: T) => Record<string, unknown>)

interface TableField<T = Record<string, unknown>> {
  key: LiteralUnion<keyof T>
  label?: string
  headerTitle?: string
  headerAbbr?: string
  class?: ClassValue
  formatter?: TableFieldFormatter<T>
  sortable?: boolean
  sortKey?: string
  sortDirection?: string
  sortByFormatted?: boolean | TableFieldFormatter<T>
  filterByFormatted?: boolean | TableFieldFormatter<T>
  tdClass?: ClassValue
  thClass?: ClassValue
  thStyle?: StyleValue
  variant?: ColorVariant | null
  tdAttr?: TableFieldAttribute<T>
  thAttr?: TableFieldAttribute<T>
  isRowHeader?: boolean
  stickyColumn?: boolean
}
type TableFieldRaw<T = Record<string, unknown>> = string | TableField<T>

TableItem ​

ts
type TableItem<T = Record<string, unknown>> = T & {
  _rowVariant?: ColorVariant
  _cellVariants?: Partial<Record<keyof T, ColorVariant>>
  _showDetails?: boolean
}

TextColorVariant ​

ts
type TextColorVariant =
  | 'primary'
  | 'secondary'
  | 'success'
  | 'danger'
  | 'warning'
  | 'info'
  | 'light'
  | 'dark'
  | 'white'
  | 'body'
  | 'muted'
  | 'black-50'
  | 'white-50'
  | 'reset'

TransitionMode ​

ts
type TransitionMode = 'in-out' | 'out-in'

VerticalAlign ​

ts
type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom'

Extending types ​

You can extend some types to use your own values (e.g. colors, sizes). This requires the use of interface augmentation. You can augment next interfaces:

  • BaseColorVariant
  • BaseButtonVariant (extends BaseColorVariant)
  • BaseTextColorVariant (extends BaseColorVariant)
  • BaseSize

Suppose we want to add a purple style and extra-large (xl) sizes. We need to create a declaration file in the root of vue project.

ts
// shims-bootstrap-vue-next.d.ts

import 'bootstrap-vue-next'

declare module 'bootstrap-vue-next/dist/src/types' {
  export interface BaseColorVariant {
    purple: unknown // we use unknown type because it does not matter here
  }
  export interface BaseButtonVariant {
    // there is no need to add "purple" (it inherits from BaseColorVariant)
    'outline-purple': unknown // outline purple button
  }
  export interface BaseTextColorVariant {
    // there is no need to add "purple" (it inherits from BaseColorVariant)
  }
  export interface BaseSize {
    xl: unknown // extra large
  }
}

New values can be used now and the type check will be successful:

template
<BButton variant="purple" size="xl">Extra large purple button</BButton>
<BButton variant="outline-purple">Outline purple button</BButton>