Vue Sample Tool

A complete example tool for Power Platform Tool Box built with Vue 3, Composition API, Vite, and TypeScript.

Features

This sample demonstrates:

- ✅ Vue 3 with Composition API and
`

$3

Global styles are in src/style.css. Components can include scoped styles:

`vue

`

Building for Production

`bash
npm run build
`

Output goes to dist/ directory with:
- Optimized and minified JavaScript
- CSS extraction and minification
- Asset optimization
- Source maps for debugging

Troubleshooting

$3

If you encounter TypeScript errors:
1. Ensure all dependencies are installed: npm install
2. Check TypeScript version: tsc --version
3. Clean and rebuild: rm -rf dist && npm run build

$3

If reactive values don't update:
- Ensure you're using ref() or reactive()
- Access ref values with .value in script
- No need for .value in template

$3

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

$3

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

Vite Configuration

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'
}
});
`

Vue 3 Composition API

This sample uses Vue 3's Composition API with
``

Resources

- Vue 3 Documentation
- Composition API Guide
- Vite Documentation
- TypeScript Documentation
- Tool Development Guide
- API Reference
- Power Platform Tool Box Repository

License

GPL-3.0 - See LICENSE file in repository root