Varlet Documentation

Varlet is a Vue3 component library built on Material Design 2 and 3. It is designed to support both mobile and desktop environments.

Key features include:

• Over 60 high-quality, lightweight general-purpose components.
• Support for on-demand component introduction (tree-shaking).
• Theme customization and dark mode support.
• Internationalization (i18n) support.
• TypeScript support and SSR (Server-Side Rendering) compatibility.
• Nuxt Module support via varlet-nuxt.
• Accessibility support (ongoing improvements).

Varlet is a Vue3 component library based on Material Design 2 and 3. It is designed to support both mobile and desktop environments and is maintained by the varletjs organization.

Key Features

• High Quality: Provides 60+ lightweight, high-quality general-purpose components.
• Flexible Integration: Supports on-demand imports (tree-shaking), theme customization, and internationalization.
• Modern Development: Built with TypeScript, supports SSR (Server-Side Rendering), and includes a Nuxt Module.
• Design Systems: Supports both Material Design 2 and Material Design 3.
• Developer Experience: Supports dark mode, provides an official VSCode extension, and offers WebStorm component attribute highlighting.

Varlet provides several official tools to enhance development:

• @varlet/cli: Rapid prototyping tool for Vue3 component libraries.
• @varlet/touch-emulator: Desktop adapter for mobile component compatibility.
• @varlet/import-resolver: Resolver for unplugin-vue-components to enable on-demand component imports.
• @varlet/ui-playground: Online editing tool for testing components.
• @varlet/preset-unocss & @varlet/preset-tailwindcss: CSS presets for Varlet.
• varlet-theme-builder: Generator for Material Design 3 theme variables.
• varlet-vscode-extension: Official VSCode plugin for Varlet.

The var-date-input component is used to input or select dates, months, years, or date-time values. It supports various visual variants and selection modes like multiple selection and date ranges.

<var-date-input v-model="standardValue" placeholder="Select date" />

Varlet provides several official tools and packages to enhance your development experience:

• @varlet/cli: Tools for rapid Vue3 component library development.
• @varlet/touch-emulator: Desktop adapter to allow mobile components to run on desktop.
• @varlet/ui-playground: Online editor for Varlet components.
• @varlet/import-resolver: Resolver for unplugin-vue-components to enable on-demand imports.
• @varlet/preset-unocss: UnoCSS preset for Varlet.
• @varlet/preset-tailwindcss: TailwindCSS preset for Varlet.
• varlet-theme-builder: Theme generator for Material Design 3 variables.
• varlet-vscode-extension: Official VSCode extension.
• varlet-app-example: Mobile application template.

To get started with the varlet-cli-app template, install the dependencies and start the development server using pnpm:

pnpm install
pnpm dev

You can quickly scaffold a new component library project using built-in sfc (Single File Component) or tsx templates via the gen command. This provides a complete development environment out-of-the-box.

pnpm add @varlet/cli -g
varlet-cli gen

Varlet UI allows you to customize the default values for component props using the static method setPropsDefaults.

Important constraints:

1. This only affects declarative components (components used in templates).
2. Customization must be performed before the component is initialized (e.g., in your main.ts entry point).

import { Button } from '@varlet/ui'

// Set default props for all Button components
Button.setPropsDefaults({
  type: 'primary',
  elevation: 10
})