UI Component Libraries

To help developers quickly integrate common UI component libraries and eliminate tedious configurations, we've developed accompanying plugin functionality that supports UI components such as vant, element-plus, element-ui, ant-design-vue, winUI, and more.

Vant

Compatible with Vue 2 and Vue 3

Setup

1. Installation

NPM

$ npm add @winner-fed/plugin-vant -D
# Vue3
$ npm add vant
# Vue2
$ npm add vant@2.x

YARN

$ yarn add @winner-fed/plugin-vant -D
# Vue3
$ yarn add vant
# Vue2
$ yarn add vant@2.x

PNPM

$ pnpm add @winner-fed/plugin-vant -D
# Vue3
$ pnpm add vant
# Vue2
$ pnpm add vant@2.x

BUN

$ bun add @winner-fed/plugin-vant -D
# Vue3
$ bun add vant
# Vue2
$ bun add vant@2.x

2. Enable the plugin in the .winrc configuration file

import { defineConfig } from 'win';

export default defineConfig({
  plugins: ['@winner-fed/plugin-vant'],
  /**
   * @name vant plugin
   * @doc https://winjs-dev.github.io/winjs-docs/plugins/uiframework.html#vant
   */
  vant: {
    // No need to configure this property when using `Vant4.x`
    legacyFunction: ['Toast']
  }
});

Note

The legacyFunction property is designed to handle individual components in Vant2.x that are provided as functions, including Toast, Dialog, Notify, and ImagePreview components. When using function components, unplugin-vue-components cannot automatically import corresponding styles, so special handling is implemented (these special components will be globally imported in the generated plugin-vant/runtime.tsx, which has several benefits. Using Dialog as an example: 1) Prevents style issues, such as occasional animation anomalies when dialog pops up 2) Allows using this.$dialog in Vue files 3) Allows direct use of Dialog.alert(...) in JS files). The default value is []. The array only recognizes Toast, Dialog, Notify, ImagePreview.

After configuring in the .winrc configuration file, you no longer need to import components and styles when using components in business code. For example:

// 1. Need to remove this explicit import
- import { Dialog } from 'vant';

// 2. Use in JS files (cannot be used directly in app.js) or in script tags of Vue files
Dialog.confirm({
  title: 'Title',
  message: 'Dialog content',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

Tip: You should not use "full import" and "on-demand import" simultaneously in a single project, as this will cause code duplication and style conflicts.

Antdv

Compatible with Vue 2 and Vue 3

Setup

1. Installation

NPM

$ npm add @winner-fed/plugin-antdv -D
# Vue 3
$ npm add ant-design-vue
# Vue 2
$ npm add ant-design-vue@1.x

YARN

$ yarn add @winner-fed/plugin-antdv -D
# Vue 3
$ yarn add ant-design-vue
# Vue 2
$ yarn add ant-design-vue@1.x

PNPM

$ pnpm add @winner-fed/plugin-antdv -D
# Vue 3
$ pnpm add ant-design-vue
# Vue 2
$ pnpm add ant-design-vue@1.x

BUN

$ bun add @winner-fed/plugin-antdv -D
# Vue 3
$ bun add ant-design-vue
# Vue 2
$ bun add ant-design-vue@1.x

2. Enable the plugin in the .winrc configuration file

import { defineConfig } from 'win';

export default defineConfig({
  plugins: ['@winner-fed/plugin-antdv'],
  /**
   * @name ant-design-vue plugin
   * @doc https://winjs-dev.github.io/winjs-docs/plugins/uiframework.html#antdv
   */
  antdv: {}
});

ElementUI

Compatible with Vue 2

Setup

1. Installation

NPM

$ npm add @winner-fed/plugin-element-ui -D
$ npm add element-ui

YARN

$ yarn add @winner-fed/plugin-element-ui -D
$ yarn add element-ui

PNPM

$ pnpm add @winner-fed/plugin-element-ui -D
$ pnpm add element-ui

BUN

$ bun add @winner-fed/plugin-element-ui -D
$ bun add element-ui

2. Enable the plugin in the .winrc configuration file

import { defineConfig } from 'win';

export default defineConfig({
  plugins: [require.resolve('@winner-fed/plugin-element-ui')],
  /**
   * @name element-ui plugin
   * @doc https://winjs-dev.github.io/winjs-docs/plugins/uiframework.html#elementui
   */
  elementUI: {}
});

ElementPlus

Compatible with Vue 3

Setup

1. Installation

NPM

$ npm add @winner-fed/plugin-element-plus -D
$ npm add element-plus

YARN

$ yarn add @winner-fed/plugin-element-plus -D
$ yarn add element-plus

PNPM

$ pnpm add @winner-fed/plugin-element-plus -D
$ pnpm add element-plus

BUN

$ bun add @winner-fed/plugin-element-plus -D
$ bun add element-plus

2. Enable the plugin in the .winrc configuration file

import { defineConfig } from 'win';

export default defineConfig({
  plugins: ['@winner-fed/plugin-element-plus'],
  /**
   * @name element-plus plugin
   * @doc https://winjs-dev.github.io/winjs-docs/plugins/uiframework.html#elementplus
   */
  elementPlus: {}
});

Note

When using component APIs in element-plus, such as ElMessage, ElMessageBox, ElNotification, ElLoading, you must manually import the corresponding component styles, for example:

// Manually import these styles
import 'element-plus/es/components/message/style/css';
import { ElMessage } from 'element-plus';

WinUI

Compatible with Vue 2 and Vue 3

Setup

1. Installation

NPM

$ npm add @winner-fed/plugin-winui -D
# vue3
$ npm add @winner-fed/win-ui
# vue2
$ npm add @winner-fed/win-ui@1.x

YARN

$ yarn add @winner-fed/plugin-winui -D
# vue3
$ yarn add @winner-fed/win-ui
# vue2
$ yarn add @winner-fed/win-ui@1.x

PNPM

$ pnpm add @winner-fed/plugin-winui -D
# vue3
$ pnpm add @winner-fed/win-ui
# vue2
$ pnpm @winner-fed/win-ui@1.x

BUN

$ bun add @winner-fed/plugin-winui -D
# vue3
$ bun add @winner-fed/win-ui
# vue2
$ bun add @winner-fed/win-ui@1.x

2. Enable the plugin in the .winrc configuration file

import { defineConfig } from 'win';

export default defineConfig({
  plugins: ['@winner-fed/plugin-winui'],
  /**
   * @name winUI plugin
   * @doc https://winjs-dev.github.io/winjs-docs/plugins/uiframework.html#winui
   */
  winUI: {
    // No need to configure this property when using `WinUI 3.x`
    legacyFunction: ['Toast']
  }
});

Note

The legacyFunction property is designed to handle individual components in WinUI1.x that are provided as functions, including Toast, Dialog, Notify, and ImagePreview components. When using function components, unplugin-vue-components cannot automatically import corresponding styles, so special handling is implemented. The default value is []. The array only recognizes Toast, Dialog, Notify, ImagePreview.

After configuring in the .winrc configuration file, you no longer need to import components and styles when using components in business code. For example:

// 1. Need to remove this explicit import
- import { Dialog } from '@winner-fed/win-ui';

// 2. Use in JS files (cannot be used directly in app.js) or in script tags of Vue files
Dialog.confirm({
  title: 'Title',
  message: 'Dialog content',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });

Tip: You should not use "full import" and "on-demand import" simultaneously in a single project, as this will cause code duplication and style conflicts.