A sample Power Platform Tool Box tool built with Vue 3, Vite, and TypeScript
npm install pptb-vue-sample-toolA complete example tool for Power Platform Tool Box built with Vue 3, Composition API, Vite, and TypeScript.
This sample demonstrates:
- ✅ Vue 3 with Composition API and syntax
- ✅ TypeScript with full type safety
- ✅ Vite for fast development and optimized builds
- ✅ ToolBox API Integration
- Connection management with real-time updates
- Notifications system
- Clipboard operations
- File save dialogs
- Theme detection
- Event subscription and handling
- ✅ Dataverse API Usage
- FetchXML queries
- CRUD operations (Create, Read, Update, Delete)
- Entity metadata retrieval
- Error handling
- ✅ Best Practices
- Composables (Vue's equivalent to React hooks) for API integration
- Component-based architecture with Single File Components
- Reactive state management with ref and reactive
- Event-driven architecture with emit
- Clean, modern UI design
- Responsive layout
- Node.js 18 or higher
- Power Platform Tool Box desktop application
``bash`
npm install
`bash`
npm run build
This compiles the TypeScript and Vue code, and outputs to the dist/ directory.
For local development with hot module replacement:
`bash`
npm run dev
Note: The dev server will run, but ToolBox APIs will only be available when loaded within Power Platform Tool Box.
``
vue-sample/
├── src/
│ ├── components/
│ │ ├── ConnectionStatus.vue # Connection display component
│ │ ├── ToolboxAPIDemo.vue # ToolBox API examples
│ │ ├── DataverseAPIDemo.vue # Dataverse API examples
│ │ └── EventLog.vue # Event logging component
│ ├── composables/
│ │ └── useToolboxAPI.ts # Composables for APIs
│ ├── App.vue # Main app component
│ ├── main.ts # Vue entry point
│ ├── style.css # Global styles
│ └── vite-env.d.ts # Type definitions
├── index.html # HTML entry point
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
├── tsconfig.node.json # Node TypeScript configuration
├── package.json # Package configuration
└── README.md # This file
The sample includes reusable composables for API integration:
#### useConnection()`typescript`
const { connection, isLoading, refreshConnection } = useConnection();
- Manages Dataverse connection state with reactivity
- Automatically loads on mount
- Provides refresh function
#### useToolboxEvents(callback)`typescript`
useToolboxEvents((event, data) => {
console.log('Event:', event, data);
});
- Subscribes to platform events
- Automatic setup on mount
#### useEventLog()`typescript`
const { logs, addLog, clearLogs } = useEventLog();
- Manages event log state reactively
- Keeps last 50 entries
- Console integration
Each component is a Single File Component (SFC) with
`
Global styles are in src/style.css. Components can include scoped styles:
`vue`
`bash`
npm run build
Output goes to dist/ directory with:
- Optimized and minified JavaScript
- CSS extraction and minification
- Asset optimization
- Source maps for debugging
If you encounter TypeScript errors:
1. Ensure all dependencies are installed: npm installtsc --version
2. Check TypeScript version: rm -rf dist && npm run build
3. Clean and rebuild:
If reactive values don't update:
- Ensure you're using ref() or reactive().value
- Access ref values with in script.value
- No need for in template
If toolboxAPI or dataverseAPI is undefined:
- The tool must be loaded within Power Platform Tool Box
- These APIs are injected by the platform
- They are not available in standalone dev mode
If connection is null:
- Open Power Platform Tool Box
- Create a connection to a Dataverse environment
- The tool will automatically detect the connection via events
The vite.config.ts is configured for Power Platform Tool Box:
`typescript`
export default defineConfig({
plugins: [vue()],
base: './', // Relative paths for embedded usage
build: {
outDir: 'dist',
assetsDir: 'assets'
}
});
This sample uses Vue 3's Composition API with
``
- Vue 3 Documentation
- Composition API Guide
- Vite Documentation
- TypeScript Documentation
- Tool Development Guide
- API Reference
- Power Platform Tool Box Repository
GPL-3.0 - See LICENSE file in repository root