or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-display.mddata-entry.mdfeedback.mdindex.mdlayout.mdnavigation.mdutility.md
tile.json

tessl/npm-arco-design--web-vue

A comprehensive Vue.js 3 UI component library based on the Arco Design system offering 60+ crafted components for building modern web applications.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@arco-design/web-vue@2.57.x

To install, run

npx @tessl/cli install tessl/npm-arco-design--web-vue@2.57.0

index.mddocs/

Arco Design Vue

Arco Design Vue is a comprehensive Vue.js 3 UI component library based on the Arco Design system. It provides over 60 crafted components that can be used out-of-the-box for building modern web applications, featuring extensive customization capabilities, full TypeScript support, and responsive design patterns.

Package Information

  • Package Name: @arco-design/web-vue
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @arco-design/web-vue

Core Imports

import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';

app.use(ArcoVue);

For individual component imports:

import { Button, Input, Form } from '@arco-design/web-vue';

For CommonJS:

const { Button, Input, Form } = require('@arco-design/web-vue');

Basic Usage

import { createApp } from 'vue';
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';
import App from './App.vue';

const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

Architecture

Arco Design Vue is built around several key architectural patterns:

  • Component System: 80+ Vue 3 components covering all common UI needs
  • Theme System: CSS variables and design tokens for consistent styling
  • TypeScript Integration: Full type definitions for all components and props
  • Internationalization: Built-in i18n support with locale switching
  • Accessibility: ARIA attributes and keyboard navigation support
  • Tree Shaking: Individual component imports for optimal bundle size

Global Configuration

Configuration Provider

Global configuration through ConfigProvider component.

interface ArcoOptions {
  componentPrefix?: string;
  iconPrefix?: string;
  locale?: ArcoLang;
}

// ArcoVue default export
interface ArcoVuePlugin {
  install(app: App, options?: ArcoOptions): void;
  [componentName: string]: any;
}

Internationalization Functions

/**
 * Add locale messages for internationalization
 * @param messages - Locale message data
 * @param options - Configuration options
 */
function addI18nMessages(
  messages: ArcoI18nMessages, 
  options?: { overwrite?: boolean }
): void;

/**
 * Switch current locale (only works when ConfigProvider is not used)
 * @param locale - Locale string (e.g., 'en-US', 'zh-CN')
 */
function useLocale(locale: string): void;

/**
 * Get current locale string
 * @returns Current locale
 */
function getLocale(): string;

Form Integration Hook

/**
 * Hook for integrating with Arco form components
 * @param options - Configuration options
 * @returns Form item context and merged properties
 */
function useFormItem(options?: {
  size?: Ref<Size | undefined>;
  disabled?: Ref<boolean>;
  error?: Ref<boolean>;
  uninject?: boolean;
}): {
  formItemCtx: FormItemContext;
  mergedSize: ComputedRef<Size | undefined>;
  mergedDisabled: ComputedRef<boolean>;
  mergedError: ComputedRef<boolean>;
  feedback: Ref<string>;
  eventHandlers: Ref<Record<string, Function>>;
};

Common Types

// Size variants used across components
type Size = 'mini' | 'small' | 'medium' | 'large';

// Status variants for validation states  
type Status = 'normal' | 'success' | 'warning' | 'danger';

// Message types for notifications
type MessageType = 'info' | 'success' | 'warning' | 'error';

// Direction for layout components
type Direction = 'horizontal' | 'vertical';

// Trigger positions for tooltips and popovers
type TriggerPosition = 'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb';

// Trigger events
type TriggerEvent = 'hover' | 'click' | 'focus' | 'contextMenu';

Capabilities

Button Components

Essential interactive components for user actions and form submissions.

// Button component with multiple variants
export function Button(props: ButtonProps): JSX.Element;
export function ButtonGroup(props: ButtonGroupProps): JSX.Element;

// Button types and interfaces
interface ButtonProps {
  type?: 'primary' | 'secondary' | 'outline' | 'dashed' | 'text';
  shape?: 'square' | 'round' | 'circle';
  status?: 'normal' | 'success' | 'warning' | 'danger';
  size?: 'mini' | 'small' | 'medium' | 'large';
  long?: boolean;
  loading?: boolean;
  disabled?: boolean;
  htmlType?: string;
  href?: string;
}

interface ButtonGroupProps {
  type?: 'primary' | 'secondary' | 'outline' | 'dashed' | 'text';
  size?: 'mini' | 'small' | 'medium' | 'large';
  shape?: 'square' | 'round' | 'circle';
}

type ButtonInstance = InstanceType<typeof Button>;
type ButtonGroupInstance = InstanceType<typeof ButtonGroup>;

Layout Components

Foundational layout building blocks including grid system, containers, spacing utilities, and content organization components.

// Grid system
export function Grid(props: GridProps): JSX.Element;
export function Row(props: RowProps): JSX.Element; 
export function Col(props: ColProps): JSX.Element;

// Layout containers
export function Layout(props: LayoutProps): JSX.Element;
export function LayoutHeader(): JSX.Element;
export function LayoutContent(): JSX.Element;
export function LayoutFooter(): JSX.Element;
export function LayoutSider(props: SiderProps): JSX.Element;

// Spacing and dividers
export function Space(props: { direction?: Direction; size?: Size | number }): JSX.Element;
export function Divider(props: { orientation?: 'horizontal' | 'vertical' }): JSX.Element;

Layout Components

Navigation Components

Navigation elements for user interface wayfinding including menus, breadcrumbs, pagination, and step indicators.

// Menu navigation
export function Menu(props: { mode?: 'horizontal' | 'vertical' | 'pop' }): JSX.Element;
export function MenuItem(props: { key: string; disabled?: boolean }): JSX.Element;
export function SubMenu(props: { key: string; title: string }): JSX.Element;

// Breadcrumb navigation  
export function Breadcrumb(props: { separator?: string }): JSX.Element;
export function BreadcrumbItem(props: BreadcrumbRoute): JSX.Element;

// Pagination
export function Pagination(props: PaginationProps): JSX.Element;

// Steps
export function Steps(props: { current?: number; direction?: Direction }): JSX.Element;
export function Step(props: { title?: string; description?: string }): JSX.Element;

Navigation Components

Data Entry Components

Form controls and input components for collecting user data including text inputs, selections, date pickers, and upload functionality.

// Text inputs
export function Input(props: { placeholder?: string; disabled?: boolean }): JSX.Element;
export function Textarea(props: { rows?: number; autoSize?: boolean }): JSX.Element;
export function InputNumber(props: { min?: number; max?: number; step?: number }): JSX.Element;

// Selection components
export function Select(props: SelectProps): JSX.Element;
export function Option(props: { value: any; label?: string }): JSX.Element;
export function Checkbox(props: { checked?: boolean; indeterminate?: boolean }): JSX.Element;
export function Radio(props: { checked?: boolean; value?: any }): JSX.Element;

// Date and time
export function DatePicker(props: { format?: string; showTime?: boolean }): JSX.Element;
export function TimePicker(props: { format?: string; use12Hours?: boolean }): JSX.Element;
export function RangePicker(props: { format?: string; showTime?: boolean }): JSX.Element;

// Form structure
export function Form(props: { model?: Record<string, any>; rules?: Record<string, FieldRule[]> }): JSX.Element;
export function FormItem(props: { field?: string; label?: string; required?: boolean }): JSX.Element;

Data Entry Components

Data Display Components

Components for presenting and organizing data including tables, lists, cards, and visualization elements.

// Data visualization
export function Table(props: { data?: TableData[]; columns?: TableColumnData[] }): JSX.Element;
export function List(props: { dataSource?: any[]; renderItem?: Function }): JSX.Element;
export function Card(props: { title?: string; extra?: string }): JSX.Element;

// Content display
export function Descriptions(props: { data?: DescData[]; column?: number }): JSX.Element;
export function Image(props: { src: string; preview?: boolean }): JSX.Element;
export function Avatar(props: { src?: string; size?: Size; shape?: 'circle' | 'square' }): JSX.Element;

// Status indicators
export function Badge(props: { count?: number; dot?: boolean; status?: Status }): JSX.Element;
export function Tag(props: { color?: TagColor; closable?: boolean }): JSX.Element;
export function Progress(props: { percent?: number; type?: 'line' | 'circle' }): JSX.Element;

Data Display Components

Feedback Components

User feedback mechanisms including notifications, dialogs, loading states, and confirmation elements.

// Notifications and messages
interface MessageMethod {
  info(config: string | MessageConfig): MessageReturn;
  success(config: string | MessageConfig): MessageReturn;
  warning(config: string | MessageConfig): MessageReturn;
  error(config: string | MessageConfig): MessageReturn;
  loading(config: string | MessageConfig): MessageReturn;
  clear(position?: 'top' | 'bottom'): void;
}

interface ModalMethod {
  info(config: ModalConfig): ModalReturn;
  success(config: ModalConfig): ModalReturn;
  warning(config: ModalConfig): ModalReturn;
  error(config: ModalConfig): ModalReturn;
  confirm(config: ModalConfig): ModalReturn;
}

// Loading states
export function Spin(props: { loading?: boolean; size?: Size }): JSX.Element;
export function Skeleton(props: { loading?: boolean; active?: boolean }): JSX.Element;

// Dialogs and overlays
export function Modal(props: { visible?: boolean; title?: string }): JSX.Element;
export function Drawer(props: { visible?: boolean; placement?: 'top' | 'right' | 'bottom' | 'left' }): JSX.Element;
export function Popconfirm(props: { title?: string; okText?: string; cancelText?: string }): JSX.Element;

Feedback Components

Utility Components

Specialized utility components for advanced functionality including triggers, scrollbars, and positioning helpers.

// Positioning and interaction
export function Trigger(props: TriggerProps): JSX.Element;
export function Tooltip(props: { content?: string; position?: TriggerPosition }): JSX.Element;
export function Popover(props: { content?: string; title?: string }): JSX.Element;

// Specialized utilities  
export function Scrollbar(props: ScrollbarProps): JSX.Element;
export function ResizeBox(props: { directions?: string[] }): JSX.Element;
export function Watermark(props: { content?: string; alpha?: number }): JSX.Element;

Utility Components

Installation and Setup

Basic Setup

import { createApp } from 'vue';
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';
import App from './App.vue';

const app = createApp(App);
app.use(ArcoVue);
app.mount('#app');

Individual Component Import

import { Button, Input, Message } from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';

// Usage in component
export default {
  components: {
    Button,
    Input
  },
  methods: {
    showMessage() {
      Message.success('Operation successful!');
    }
  }
}

TypeScript Integration

// Component instance types are available for ref typing
import type { ButtonInstance, FormInstance } from '@arco-design/web-vue';

export default defineComponent({
  setup() {
    const buttonRef = ref<ButtonInstance>();
    const formRef = ref<FormInstance>();
    
    return {
      buttonRef,
      formRef
    };
  }
});