Vue Example for Builder-Open

This example shows how to integrate @ugreen-nas/builder-open into a Vite 8 + Vue 3 + TypeScript project and organize an extensible UGOS Pro main application demo with routing.

Stack

Area	Details
Runtime	Vue 3, TypeScript
Build	Vite 8, @vitejs/plugin-vue
Builder	@ugreen-nas/builder-open (UGOS Vite build plugin)
Test / types	Vitest, vue-tsc
Routing	vue-router
Package manager	pnpm as the example (npm and yarn also work)

Layout

./
├── index.html
├── vite.config.ts
├── vitest.config.ts
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
├── public/
├── src/
│   ├── main.ts
│   ├── App.vue
│   ├── style.css
│   ├── assets/
│   ├── router/
│   │   └── index.ts
│   ├── pages/
│   │   ├── CapacityPage.vue
│   │   ├── WindowManagementPage.vue
│   │   ├── ApplicationAuthorizationPage.vue
│   │   └── ProjectBasicInfoPage.vue
│   ├── composables/
│   │   └── useApplicationAuthorizationInfo.ts
│   └── builder-open.integration.test.ts
└── README.md

Pages and routes

• The app uses a router to organize pages, with the left sidebar menu in this order:
  1. Application Capacity
  2. Application Window Management
  3. Application Authorization
  4. Project Basic Information
• The root path / redirects to /project-basic-info by default.

Path	Page	Description
/	Default entry	Redirects to /project-basic-info
/capacity	Application Capacity	Shows capability call examples using cloudWindow.useCapacity(...)
/window-management	Application Window Management	Shows window state queries and window control examples
/application-authorization	Application Authorization	Shows the authorization request flow and fields returned by /demoapi/v1/info
/project-basic-info	Project Basic Information	Shows basic metadata from package.json

Features

Application Capacity

This page demonstrates the following capability calls through cloudWindow.useCapacity(...) from @ugreen-nas/core:

• getThirdToken
• getComputerName
• getComputerUserFolder
• getDeviceLocation
• checkComputerPathExists({ path: '/' })
• getLocalPath('/')
• openAppCenterDetail({ appCenterType: 1 })

The page displays the most recent capability call, call status, and returned result.

Application Window Management

This page shows the current window state and provides examples for the following window operations:

• Read window state
• Set the window size to 1024 × 640
• Center the window
• Maximize
• Unmaximize
• Minimize
• Restore
• Enable always-on-top
• Disable always-on-top

The page displays the window ID, window width and height, coordinates, whether the window is maximized, whether it is minimized, and whether it is always on top.

Application Authorization

This page encapsulates authorization data fetching logic through useApplicationAuthorizationInfo:

1. It first tries to call cloudWindow.useCapacity('getThirdToken')
2. If the returned result includes third_token, it sends the Ugreen-Ttk request header when requesting /demoapi/v1/info
3. It displays authorization-related and user-related fields returned by the API and supports manual refresh

Project Basic Information

This page displays fixed basic metadata from package.json, including:

• Package name
• App ID
• Release name
• Author
• Project description
• Version

Quick start

pnpm install
pnpm dev

Build and checks

pnpm run typecheck
pnpm run test:run
pnpm run build

Related docs

• @ugreen-nas/builder-open: Refer to the README in the npm package and the publisher documentation.
• @ugreen-nas/core: Refer to the corresponding SDK documentation for capability calls and window management features.