template: use pnpm instead of npm (#700)

Author: ascott18

CHANGELOG.md

@@ -12,12 +12,20 @@
 - `UseViteDevelopmentServer` now exposes a `PackageManagerCommand` option (defaults to "npm") to configure which package manager runs the dev script. Improved error messages when the configured package manager is not installed.
 - Fix: `no-sort-in-computed` eslint rule false positive when sorting a locally-declared array variable inside `computed()`.
 - Fix: Handle the possibility that Audit logging's `AuditInterceptor` can end up singleton under specific EF usage patterns (e.g. `AddDbContextFactory` + not using `OnConfiguring`).
+- Re-exported `isAxiosError` from `coalesce-vue` to avoid phantom dependency on `axios`.
 
 ## Template Changes
 - Added Vuetify 4 CSS layer ordering to `index.html` to work around Vite 8/Rolldown CSS ordering bugs.
-- Replaced deprecated `typeface-roboto` with `@fontsource/roboto/latin.css` and `@fontsource/roboto/latin-italic.css`.
+- Replaced deprecated `typeface-roboto` package with `@fontsource/roboto/latin.css` and `@fontsource/roboto/latin-italic.css`.
+- The template now uses pnpm instead of npm for better DX. To migrate an existing project:
+  1. Install pnpm: `npm install -g pnpm@11`
+  2. Delete `package-lock.json`, and copy `pnpm-workspace.yaml` and the root `package.json` from the template into your solution root (next to your `.slnx`). Add your web project as a package in the workspace (`packages: - YourProject.Web`).
+  3. Run `pnpm install`.
+  4. In `Program.cs`, add `c.PackageManagerCommand = "pnpm";` to `UseViteDevelopmentServer` options.
+  5. Add any phantom dependencies that pnpm's strict `node_modules` structure reveals (e.g. `date-fns`, `date-fns-tz`). Build errors or runtime import failures will indicate which ones are missing.
+  6. Update CI/CD scripts to use `pnpm` instead of `npm`. Add a step to install pnpm. Run `pnpm install --frozen-lockfile` from the solution root. Replace other `npm` commands with `pnpm`.
 - The first-party password/passkey login flow is now two-stage: enter username first, then choose between password, passkey, or a one-time email code. When `Passkeys` is enabled, users who sign in with password or email code are then prompted to create a passkey.
-- `Role.Permissions` are no longer EF-mapped as enums. The EF property is now `List<string>`, with a `[NotMapped]` `PermissionEnums` wrapper that silently drops unrecognized values. This prevents `InvalidOperationException` when a `Permission` enum member is removed but old values remain in the database.
+- `Role.Permissions` are no longer EF-mapped as enums. The EF property is now `List<string>`, with a `[NotMapped] PermissionEnums` wrapper that drops unrecognized values. This prevents `InvalidOperationException` when a `Permission` enum member is removed but old values remain in the database.
 - Added rate limiting to authentication pages (sign-in, register, forgot password, reset password, email confirmation, external login) to mitigate brute-force abuse.
 
 # 6.4.0

docs/stacks/vue/getting-started.md

@@ -8,6 +8,7 @@ Before you begin, ensure that you have all the required tools installed:
 
 - Recent version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download).
 - A recent version of [Node.js](https://nodejs.org/) (an LTS version is recommended).
+- [pnpm](https://pnpm.io/) - install with `npm install -g pnpm@11`
 - An IDE: [VS Code](https://code.visualstudio.com/) with the [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) extension is recommended. [JetBrains Rider](https://www.jetbrains.com/rider/) also works.
 
 ## Creating a Project
@@ -58,8 +59,8 @@ font-weight: 600;
 dotnet new install IntelliTect.Coalesce.Vue.Template
 dotnet new coalescevue -n {{effectiveNamespace}} -o {{effectiveFolder}} {{templateParams}}
 cd {{effectiveFolder}}/*.Web
-npm i --min-release-age=0
-npm run lint:fix
+pnpm install
+pnpm lint:fix
 dotnet restore
 dotnet coalesce
 
@@ -104,7 +105,7 @@ The structure of the Web project follows the conventions of both ASP.NET Core an
 The frontend build system uses [Vite](https://vitejs.dev/). You are strongly encouraged to read through at least the first few pages of the [Vite Documentation](https://vitejs.dev/guide/) before getting started on any development.
 :::
 
-During development, no special effort is required to build your frontend code. Coalesce's `UseViteDevelopmentServer` in ASP.NET Core will take care of that automatically when the application starts. Just make sure NPM packages have been installed (`npm ci`). For more details on how the Vite integration works, see [Vite Integration](/topics/vite-integration.md).
+During development, no special effort is required to build your frontend code. Coalesce's `UseViteDevelopmentServer` in ASP.NET Core will take care of that automatically when the application starts. Package install is automatic via the `dev` script in `package.json`. For more details on how the Vite integration works, see [Vite Integration](/topics/vite-integration.md).
 
 @[import-md "after":"MARKER:data-modeling", "before":"MARKER:data-modeling-end"](../agnostic/getting-started-modeling.md)
 

src/coalesce-mcp/src/tools/upgrade-prompt.ts

@@ -287,6 +287,7 @@ Use \`read_template_file\` to compare these files against the user's versions an
 - **eslint.config.mjs** — New rules, plugin changes. Note if user is still on \`.eslintrc\`.
 - **tsconfig.json**, **tsconfig.node.json**
 - **pnpm-workspace.yaml** — overrides, allowBuilds, and other pnpm settings
+- **.npmrc**
 - **.editorconfig**
 - **.vscode/settings.json**
 - **.vscode/mcp.json**

templates/Coalesce.Vue.Template/TestLocal.ps1

@@ -37,10 +37,10 @@ Push-Location $outDir/*.Web
 try {
     dotnet restore
     dotnet coalesce
-    npm i
+    pnpm install
     npx tsc -p ./tsconfig.node.json
-    npm run build
-    npm run lint:fix # ensure all lint issues are auto-fixable
+    pnpm build
+    pnpm lint:fix # ensure all lint issues are auto-fixable
     # CS9113: Parameter '<param>' is unread. (too annoying to fix this for every possible combination of template params)
     dotnet build .. /nowarn:CS9113
 

templates/Coalesce.Vue.Template/content/.github/workflows/build-test-and-deploy.yml

@@ -49,9 +49,11 @@ jobs:
         with:
           node-version: 24.x
 
-      - name: npm ci
-        run: npm ci
-        working-directory: Coalesce.Starter.Vue.Web
+      - name: Install pnpm
+        run: npm install -g pnpm@11
+
+      - name: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Restore Nuget packages
         run: dotnet restore
@@ -60,12 +62,12 @@ jobs:
         run: dotnet coalesce --what-if --verify
         working-directory: Coalesce.Starter.Vue.Web
 
-      - name: npm run lint
-        run: npm run lint
+      - name: pnpm lint
+        run: pnpm lint
         working-directory: Coalesce.Starter.Vue.Web
 
-      - name: npm run build
-        run: npm run build
+      - name: pnpm build
+        run: pnpm build
         working-directory: Coalesce.Starter.Vue.Web
 
       - name: dotnet build

templates/Coalesce.Vue.Template/content/.npmrc

@@ -308,6 +308,7 @@
             "**/*.g.ts",
             "**/*.lock.json",
             "**/package-lock.json",
+            "**/pnpm-lock.yaml",
             "**/DEVELOPMENT.md"
           ]
         },

templates/Coalesce.Vue.Template/content/.template.config/template.json

@@ -12,7 +12,7 @@
   "xml.format.maxLineWidth": 0,
   "chat.tools.terminal.autoApprove": {
     "dotnet test": true,
-    "npm test": true,
+    "pnpm test": true,
     "dotnet tool restore": true,
     "dotnet restore": true,
     "dotnet build": true

templates/Coalesce.Vue.Template/content/.vscode/settings.json

@@ -10,13 +10,13 @@ An `IntelliTect Coalesce`–based project. Projects:
 - Data: EF Core entity models, services, business logic, etc
 - Data.Test: TUnit automated tests for the Data project.
 - Migrations: EF Core Migrations assembly. Create and manage migrations here, e.g. `dotnet ef migrations add MigrationName`. Run `dotnet ef` in this project's working directory, don't pass extra args like startup-project to `dotnet ef` calls.
-- Web: ASP.NET Core server. Serves both API endpoints and frontend Vue assets. Automatically launches Vite dev server - don't do `npm run dev` manually.
+- Web: ASP.NET Core server. Serves both API endpoints and frontend Vue assets. Automatically launches Vite dev server - don't do `pnpm dev` manually.
 - Web/src: Vite, Vue 3, Vuetify 4, and Coalesce for data binding and API access.
 
 - Coalesce generates DTOs, controllers, and TypeScript from your models. After making changes to your models, invoke code generation with the `coalesce_generate` tool. The `coalesce.json` file is in the workspace root.
-- If you run tests with `npm test`, pass `--run` to avoid running in interactive mode. E.g. `npm test -- --run`.
+- If you run tests with `pnpm test`, pass `--run` to avoid running in interactive mode. E.g. `pnpm test --run`.
 - In Vue files, you don't need to add import statements for components nor composables from `vue`, `vue-router`, or those defined by the project's source code - they will be auto-imported by Vite.
-- Do not run `npm run build` to validate changes unless the user asks because this ruins HMR if the app is running. Instead, validate frontend changes by checking for problems with `read/problems`.
+- Do not run `pnpm build` to validate changes unless the user asks because this ruins HMR if the app is running. Instead, validate frontend changes by checking for problems with `read/problems`.
 - Use SCSS for all styles - `lang="scss"` in .vue files.
 - Use `date-fns` for date manipulation and formatting, or `.$display(propName)` on Coalesce ViewModel instances, or `c-display` in Vue templates.