### Install and Run Development Server

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/template/generators/base/README.md

Install dependencies and start the development server using pnpm.

```shell
pnpm install
pnpm dev
```

--------------------------------

### Start Development Server

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/template/generators/base/README.md

Command to start the development server.

```shell
pnpm dev
```

--------------------------------

### Install Dependencies and Run Dev Server

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui-playground/src/download/template/README.md

Use these commands to install project dependencies and start the development server. Supports both npm and yarn.

```sh
npm install
npm run dev
```

```sh
# if using yarn:
yarn
yarn dev
```

--------------------------------

### Start Development Server

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/README.md

Starts the development server for Varlet. Supports force and draft modes.

```shell
# playground-ignore
varlet-cli dev
```

```shell
# playground-ignore
varlet-cli dev -f
```

```shell
# playground-ignore
varlet-cli dev -d
```

--------------------------------

### Configuration Example for Varlet CLI

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Example of a configuration file for the Varlet CLI, specifying build and development settings.

```javascript
module.exports = {
  name: 'varlet',
  build: {
    // ... build options
  },
  dev: {
    // ... dev options
  }
};
```

--------------------------------

### Start Development Server with All Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Starts the development server with all available options configured. This allows for a highly customized and feature-rich development environment.

```bash
varlet dev --port 9090 --host localhost --watch --no-hot --https
```

--------------------------------

### Start Development Server Command

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/docs/cli.en-US.md

Use this command to start the development server for your Varlet component library.

```shell
varlet dev
```

--------------------------------

### Start Development Server with Multiple Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Starts the development server with multiple options configured. This allows customizing the development environment extensively.

```bash
varlet dev --port 9090 --host localhost
```

--------------------------------

### Preview Documentation Site

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/docs/cli.en-US.md

Starts a local server to preview the documentation site.

```shell
varlet-cli preview
```

--------------------------------

### Basic Vue App Setup

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

The fundamental setup for a Vue application, including creating the app instance and mounting it to the DOM.

```typescript
import { createApp } from 'vue';
import App from './App.vue';

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

--------------------------------

### Run Development Server

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/docs/cli.en-US.md

Starts the development server. Use -f for force mode and -d for draft mode.

```shell
varlet-cli dev
# force mode
varlet-cli dev -f
# draft mode
varlet-cli dev -d
```

--------------------------------

### Install @varlet/touch-emulator

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/docs/browserAdaptation.en-US.md

Install the @varlet/touch-emulator package as a dependency using npm, yarn, or pnpm for desktop adaptation.

```shell
# npm
npm i @varlet/touch-emulator
# yarn
yarn add @varlet/touch-emulator
# pnpm
pnpm add @varlet/touch-emulator
```

--------------------------------

### Install Shiki Highlighter

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/code/docs/en-US.md

Install the Shiki library, which is recommended for code highlighting with Varlet UI's Code component.

```shell
# npm
npm install shiki -S
# yarn
yarn add shiki
# pnpm
pnpm add shiki
```

--------------------------------

### Install Varlet UI via CDN

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/docs/quickstart.en-US.md

Include Varlet UI and Vue using CDN links in your HTML to quickly get started. This method bundles all styles and logic.

```html
<!-- playground-ignore -->
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>
<script>
  const app = Vue.createApp({
    template: '<var-button>Button</var-button>'
  })
  app.use(Varlet).mount('#app')
</script>
```

--------------------------------

### Import Basic Use Example

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/template/generators/config/i18n/tsx/src/button/docs/en-US.md

Shows how to import the Vue component for the basic button usage example.

```vue
import BasicUse from '../example/BasicUse'
```

--------------------------------

### Automatic Import Comparison Example

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-import-resolver/README.md

Shows the same functionality as the manual import example, but relies on automatic import resolution.

```html
<script setup>
function handleClick() {
  Snackbar('Hello!')
}
</script>

<template>
  <var-button @click="handleClick">Say Hello</var-button>
</template>
```

--------------------------------

### Import Theme Color Example

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/template/generators/config/i18n/tsx/src/button/docs/en-US.md

Shows how to import the Vue component for the theme color button example.

```vue
import ModifyColor from '../example/ModifyColor'
```

--------------------------------

### Store Configuration (Pinia Example)

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Example configuration for Pinia store, used for state management in a Varlet project.

```typescript
import { createPinia } from 'pinia';

export default createPinia();
```

--------------------------------

### Manual Component Import (Script Setup)

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-import-resolver/README.md

Manually import a Varlet component and its styles using `<script setup>` in a Vue template.

```html
<script setup>
import { Button as VarButton } from '@varlet/ui'
import '@varlet/ui/es/button/style/index'
</script>

<template>
  <var-button>Say Hello</var-button>
</template>
```

--------------------------------

### Varlet CLI Serve Command with Path

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Example of using the 'varlet serve' command to serve the site from a specific directory.

```bash
varlet serve --dist ./dist
```

--------------------------------

### Start Development Server with Specific Port

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Starts the development server on a specified port. This is useful for avoiding port conflicts.

```bash
varlet dev --port 8080
```

--------------------------------

### Manual Import Comparison Example

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-import-resolver/README.md

Demonstrates manual import of multiple Varlet components and their styles for use in a Vue SFC.

```html
<script setup>
import { Button as VarButton, Snackbar } from '@varlet/ui'
import '@varlet/ui/es/button/style/index'
import '@varlet/ui/es/snackbar/style/index'

function handleClick() {
  Snackbar('Hello!')
}
</script>

<template>
  <var-button @click="handleClick">Say Hello</var-button>
</template>
```

--------------------------------

### Basic TreeMenu Usage

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/tree-menu/docs/en-US.md

Demonstrates the fundamental setup of the TreeMenu component with nested options.

```html
<script setup>
import { ref } from 'vue'

const active = ref('overview')
const options = ref([
  {
    value: 'overview',
    label: 'Overview',
    icon: 'home',
  },
  {
    value: 'workspace',
    label: 'Workspace',
    icon: 'notebook',
    children: [
      {
        value: 'projects',
        label: 'Projects',
        icon: 'star',
      },
      {
        value: 'tasks',
        label: 'Tasks',
        icon: 'check',
      },
    ],
  },
  {
    value: 'settings',
    label: 'Settings',
    icon: 'cog',
    children: [
      {
        value: 'profile',
        label: 'Profile',
        icon: 'account-circle',
      },
      {
        value: 'security',
        label: 'Security',
        icon: 'warning',
      },
    ],
  },
])
</script>

<template>
  <var-tree-menu v-model:active="active" :options="options" />
</template>
```

--------------------------------

### Basic Uploader Usage

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/uploader/docs/en-US.md

Demonstrates the basic setup of the Uploader component, including how to bind the file list and handle the `after-read` event.

```html
<script setup>
import { ref } from 'vue'

const files = ref([])

function handleAfterRead(file) {
  console.log(file)
}
</script>

<template>
  <var-uploader v-model="files" @after-read="handleAfterRead"/>
</template>
```

--------------------------------

### Basic Usage of MenuSelect

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/menu-select/docs/en-US.md

Demonstrates the basic setup of MenuSelect with options. Use v-model to bind the selected value.

```html
<script setup>
import { ref } from 'vue'

const value = ref()
</script>

<template>
  <var-menu-select v-model="value">
    <var-button type="primary">{{ value ? value : 'Please Select' }}</var-button>

    <template #options>
      <var-menu-option label="Eat" />
      <var-menu-option label="Sleep" />
      <var-menu-option label="Play game" />
    </template>
  </var-menu-select>
</template>
```

--------------------------------

### Install and Generate Component Library Project

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/README.md

Install Varlet CLI globally and then use the 'gen' command to create a new component library project. This command scaffolds projects supporting both SFC and TSX styles.

```shell
# playground-ignore
pnpm add @varlet/cli -g
varlet-cli gen
```

--------------------------------

### Pinia Store Setup

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Setting up Pinia for state management in a Vue application.

```typescript
import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;
```

--------------------------------

### Basic Menu Usage

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/menu/docs/en-US.md

A simple example of how to use the Varlet Menu component with a button trigger and menu options.

```html
<template>
  <var-menu>
    <var-button type="primary">Basic Usage</var-button>
    
    <template #menu>
      <var-cell>Menu Option</var-cell>
      <var-cell>Menu Option</var-cell>
      <var-cell>Menu Option</var-cell>
    </template>
  </var-menu>
</template>
```

--------------------------------

### Loading Component Wrap Example

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/loading/docs/en-US.md

Demonstrates how to use the Loading component to wrap other content, displaying a loading indicator and description when the 'loading' prop is true.

```html
<script setup>
import { ref } from 'vue'

const loading = ref(false)
</script>

<template>
  <var-button @click="loading = !loading" style="margin-bottom: 8px">
    {{ loading ? 'Open' : 'Close' }}
  </var-button>
  <var-loading description="LOADING" :loading="loading">
    <var-card 
      title="Intro"
      description="Varlet is a Material design mobile component library developed based on Vue3, developed and maintained by partners in the community." 
    />
  </var-loading>
</template>
```

--------------------------------

### Basic DataTable Usage

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/data-table/docs/en-US.md

Demonstrates the basic setup of a DataTable with columns and data. Includes pagination with a size changer.

```html
<script setup>
import { ref } from 'vue'

const columns = ref([
  { key: 'name', title: 'Name' },
  { key: 'role', title: 'Role' },
  { key: 'status', title: 'Status' },
])

const data = ref([
  { id: 1, name: 'Ada', role: 'Admin', status: 'Online' },
  { id: 2, name: 'Linus', role: 'Maintainer', status: 'Offline' },
  { id: 3, name: 'Taylor', role: 'Designer', status: 'Online' },
  { id: 4, name: 'Evan', role: 'Reviewer', status: 'Busy' },
])
</script>

<template>
  <var-data-table :columns="columns" :data="data" :pagination="{ showSizeChanger: true }" />
</template>
```

--------------------------------

### Cell as List Item with Interaction

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/cell/docs/en-US.md

Shows how to use the Cell component as an interactive list item, including icons, descriptions, and a switch for toggling states. This example utilizes Vue's reactivity for managing item states.

```javascript
import { ref } from 'vue'

const items = ref([
  {
    name: 'Vue2',
    icon: 'star',
    enabled: false,
  },
  {
    name: 'Vue3',
    icon: 'heart',
    enabled: false,
  },
  {
    name: 'React',
    icon: 'close-circle',
    enabled: false,
  },
])

const handleClick = (item) => {
  item.enabled = !item.enabled
}
```

```html
<template>
  <var-paper :elevation="2">
    <var-cell
      v-for="(item, index) in items"
      :key="item.name"
      ripple
      :icon="item.icon"
      :border="index !== items.length - 1"
      :border-offset="0"
      @click="handleClick(item)"
    >
      {{ item.name }}

      <template #extra>
        <var-switch v-model="item.enabled" @click.stop />
      </template>
    </var-cell>
  </var-paper>
</template>
```

--------------------------------

### Manual Control of CountTo Animation

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/count-to/docs/en-US.md

Demonstrates manual control of the CountTo animation using its methods. The `auto-start` prop is set to `false` to prevent automatic animation on mount. The `start`, `pause`, and `reset` methods are called via button clicks.

```html
<script setup>
import { ref } from 'vue'

const countTo = ref()
</script>

<template>
  <var-count-to ref="countTo" :to="123456" :auto-start="false" />
  <var-button @click="countToRef.start()">Start</var-button>
  <var-button @click="countToRef.pause()">Pause</var-button>
  <var-button @click="countToRef.reset()">Reset</var-button>
</template>
```

--------------------------------

### Install postcss-px-to-viewport

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/docs/browserAdaptation.en-US.md

Install the postcss-px-to-viewport package as a development dependency using npm, yarn, or pnpm.

```shell
# npm
npm i postcss-px-to-viewport -D

# yarn
yarn add postcss-px-to-viewport -D

# pnpm
pnpm add postcss-px-to-viewport -D
```

--------------------------------

### Serve Site with All Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Serves the documentation site with all available options configured. This allows for the most comprehensive and customized site serving environment.

```bash
varlet site --port 8081 --base /docs/ --theme dark --lang zh-CN --version 2.0.0 --platform desktop
```

--------------------------------

### Install UnoCSS Preset

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/docs/atomicCssSupport.en-US.md

Install the UnoCSS preset for Varlet UI using npm, yarn, or pnpm.

```shell
# playground-ignore
# npm
npm i @varlet/preset-unocss -D
# yarn
yarn add @varlet/preset-unocss -D
# pnpm
pnpm add @varlet/preset-unocss -D
```

--------------------------------

### Serve Site with All Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Serves the documentation site with all available options configured. This allows for the most comprehensive and customized site serving environment across multiple themes, languages, versions, and platforms.

```bash
varlet site --port 8081 --base /docs/ --theme dark --theme light --lang en --lang zh-CN --version 1.0.0 --version 2.0.0 --platform mobile --platform desktop
```

--------------------------------

### Deploy Site with All Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Deploys the documentation site with all available options configured. This allows for the most comprehensive and customized deployment process.

```bash
varlet deploy --branch main --message "Final deploy" --env production --force --tag latest
```

--------------------------------

### Build Documentation Site with All Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Builds the documentation site with all available options configured. This allows for the most comprehensive and customized documentation generation across multiple platforms and versions.

```bash
varlet site --build --platform mobile --platform desktop --version 1.0.0 --version 2.0.0 --output ./build
```

--------------------------------

### Install Icon Builder Plugin

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/icon/docs/en-US.md

Install the @varlet/unplugin-icon-builder package as a development dependency for integrating custom icon libraries.

```shell
#npm
npm i @varlet/unplugin-icon-builder -D
# yarn
yarn add @varlet/unplugin-icon-builder -D
# pnpm
pnpm add @varlet/unplugin-icon-builder -D
```

--------------------------------

### Serve Site with Varlet CLI

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Serves the documentation site using the Varlet CLI. This is useful for local development of the site.

```bash
varlet site
```

--------------------------------

### Install Dependencies

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-import-resolver/README.md

Install the necessary packages for Varlet auto import resolution using npm, yarn, or pnpm.

```shell
# npm
npm i @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D

# yarn
yarn add @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D

# pnpm
pnpm add @varlet/import-resolver unplugin-vue-components unplugin-auto-import -D
```

--------------------------------

### Build Documentation Site for Specific Platform and Version

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Builds the documentation site for a specific platform and version. This allows generating documentation for specific platform-version combinations.

```bash
varlet site --platform desktop --version 2.0.0
```

--------------------------------

### Build Documentation Site for Multiple Platforms and Versions

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Builds the documentation site for multiple platforms and versions. This allows generating documentation for various platform-version combinations.

```bash
varlet site --platform mobile --platform desktop --version 1.0.0 --version 2.0.0
```

--------------------------------

### Vue Component Example with Varlet CLI

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

A basic Vue component example that can be used with the Varlet CLI for development.

```vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello Varlet!'
    };
  }
});
</script>
```

--------------------------------

### Build Documentation Site

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/README.md

Builds the documentation site for Varlet.

```shell
# playground-ignore
varlet-cli build
```

--------------------------------

### Build Project with All Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Builds the project with all available options configured. This allows for the most comprehensive and customized build process.

```bash
varlet build --prod --watch --config path/to/config.js --port 8080 --out-dir dist --sourcemap --analyze
```

--------------------------------

### Install Zod

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/docs/zodValidation.en-US.md

Install Zod using npm, yarn, or pnpm. This is a prerequisite for using Zod validation with Varlet UI.

```shell
# npm
npm i zod -S

# yarn
yarn add zod

# pnpm
pnpm add zod
```

--------------------------------

### Install Tailwind CSS Preset

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/docs/atomicCssSupport.en-US.md

Install the Tailwind CSS preset for Varlet UI using npm, yarn, or pnpm.

```shell
# playground-ignore
# npm
npm i @varlet/preset-tailwindcss -D
# yarn
yarn add @varlet/preset-tailwindcss -D
# pnpm
pnpm add @varlet/preset-tailwindcss -D
```

--------------------------------

### Serve Site with Multiple Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Serves the documentation site with multiple options configured. This allows customizing the site serving environment.

```bash
varlet site --port 8081 --base /docs/ --theme light
```

--------------------------------

### Install Varlet UI with npm, yarn, or pnpm

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/docs/quickstart.en-US.md

Install Varlet UI as a project dependency using your preferred package manager.

```shell
# playground-ignore
# Install with npm, yarn or pnpm

# npm
npm i @varlet/ui -S

# yarn
yarn add @varlet/ui

# pnpm
pnpm add @varlet/ui
```

--------------------------------

### Build Documentation Site

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Builds the static assets for the documentation site. This command prepares the site for deployment.

```bash
varlet site --build
```

--------------------------------

### Varlet CLI Build Command with Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Demonstrates the 'varlet build' command with specific options for customizing the build process.

```bash
varlet build --mode production --watch
```

--------------------------------

### Deploy Site with Varlet CLI

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Deploys the documentation site using the Varlet CLI. This command is used to publish the site.

```bash
varlet deploy
```

--------------------------------

### Build Documentation Site

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/template/generators/base/README.md

Command to build the documentation site.

```shell
pnpm build
```

--------------------------------

### Start Development Server in Watch Mode

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Starts the development server and watches for file changes to automatically rebuild. This enhances the development workflow.

```bash
varlet dev --watch
```

--------------------------------

### Menu Placement Configuration

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/menu/docs/en-US.md

Demonstrates how to control the placement of the menu popup using the 'placement' prop. The example includes a select input to dynamically change the placement.

```html
<script setup>
import { ref } from 'vue'

const placement = ref('cover-top-start')
const placementOptions = [
  'top',
  'top-start',
  'top-end',
  'bottom',
  'bottom-start',
  'bottom-end',
  'right',
  'right-start',
  'right-end',
  'left',
  'left-start',
  'left-end',
  'cover-top',
  'cover-top-start',
  'cover-top-end',
  'cover-bottom',
  'cover-bottom-start',
  'cover-bottom-end',
  'cover-left',
  'cover-right',
]
</script>

<template>
  <var-select :hint="false" v-model="placement">
    <var-option 
      v-for="(item, index) in placementOptions" 
      :key="index"
      :label="item" 
    />
  </var-select>
  
  <div class="placement-container">
    <var-menu :placement="placement">
      <var-button type="primary">
        <var-icon name="star" />
      </var-button>
      <template #menu>
        <var-cell>Menu Option</var-cell>
        <var-cell>Menu Option</var-cell>
        <var-cell>Menu Option</var-cell>
      </template>
    </var-menu>
  </div>
</template>

<style>
.placement-container {
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
```

--------------------------------

### Injecting Body Script Start

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Injects script tags at the start of the body scripts section. Used for scripts that need to be executed early in the body.

```javascript
<% pcHtmlInject.body.scriptStart.forEach(function(tag) { %> <%- tag %> <% }); %>
```

--------------------------------

### Start Development Server without Hot Reload

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Starts the development server without enabling hot module replacement. This can be useful for debugging hot reload issues.

```bash
varlet dev --no-hot
```

--------------------------------

### Install Varlet Nuxt Module

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/docs/serverSideRendering.en-US.md

Execute this command to install the Varlet Nuxt Module. This module handles automatic configuration for on-demand and automatic imports within your Nuxt project.

```shell
npx nuxi@latest module add varlet
```

--------------------------------

### Varlet CLI Deploy Command with Target

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Shows how to use the 'varlet deploy' command to deploy the site to a specific target, like GitHub Pages.

```bash
varlet deploy --target github
```

--------------------------------

### Deploy Site with Multiple Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Deploys the documentation site with multiple options specified. This allows for detailed control over the deployment process.

```bash
varlet deploy --branch develop --message "Staging deploy" --env staging
```

--------------------------------

### Inject Body Script Start

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/mobile.html

Injects custom script tags at the start of the body's script section. This is often used for analytics or initialization scripts that should run after the initial DOM is parsed.

```javascript
mobileHtmlInject.body.scriptStart.forEach(function(tag) { %> <%- tag %> <% });
```

--------------------------------

### Serve Documentation Site Locally

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Serves the documentation site locally for development. This allows previewing changes in real-time.

```bash
varlet site --dev
```

--------------------------------

### Build Documentation Site for Specific Platform

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Builds the documentation site for a specific platform (e.g., 'mobile', 'desktop'). This allows generating platform-specific builds.

```bash
varlet site --platform mobile
```

--------------------------------

### TreeMenu Slots

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/tree-menu/docs/en-US.md

Allows for custom content injection at the start and end of each TreeMenu item.

```APIDOC
## TreeMenu Slots

### Description

Customizable slots for adding content to TreeMenu items.

### Slots

- **`start`**: Content rendered at the beginning of an item.
- **`end`**: Content rendered at the end of an item.
```

--------------------------------

### Router Configuration

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Example configuration for Vue Router, defining routes for a Varlet project.

```typescript
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;
```

--------------------------------

### Vue Router Setup

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Configuration for Vue Router to enable navigation within the application.

```typescript
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  // Route definitions here
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;
```

--------------------------------

### Basic DatePicker Usage

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/date-picker/docs/en-US.md

Demonstrates the basic setup for the DatePicker component to select a single date.

```html
<script setup>
import { ref } from 'vue'

const date = ref('2021-04-08')
</script>

<template>
  <var-date-picker v-model="date" />
</template>
```

--------------------------------

### Preview Production Build with All Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Previews the production build with all available options configured. This allows for the most comprehensive testing of the build under various conditions.

```bash
varlet preview --port 5000 --open --host 127.0.0.1 --https --cert cert.pem --key key.pem
```

--------------------------------

### Multiple Column Picker Example

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/picker/docs/en-US.md

Shows how to configure a picker with multiple independent columns. Each column can have its own set of options.

```html
<script setup>
import { ref } from 'vue'
import { Snackbar } from '@varlet/ui'

const columns = ref([
  [
    { text: 'A' }, 
    { text: 'B' }, 
    { text: 'C' }, 
    { text: 'D' }, 
    { text: 'E' }
  ],
  [
    { text: 'A' }, 
    { text: 'B' }, 
    { text: 'C' }, 
    { text: 'D' }, 
    { text: 'E' }
  ],
  [
    { text: 'A' }, 
    { text: 'B' }, 
    { text: 'C' }, 
    { text: 'D' }, 
    { text: 'E' }
  ]
])

function handleChange(values, indexes) {
  Snackbar(`values: ${values.toString()}, indexes: ${indexes.toString()}`)
}
</script>

<template>
  <var-picker :columns="columns" @change="handleChange" />
</template>
```

--------------------------------

### Serve Site with Specific Output Directory

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Serves the documentation site and outputs the built files to a specific directory. This is useful for integrating with other build processes.

```bash
varlet site --output ./build
```

--------------------------------

### Basic TimePicker Usage

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/time-picker/docs/en-US.md

Demonstrates the basic setup for the TimePicker component. Use `v-model` to bind the selected time.

```html
<script setup>
import { ref } from 'vue'

const date = ref('11:20')
</script>

<template>
  <var-time-picker v-model="date" />
</template>
```

--------------------------------

### Initialize Playground Environment and Detect Theme

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui-playground/index.html

Sets up the global process object and detects the user's preferred color scheme to apply the dark theme if necessary.

```javascript
window.process = { env: {} }
const theme = localStorage.getItem('varlet-ui-playground-prefer-theme')
if ( (theme && theme.toLowerCase().includes('dark')) || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches) ) {
  document.documentElement.classList.add('dark')
}
```

--------------------------------

### Varlet CLI Test Command with Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Illustrates the 'varlet test' command with options for running tests, like specifying a specific file or pattern.

```bash
varlet test --file "*.spec.ts"
```

--------------------------------

### Create New Component with All Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Creates a new component with all available options configured. This allows for the most comprehensive and customized scaffolding of new components.

```bash
varlet create MyAwesomeComponent --template advanced --dir src/components --style scss --skip-tests
```

--------------------------------

### Basic Usage with Slots

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/src/rail-navigation/docs/en-US.md

Demonstrates how to use the RailNavigation component with start and end slots for custom buttons and navigation items.

```html
<script setup>
import { ref } from 'vue'

const active = ref(0)
</script>

<template>
  <var-rail-navigation v-model:active="active" class="rail-navigation-slots">
    <template #start>
      <var-button type="primary" fab tonal>
        <var-icon name="magnify" :size="24" />
      </var-button>
    </template>

    <var-rail-navigation-item label="Home" icon="home" />
    <var-rail-navigation-item label="Favorite" icon="heart" />
    <var-rail-navigation-item label="Account" icon="account-circle" />

    <template #end>
      <var-button outline text fab round>
        <var-icon name="cog" :size="24" />
      </var-button>
    </template>
  </var-rail-navigation>
</template>

<style>
.rail-navigation-slots {
  min-height: 400px;
}
</style>
```

--------------------------------

### Generate Component API Documentation with All Options

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Generates API documentation with all available options configured. This allows for the most comprehensive and flexible documentation generation.

```bash
varlet gen-api --all --component Button --format json --output ./api-docs --theme dark
```

--------------------------------

### Serve Site with Multiple Themes and Languages

Source: https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/site/index.html

Serves the documentation site with multiple themes and languages. This allows previewing the site with various combinations of visual and linguistic styles.

```bash
varlet site --theme dark --theme light --lang en --lang zh-CN
```