Constructor options

These are global default options, which are set on Buefy initialization

Full bundle

Vue.use(Buefy, {
    defaultIconPack: 'fas',
    // ...
})

Individual components

import { ConfigProgrammatic, Table, Input } from 'buefy'

Vue.use(Table)
Vue.use(Input)
ConfigProgrammatic.setOptions({
    defaultIconPack: 'fas',
    // ...
})

CDN bundle

// When using CDN, Buefy automatically attaches itself on Vue
Vue.prototype.$buefy.config.setOptions({
    defaultIconPack: 'fas',
    // ...
})

# API

Name	Description	Type	Values	Default
`defaultIconPack`	Icon pack used internally and on the Icon component attribute — Material Design Icons or FontAwesome 4 or FontAwesome 5	String	`mdi`, `fa`, `fas`, `far`, `fad`	`mdi`
`defaultIconComponent`	Component used to render the Icon. Can be used to render FontAwesome 5 icons with the vue-fontawesome component	Component	FontAwesomeIcon component name	—
`defaultStatusIcon`	Automatically show status icon on input component	Boolean	—	`true`
`defaultIconPrev`	Icon used internally for prev. — Used in Datepicker, Pagination and Steps for example	String	—	`chevron-left`
`defaultIconNext`	Icon used internally for next. — Used in Datepicker, Pagination and Steps for example	String	—	`chevron-right`
`defaultLocale`	Will be used for default date and number formatting. Accept a string with a BCP 47 language tag, or an array of such strings. See Unicode BCP 47 locale identifier	String, Array of String	—	`undefined`: default to browser locale.
`defaultContainerElement`	Default container attribute for floating Notices (Toasts & Snackbars). Note that this also changes the `position` of the Notices from `fixed` to `absolute`. Meaning that the container should be `fixed`.	String	—	`body`
`defaultDialogConfirmText`	Default dialog `confirmText` attribute	String	—	`OK`
`defaultDialogCancelText`	Default dialog `cancelText` attribute	String	—	`Cancel`
`defaultSnackbarDuration`	Default snackbar `duration` attribute.	Number	—	`3500`
`defaultSnackbarPosition`	Default snackbar `position` attribute.	String	`is-top-right`, `is-top`, `is-top-left`, `is-bottom-right`, `is-bottom`, `is-bottom-left`	`is-bottom-right`
`defaultToastDuration`	Default toast `duration` attribute.	Number	—	`2000`
`defaultToastPosition`	Default toast `position` attribute.	String	`is-top-right`, `is-top`, `is-top-left`, `is-bottom-right`, `is-bottom`, `is-bottom-left`	`is-top`
`defaultNotificationDuration`	Default notification `duration` attribute.	Number	—	`2000`
`defaultNotificationPosition`	Default notification `position` attribute for programmatically opening.	String	`is-top-right`, `is-top`, `is-top-left`, `is-bottom-right`, `is-bottom`, `is-bottom-left`	`is-bottom-right`
`defaultTooltipType`	Default tooltip type (color) attribute.	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`, and any other colors you've set in the `$colors` list on Sass	`is-primary`
`defaultTooltipDelay`	Default tooltip delay attribute.	Number	—	—
`defaultInputAutocomplete`	Default input `autocomplete` attribute.	String	`on`, `off`	`on`
`defaultDateFormatter`	Default datepicker `date-formatter` attribute	Function	—	`(date) => new Intl.DateTimeFormat(locale).format(date)`
`defaultDateParser`	Default datepicker `date-parser` attribute	Function	—	Tries to parse the date using the locale specific format. Fallback to `Date.parse`
`defaultDateCreator`	Default datepicker `date-creator` attribute	Function	—	`new Date()`
`defaultDayNames`	Default datepicker `day-names` attribute	Array	—	default to browser locale
`defaultMonthNames`	Default datepicker `month-names` attribute	Array	—	default to browser locale
`defaultFirstDayOfWeek`	Default datepicker `first-day-of-week` attribute	Number	—	`0`
`defaultUnselectableDaysOfWeek`	Default datepicker `unselectable-days-of-week` attribute	Array	—	—
`defaultTimeFormatter`	Default timepicker `time-formatter` attribute	Function	—	`HH:mm` or `HH:mm AM/PM`
`defaultTimeParser`	Default timepicker `time-parser` attribute	Function	—	`HH:mm` or `HH:mm AM/PM`
`defaultModalCanCancel`	Default modal `canCancel` attribute	Boolean, Array	`escape`, `x`, `outside`, `button`	`['escape', 'x', 'outside', 'button']`
`defaultModalScroll`	Default modal/dialog `scroll` attribute	String	`clip`, `keep`	`clip`
`defaultDatepickerMobileNative`	Default native datepicker on mobile	Boolean	—	`true`
`defaultTimepickerMobileNative`	Default native timepicker on mobile	Boolean	—	`true`
`defaultNoticeQueue`	Default snackbar/toast/notification `queue` attribute	Boolean	—	`true`
`defaultInputHasCounter`	Default input `has-counter` attribute	Boolean	—	`true`
`defaultTaginputHasCounter`	Default taginput `has-counter` attribute	Boolean	—	`true`
`defaultUseHtml5Validation`	Default form components `use-html5-validation` attribute	Boolean	—	`true`
`defaultFieldLabelPosition`	Default field position of label	String	`inside`,`on-border`	—
`defaultDatepickerYearsRange`	Default years range relative to selected year	Array	—	`[-100, 3]`
`defaultDatepickerNearbyMonthDays`	Show/Hide nearby month days (prev and next month)	Boolean	—	`true`
`defaultDatepickerNearbySelectableMonthDays`	It allows to select/unselect nearby month days	Boolean	—	`false`
`defaultDatepickerShowWeekNumber`	It allows to display week number	Boolean	—	`false`
`customIconPacks`	Allows you to define your own custom icon pack to be used in Buefy.	Object	—	—
`defaultClockpickerHoursLabel`	Default clockpicker `hours-label` attribute	String	—	`Hours`
`defaultClockpickerMinutesLabel`	Default clockpicker `minutes-label` attribute	String	—	`Min`
`defaultTrapFocus`	Default config to trap focus inside components (Dialog, Dropdown and Modal).	Boolean	—	`true`
`defaultButtonRounded`	Default config to make all buttons rounded.	Boolean	—	`false`
`defaultSwitchRounded`	Default config to make all switch rounded.	Boolean	—	`true`
`defaultCarouselInterval`	Default carousel `interval` attribute	Number	—	`3500`
`defaultTabsExpanded`	Default tabs `expanded` attribute	Boolean	—	`false`
`defaultTabsAnimated`	Default tabs `animated` attribute	Boolean	—	`true`
`defaultTabsType`	Default tabs `type` attribute	String	`is-boxed`, `is-toggle`	—
`defaultProgrammaticPromise`	Return a promise using programmatic component	Boolean	—	`false`
`defaultLinkTags`	Default link tags accepted as tag in some component (Button, MenuItem, PaginationButton). Can be used when using custom component or other Vue Router plugin like inertia.	string	—	`[a, button, input, router-link, nuxt-link, n-link, RouterLink, NuxtLink, NLink]`
`defaultBreadcrumbTag`	Default link tags accepted as tag in Breadcrumb component. Can be used when using custom component or other Vue Router plugin like inertia.	string	—	`[a, button, input, router-link, nuxt-link, n-link, RouterLink, NuxtLink, NLink]`
`defaultImageWebpFallback`	Fallback when using webp format. You can specify an extension only (.jpg, .jpeg, .png, .gif) if the filename is the same. You can use a full url if not.	String	—	—
`defaultImageLazy`	Use IntersectionObserver to display the image only when in viewport.	Boolean	—	`true`
`defaultImageResponsive`	The image will take 100% of the parent width. Use this with `ratio` to prevent page jump when images are loading.	Boolean	—	`true`
`defaultImageRatio`	The space will be reserved. Prevent page jump when images are loading when using `responsive`.	String	`1by1`, `5by4`, `4by3`, `3by2`, `5by3`, `16by9`, `2by1`, `3by1`, `4by5`, `3by4`, `2by3`, `3by5`, `9by16`, `1by2` `1by3` or any string having this format `{number}by{number}`	—
`defaultImageSrcsetFormatter`	Function to format src according to a given size.	Function	—	(src, size) => `${srcFilename}-${size}.${srcExt}`

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub