Build a Vue Code App on Power Apps with Vite

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 separate @microsoft/power-apps-cli package gives you the pa command-line tool. 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

If create-vite asks Install with npm and start now?, answer No and run the cd and npm install lines yourself. Saying Yes also starts the dev server, which you do not need yet. The commands are shown one per line on purpose: Windows PowerShell 5.1 rejects && between commands, while PowerShell 7, cmd and bash accept either form.

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 vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import { powerApps } from '@microsoft/power-apps-vite/plugin'   // added

export default defineConfig({
  plugins: [vue(), powerApps()],   // powerApps() added
})

After that, install the Power Apps CLI once (it provides the pa command), then bind the app to your environment. The init command opens a browser sign-in if you are not signed in yet, adds the CLI to the project as a dev dependency, and writes power.config.json. Its output ends with a hint to run npm install again; that installs the project-local copy of the CLI and is optional, because the global pa command already works:

npm install --global @microsoft/power-apps-cli
pa app init -n "My Vue App" -e <environment-id>

Finally, run it locally and publish:

pa app run
npm run build
pa app push

When pa app run starts the dev server, the plugin prints a Local Play URL. Open it in the same browser profile as your Power Platform tenant, and accept the browser’s Local Network Access prompt the first time: Chrome and Edge block calls from the player to localhost until you do. When you push, the CLI returns a live app URL.

This is what you should see when you open the live app URL: the app running inside Power Apps after pa app push, with the name you gave pa app init in the header.

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.