Constructor options

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

Full bundle
Vue.use(Buefy, {
    defaultIconPack: 'fas',
    defaultContainerElement: '#content',
    // ...
Individual components
import { ConfigProgrammatic, Table, Input } from 'buefy'

    defaultIconPack: 'fas',
    defaultContainerElement: '#content',
    // ...


defaultIconPackIcon pack used internally and on the Icon component attribute — Material Design Icons or FontAwesome 4 or FontAwesome 5 String mdi, fa, fas, far, fadmdi
defaultIconComponentComponent used to render the Icon. Can be used to render FontAwesome 5 icons with the vue-fontawesome component Component FontAwesomeIcon component name
defaultIconPrevIcon used internally for prev. — Used in Datepicker, Pagination and Steps for example String chevron-left
defaultIconNextIcon used internally for next. — Used in Datepicker, Pagination and Steps for example String chevron-right
defaultContainerElementDefault 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
defaultDialogConfirmTextDefault dialog confirmText attribute String OK
defaultDialogCancelTextDefault dialog cancelText attribute String Cancel
defaultSnackbarDurationDefault snackbar duration attribute. Number 3500
defaultSnackbarPositionDefault snackbar position attribute. String is-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-leftis-bottom-right
defaultToastDurationDefault toast duration attribute. Number 2000
defaultToastPositionDefault toast position attribute. String is-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-leftis-top
defaultNotificationDurationDefault notification duration attribute. Number 2000
defaultNotificationPositionDefault notification position attribute for programmatically opening. String is-top-right, is-top, is-top-left, is-bottom-right, is-bottom, is-bottom-leftis-bottom-right
defaultTooltipTypeDefault 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 Sassis-primary
defaultTooltipAnimatedDefault tooltip animated attribute. Boolean false
defaultTooltipDelayDefault tooltip delay attribute. Number 0
defaultInputAutocompleteDefault input autocomplete attribute. String on, offon
defaultDateFormatterDefault datepicker date-formatter attribute Function date.toLocaleDateString()
defaultDateParserDefault datepicker date-parser attribute Function Date.parse(date)
defaultDateCreatorDefault datepicker date-creator attribute Function new Date()
defaultDayNamesDefault datepicker day-names attribute Array ['Su', 'M', 'Tu', 'W', 'Th', 'F', 'S']
defaultMonthNamesDefault datepicker month-names attribute Array ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
defaultFirstDayOfWeekDefault datepicker first-day-of-week attribute Number 0
defaultUnselectableDaysOfWeekDefault datepicker unselectable-days-of-week attribute Array
defaultTimeFormatterDefault timepicker time-formatter attribute Function HH:mm or HH:mm AM/PM
defaultTimeParserDefault timepicker time-parser attribute Function HH:mm or HH:mm AM/PM
defaultModalCanCancelDefault modal canCancel attribute Boolean, Array escape, x, outside, button['escape', 'x', 'outside', 'button']
defaultModalScrollDefault modal/dialog scroll attribute String clip, keepclip
defaultDatepickerMobileNativeDefault native datepicker on mobile Boolean true
defaultTimepickerMobileNativeDefault native timepicker on mobile Boolean true
defaultNoticeQueueDefault snackbar/toast/notification queue attribute Boolean true
defaultInputHasCounterDefault input has-counter attribute Boolean true
defaultTaginputHasCounterDefault taginput has-counter attribute Boolean true
defaultUseHtml5ValidationDefault form components use-html5-validation attribute Boolean true
defaultFieldLabelPositionDefault field position of label String inside,on-border
defaultDatepickerYearsRangeDefault years range relative to selected year Array [-100, 3]
defaultDatepickerNearbyMonthDaysShow/Hide nearby month days (prev and next month) Boolean true
defaultDatepickerNearbySelectableMonthDaysIt allows to select/unselect nearby month days Boolean false
defaultDatepickerShowWeekNumberIt allows to display week number Boolean false
customIconPacksAllows you to define your own custom icon pack to be used in Buefy. Object
defaultClockpickerHoursLabelDefault clockpicker hours-label attribute String Hours
defaultClockpickerMinutesLabelDefault clockpicker minutes-label attribute String Min
defaultTrapFocusDefault config to trap focus inside components (Dialog, Dropdown and Modal). Boolean false
defaultButtonRoundedDefault config to make all buttons rounded. Boolean false
defaultCarouselIntervalDefault carousel interval attribute Number 3500
defaultTabsAnimatedDefault tabs animated attribute Boolean true
defaultLinkTagsDefault 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]

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

Improve this page on GitHub