A Vue code app is easier to ship than most makers expect, because a Power Apps code app is really just a Vite app underneath. The official template uses React, yet nothing about the platform is tied to React. As a result, you can scaffold Vue with TypeScript and turn it into a fully working Power Apps code app by adding a single Vite plugin.
This guide proves it with a build we actually tested. Moreover, it walks you through every command, so you can follow along from an empty folder to a published app.
Why a Vue code app works at all
The Power Apps glue lives in the Vite layer, not in framework code. Specifically, three pieces do the work. First, the @microsoft/power-apps package gives you the SDK and the power-apps npm CLI. Second, the @microsoft/power-apps-vite plugin sets the asset base path, configures CORS, serves your config, and prints the Local Play URL. Third, a small power.config.json file points the app at your environment.
Because none of that is React-specific, a Vue code app needs no special bridge. In fact, the current template carries no provider component and no init call at all. Therefore Vue drops straight in.
Build your Vue code app step by step
First, scaffold the Vue stack and install dependencies:
npm create vite@latest my-app -- --template vue-ts
cd my-app && npm install
Next, add the Power Apps SDK and the Vite plugin:
npm install @microsoft/power-apps
npm install -D @microsoft/power-apps-vite
Then register the plugin in vite.config.ts:
import { powerApps } from '@microsoft/power-apps-vite/plugin'
export default defineConfig({
plugins: [vue(), powerApps()],
})
After that, bind the app to your environment. This command opens a browser sign-in and writes power.config.json:
npx power-apps init -n "My Vue App" -e <environment-id>
Finally, run it locally and publish:
npm run dev
npm run build && npx power-apps push
When you run the dev server, the plugin prints a Local Play URL. Open it in the same browser profile as your Power Platform tenant. When you push, the CLI returns a live app URL.
What to check as you go
Each step has an obvious verification, so you never debug blind. For example, after npm install you should see no errors. Likewise, your vite.config.ts should import powerApps and list it in the plugins array. Above all, the production build must emit relative ./assets/... paths in dist/index.html; that relative path is proof the plugin took effect. Our Vue code app build passed exactly this check.
Vue-specific notes
You will not write a provider or an init call, since the plugin and SDK handle startup. To read user or app context, simply import getContext from @microsoft/power-apps/app inside a composable. Data connectors, meanwhile, generate plain TypeScript services under src/generated/; you call XxxService.getAll() from setup() just as a React app would from a hook.
Stress-test notes
Before publishing, we did more than build this Vue code app — we tested it the way a real project runs. We added the extras a normal app needs (page navigation and shared state), loaded some data in the background, and called the Power Apps SDK. Then we opened the running app in an automated browser (a tool called Playwright) and confirmed it worked with no errors.
Two things are worth knowing, even if you are new to code.
Don’t make the app wait for Power Apps before it shows anything. The SDK call that reads the signed-in user (getContext()) only finishes when the app runs inside Power Apps. On your laptop it simply never finishes, so if your code waits for it, you get a blank screen. The fix is easy: let that call run in the background instead of holding up the first screen.
Keep navigation inside one page (“hash” routing). Set up Vue Router in hash mode with createWebHashHistory(). In plain terms, that makes the address bar change after a #, which keeps links and the refresh button working once the app is embedded in Power Apps. Ordinary web addresses can fail there, so this small setting saves a lot of confusion. With those two habits, the Vue code app behaved exactly like the React baseline.
Where to go next
This Vue walkthrough is one stack in a larger set. If you want the big picture first, read the pillar guide on choosing any Vite framework for Power Apps code apps. From there you can compare Svelte, Solid, Preact, and Angular and pick the stack your team already knows.
For the authoritative platform reference, see the Power Apps code apps documentation on Microsoft Learn.
Leave a Reply