Live examples
The full MiniDev SDK template project (vue-default), built with Vite and embedded in the browser for real-time execution. Covers all 20 pages, 80+ SDK APIs, and 30+ UI components.
Interaction tips
- Tap a home card to open the full demo for that module
- SDK API calls show real visual feedback (Toast, Loading, Dialog, ActionSheet, etc.)
- Storage uses the browser’s
localStorage; data persists after a page refresh - Network requests use the httpbin API to perform real HTTP requests
- The bottom TabBar switches between the Home, Device, and User tabs
Modules covered by the template
This online demo is based on the Vue default template project built into MiniDev Studio, using Vue 3 + Vue Router + Vite. It includes the following complete demo pages:
| Module | Page path | APIs covered |
|---|---|---|
| 🚀 Home | pages/home/index | navigateTo, navigateToTab |
| 🧩 Components | pages/components-demo/index | 30+ m-* components + theming |
| 🎨 UI | pages/ui-demo/index | showToast, showLoading, showDialog, alert, showActionSheet, setNavigationBarTitle/Color |
| 🌐 Network | pages/network-demo/index | request (GET/POST/PUT/DELETE), interceptors |
| 💾 Storage | pages/storage-demo/index | setStorage, getStorage, removeStorage, clearStorage |
| 🧭 Router | pages/router-demo/index | navigateTo, navigateBack, reLaunch, navigateToTab, reLaunchTab, getCurrentPages, getRoute |
| ♻️ Lifecycle | pages/lifecycle-demo/index | onLoad, onReady, onShow, onHide, onUnload, onPullDownRefresh, onReachBottom |
| 📋 Clipboard | pages/clipboard-demo/index | setClipboard, getClipboard |
| 🗺️ Map | pages/map-demo/index | createMapContext (markers, polyline, polygon, circle, moveAlong) |
| 🚗 Vehicle | pages/vehicle-demo/index | getCurrentVehicleProfile, getCurrentVehicleStatus |
| 📊 Analytics | pages/analytics-demo/index | enableAutoAnalytics, recordEvent, enableNotification |
| ⚙️ App & Env | pages/app-demo/index | getLaunchOptionsSync, detectEnv, isSimulator, onAppShow/Hide, hello |
| 📱 Screen | pages/screen-demo/index | setScreenOrientation, getScreenBrightness, keepScreenOn |
| 🔒 Scroll lock | pages/disable-scroll-demo/index | disableScroll configuration demo |
| 📱 Device | pages/device-demo/index | getSystemInfo, getDeviceInfo, getAppInfo, getNetworkType, getLocation, vibrate, chooseImage, scanCode, uploadFile, TabBar control |
| 👤 Auth | pages/auth-demo/index | getUserProfile, requestSSOLogin, requestLinkedLogin, authenticateWithBiometric, requestAuthorizationToken |
| 🎯 Select | pages/select-demo/index | navigateBack with data (onBack mode) |
| 📩 Router target | pages/router-target/index | onLoad (receiving parameters), navigateBack with data |
| ♻️ Lifecycle target | pages/lifecycle-target/index | Sub-page lifecycle events |
Project structure
src/
├── pages/
│ ├── home/ # Home — entry to 14 module demos
│ ├── components-demo/ # UI components overview (Basic, Form, Layout, Display, Feedback, Media, Theme)
│ ├── ui-demo/ # Toast / Dialog / Alert / ActionSheet / NavBar / PreviewImage
│ ├── network-demo/ # HTTP (GET/POST/PUT/DELETE) + interceptors
│ ├── storage-demo/ # Local storage CRUD + batch test
│ ├── router-demo/ # navigateTo / navigateBack / reLaunch / tab navigation / page info
│ ├── router-target/ # Route target — receive params & onBack return data
│ ├── lifecycle-demo/ # Page lifecycle + pull-to-refresh + reach bottom
│ ├── lifecycle-target/ # Sub-page lifecycle test
│ ├── clipboard-demo/ # Clipboard read/write + quick presets
│ ├── map-demo/ # Map (markers / polyline / polygon / circle / moveAlong)
│ ├── vehicle-demo/ # Vehicle profile & live status
│ ├── analytics-demo/ # Event tracking + notification management
│ ├── app-demo/ # Launch options / environment / app visibility / bridge handshake
│ ├── screen-demo/ # Orientation / brightness / keep awake
│ ├── disable-scroll-demo/ # disableScroll (full-screen page)
│ ├── device-demo/ # Device info / network / location / vibrate / media / cross-app / TabBar
│ ├── auth-demo/ # User profile / SSO / linked login / biometrics / auth token
│ └── select-demo/ # List selector (onBack return data)
├── assets/styles/
│ ├── base.css # Global base styles
│ └── theme-variables.css # MD3 theme variables
└── App.vue # Root (router-view + keep-alive)Related documentation
- SDK overview — API categories and architecture
- Component library — full minidev-components documentation
- Getting started — set up a project from scratch