Zalo Mini App Development
Build Mini Apps for the Zalo platform using React, ZaUI components, and Zalo SDK APIs.
Quick Start
npm install -g zmp-cli
zmp create my-app && cd my-app && zmp start
See getting-started.md for full setup, deployment, and app-config.json.
Core Packages
npm install zmp-ui zmp-sdk
import { Button, Input, Modal } from "zmp-ui";
import "zmp-ui/zaui.css";
import { getUserInfo, authorize } from "zmp-sdk/apis";
References
APIs
- api-overview.md - API categories & patterns
- api-user.md - authorize, getUserInfo, getPhoneNumber
- api-storage.md - setItem, getItem, storage APIs
- api-ui.md - showToast, navigation, routing
- api-device.md - location, camera, QR, NFC
- api-zalo.md - followOA, openChat, share
ZaUI Components
- zaui-overview.md - Component list & design tokens
- zaui-layout.md - App, Page, Header, Tabs, Router
- zaui-display.md - Avatar, Icon, List, Swiper
- zaui-form.md - Button, Input, Select, DatePicker
- zaui-overlay.md - Modal, Sheet, ActionSheet
Design & Setup
Performance & React
Common Patterns
Get User Info
const { userInfo } = await getUserInfo({ autoRequestPermission: true });
// { id, name, avatar, followedOA }
Basic Page Layout
<App>
<Page>
<Header title="Home" />
<List>
<List.Item title="Item" suffix={<Icon icon="zi-chevron-right" />} />
</List>
</Page>
<BottomNavigation fixed>
<BottomNavigation.Item key="home" label="Home" icon={<Icon icon="zi-home" />} />
</BottomNavigation>
</App>
Resources
1---2name: zalo-mini-app3description: Build Zalo Mini Apps - lightweight web apps running inside Zalo super-app. This skill provides ZaUI components (Button, Input, Modal, Tabs, Avatar, etc.), JavaScript APIs (authorize, getUserInfo, getPhoneNumber, getLocation, Storage, Camera), Checkout SDK for payments, design guidelines, and development tools. Use when building Mini Apps, using ZaUI components, calling Zalo APIs, integrating payments, converting web apps to Mini Apps, or following Zalo design standards.4---56# Zalo Mini App Development78Build Mini Apps for the Zalo platform using React, ZaUI components, and Zalo SDK APIs.910## Quick Start11```bash12npm install -g zmp-cli13zmp create my-app && cd my-app && zmp start14```1516See [getting-started.md](./references/getting-started.md) for full setup, deployment, and app-config.json.1718## Core Packages19```bash20npm install zmp-ui zmp-sdk21```2223```js24import { Button, Input, Modal } from "zmp-ui";25import "zmp-ui/zaui.css";26import { getUserInfo, authorize } from "zmp-sdk/apis";27```2829## References3031### APIs32- [api-overview.md](./references/api-overview.md) - API categories & patterns33- [api-user.md](./references/api-user.md) - authorize, getUserInfo, getPhoneNumber34- [api-storage.md](./references/api-storage.md) - setItem, getItem, storage APIs35- [api-ui.md](./references/api-ui.md) - showToast, navigation, routing36- [api-device.md](./references/api-device.md) - location, camera, QR, NFC37- [api-zalo.md](./references/api-zalo.md) - followOA, openChat, share3839### ZaUI Components40- [zaui-overview.md](./references/zaui-overview.md) - Component list & design tokens41- [zaui-layout.md](./references/zaui-layout.md) - App, Page, Header, Tabs, Router42- [zaui-display.md](./references/zaui-display.md) - Avatar, Icon, List, Swiper43- [zaui-form.md](./references/zaui-form.md) - Button, Input, Select, DatePicker44- [zaui-overlay.md](./references/zaui-overlay.md) - Modal, Sheet, ActionSheet4546### Design & Setup47- [design-guidelines.md](./references/design-guidelines.md) - Colors, typography, UX48- [getting-started.md](./references/getting-started.md) - Setup, deploy, publish49- [web-design-guidelines.md](./references/web-design-guidelines.md) - Accessibility, forms, animations, touch, i18n5051### Performance & React52- [react-best-practices.md](./references/react-best-practices.md) - Waterfalls, bundle size, re-renders, JS performance5354## Common Patterns5556### Get User Info57```js58const { userInfo } = await getUserInfo({ autoRequestPermission: true });59// { id, name, avatar, followedOA }60```6162### Basic Page Layout63```jsx64<App>65 <Page>66 <Header title="Home" />67 <List>68 <List.Item title="Item" suffix={<Icon icon="zi-chevron-right" />} />69 </List>70 </Page>71 <BottomNavigation fixed>72 <BottomNavigation.Item key="home" label="Home" icon={<Icon icon="zi-home" />} />73 </BottomNavigation>74</App>75```7677## Resources78- Docs: https://miniapp.zaloplatforms.com/documents/79- Mini App Center: https://miniapp.zaloplatforms.com/80- React Best Practices: https://react.dev81- SWR: https://swr.vercel.app
suminhthanh