Ant Design Mobile For Vue3

A mobile Ant Design UI library based on Vue 3

Install

npm install ant-design-mobile-vue3

or

yarn add ant-design-mobile-vue3

or

pnpm add ant-design-mobile-vue3

Usage

Full Import

import { createApp } from 'vue'
import App from './App.vue'

// Import global behaviors & CSS variables (px tester, body styles, etc.)
import 'ant-design-mobile-vue3/global'
// Import all components
import * as AntMobile from 'ant-design-mobile-vue3'
// Import component styles
import 'ant-design-mobile-vue3/dist/index.css'

const app = createApp(App)

// Register all components globally
Object.keys(AntMobile).forEach(key => {
  if (key !== 'default') {
    app.component(key, AntMobile[key])
  }
})

app.mount('#app')

On-Demand Import

<template>
  <Button color="primary">Primary Button</Button>
</template>

<script setup lang="ts">
import { Button } from 'ant-design-mobile-vue3'
import 'ant-design-mobile-vue3/global'
import 'ant-design-mobile-vue3/dist/index.css'
</script>

ℹ️ Import ant-design-mobile-vue3/global once in your app entry to enable responsive px conversion and global styles.

Locales

import zhCN from 'ant-design-mobile-vue3/locales/zh-CN'
import enUS from 'ant-design-mobile-vue3/locales/en-US'

console.log(zhCN, enUS)

All locale files from src/locales are bundled as individual entry points, so you can import only what you need.

Components

This library includes the following components:

• Button
• Input
• Form
• List
• Dialog
• Toast
• Loading
• Tabs
• Picker
• DatePicker
• Checkbox
• Radio
• Switch
• Stepper
• Badge
• Tag
• Image
• And many more...

Reference

Refer to Ant Design Mobile for React for component API and usage documentation.

License

MIT

Author

zhangyanming