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

• design-guidelines.md – Colors, typography, UX
• getting-started.md – Setup, deploy, publish
• web-design-guidelines.md – Accessibility, forms, animations, touch, i18n

Performance & React

• react-best-practices.md – Waterfalls, bundle size, re-renders, JS performance

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

• Docs: https://miniapp.zaloplatforms.com/documents/
• Mini App Center: https://miniapp.zaloplatforms.com/
• React Best Practices: https://react.dev
• SWR: https://swr.vercel.app