tessl/npm-buefy

Lightweight UI components for Vue.js (v3) based on Bulma

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Buefy

Name: tessl/npm-buefy
Author: tessl

Buefy is a lightweight Vue.js 3 component library built on top of the Bulma CSS framework. It provides 33 responsive UI components with both declarative (component-based) and programmatic APIs, delivering a complete solution for building modern web applications with consistent design and functionality.

Package Information

Package Name: buefy
Package Type: npm
Language: TypeScript/JavaScript
Framework: Vue.js 3
CSS Framework: Bulma
Installation: npm install buefy

Core Imports

import Buefy from "buefy";

For individual components:

import { BButton, BInput, BTable } from "buefy";

For programmatic APIs:

import { DialogProgrammatic, ToastProgrammatic } from "buefy";

Basic Usage

import { createApp } from "vue";
import Buefy from "buefy";
import "buefy/dist/css/buefy.css";

const app = createApp({});

// Install all components
app.use(Buefy);

// Or install individual components
import { Button, Input } from "buefy";
app.use(Button);
app.use(Input);

Architecture

Buefy is organized around several key architectural patterns:

Component Library: 33 UI components following Vue 3 composition patterns
Plugin System: Each component is a Vue plugin that can be installed individually or as a bundle
Programmatic APIs: Six overlay components provide JavaScript APIs for dynamic creation
Bulma Integration: All components generate semantic HTML with Bulma CSS classes
TypeScript Support: Full type definitions for all components, props, and APIs
Configuration System: Global configuration for styling, positioning, and behavior defaults

Capabilities

Form Components

Complete form input components with validation, styling, and accessibility features built on Bulma form classes.

// Core form components
export const BInput: Component;
export const BButton: Component;
export const BCheckbox: Component;
export const BRadio: Component;
export const BSelect: Component;
export const BField: Component;

Form Components

Data Display Components

Components for displaying structured data including tables, lists, and media content.

export const BTable: Component;
export const BTableColumn: Component;
export const BMessage: Component;
export const BTag: Component;
export const BProgress: Component;
export const BImage: Component;

Data Display Components

Navigation Components

Navigation and layout components for building application structure and user workflows.

export const BNavbar: Component;
export const BBreadcrumb: Component;
export const BMenu: Component;
export const BTabs: Component;
export const BSteps: Component;
export const BPagination: Component;
export const BDropdown: Component;
export const BIcon: Component;

Navigation Components

Layout Components

Structural components for organizing content and creating responsive layouts.

export const BCarousel: Component;
export const BCollapse: Component;
export const BSidebar: Component;
export const BSkeleton: Component;

Layout Components

Overlay Components

Modal-style components that appear over main content, with both declarative and programmatic APIs.

export const BDialog: Component;
export const BModal: Component;
export const BToast: Component;
export const BNotification: Component;
export const BSnackbar: Component;
export const BLoading: Component;

Overlay Components

Date & Time Components

Specialized input components for date, time, and date-time selection with internationalization support.

export const BDatepicker: Component;
export const BTimepicker: Component;
export const BClockpicker: Component;
export const BDatetimepicker: Component;

Date & Time Components

Advanced Input Components

Sophisticated input components for complex data entry scenarios.

export const BAutocomplete: Component;
export const BColorpicker: Component;
export const BTaginput: Component;
export const BNumberinput: Component;
export const BSlider: Component;
export const BRate: Component;
export const BUpload: Component;

Advanced Input Components

Programmatic APIs

JavaScript APIs for dynamically creating and managing overlay components without templates.

class DialogProgrammatic {
  alert(params: string | DialogOpenParams): Promise<any> | DialogProgrammaticInstance;
  confirm(params: DialogOpenParams): Promise<any> | DialogProgrammaticInstance;
  prompt(params: DialogOpenParams): Promise<any> | DialogProgrammaticInstance;
}

class ToastProgrammatic {
  open(params: string | ToastOpenParams): ToastProgrammaticInstance;
}

Programmatic APIs

Utility APIs

Helper functions, color utilities, and type definitions for advanced usage and customization.

export default Color;
export * from "./utils/helpers";
export type * from "./utils/config";

Utility APIs

Global Types

interface BuefyConfig {
  defaultIconComponent?: string;
  defaultIconPack?: string;
  defaultToastPosition?: NoticePosition;
  defaultSnackbarPosition?: NoticePosition;
  defaultNotificationPosition?: NoticePosition;
  defaultTooltipType?: string;
  defaultTooltipAnimated?: boolean;
  defaultInputAutocomplete?: string;
  defaultDateFormatter?: (date: Date) => string;
  defaultDateParser?: (dateString: string) => Date;
  defaultDateCreator?: () => Date;
  defaultTimeFormatter?: (date: Date) => string;
  defaultTimeParser?: (timeString: string) => Date;
  defaultModalCanCancel?: boolean | string[];
  defaultModalScroll?: ModalScrollBehavior;
  defaultDatepickerMobileNative?: boolean;
  defaultTimepickerMobileNative?: boolean;
  defaultNotificationDuration?: number;
  defaultSnackbarDuration?: number;
  defaultToastDuration?: number;
  defaultProgrammaticPromise?: boolean;
  defaultLinkTags?: string[];
  defaultImageWebpFallback?: string;
  defaultImageLazy?: boolean;
  defaultUseHtml5Validation?: boolean;
  defaultFieldLabelPosition?: string;
  defaultFieldGrouped?: boolean;
  defaultFieldGroupMultiline?: boolean;
  defaultFieldAddons?: boolean;
  defaultDatepickerCloseOnClick?: boolean;
  defaultDatepickerShowWeekNumber?: boolean;
  defaultDatepickerWeekNumberClickable?: boolean;
  defaultDatepickerMobileModal?: boolean;
  defaultTimepickerEnableSeconds?: boolean;
  defaultTimepickerHoursLabel?: string;
  defaultTimepickerMinutesLabel?: string;
  defaultTimepickerSecondsLabel?: string;
  defaultClockpickerType?: string;
  defaultClockpickerHoursLabel?: string;
  defaultClockpickerMinutesLabel?: string;
  defaultTrapFocus?: boolean;
  defaultAutoFocus?: boolean;
  defaultTableSortIcon?: string;
  defaultTableSortIconAsc?: string;
  defaultTableSortIconDesc?: string;
  defaultPaginationSimple?: boolean;
  defaultPaginationSize?: string;
  defaultPaginationPerPage?: number;
  customIconPacks?: object;
}

type NoticePosition = 'is-top-right' | 'is-top' | 'is-top-left' | 'is-bottom-right' | 'is-bottom' | 'is-bottom-left';

type ModalScrollBehavior = 'clip' | 'keep';

type ModalCancellableOption = 'escape' | 'x' | 'outside' | 'button';

Install with Tessl CLI