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