@abgov/nx-adsp 13.18.0-beta.2 → 13.18.0-beta.4

package/generators.json

@@ -60,6 +60,11 @@
       "description": "Ensures the shared GoA Vue wrapper library (interim). Invoked by vue-app; runnable directly to repair.",
       "hidden": true
     },
+    "vue-detail-view": {
+      "factory": "./src/generators/vue-detail-view/vue-detail-view",
+      "schema": "./src/generators/vue-detail-view/schema.json",
+      "description": "Generator that adds a record-detail view (RecordDetailShell + a --fields spec) to an existing vue-app project."
+    },
     "mean": {
       "factory": "./src/generators/mean/mean",
       "schema": "./src/generators/mean/schema.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "13.18.0-beta.2",
+  "version": "13.18.0-beta.4",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",

package/src/generators/vue-app/files/AGENTS.md__tmpl__

@@ -31,7 +31,11 @@ executors read options from `project.json` and do not prompt.
 | File | Purpose |
 |------|---------|
 | `src/main.ts` | Entry — registers Pinia, Router, and Keycloak plugin (incl. `onAuthRefreshError`, which flags the session store as expired) |
+<% if (layout === 'internal') { %>
+| `src/App.vue` | Shell — `AppSideMenu` (side-menu shell, Sign in/out as an account item), `SessionExpiredBanner`, `<RouterView>` wrapped in `AppLayout` |
+<% } else { %>
 | `src/App.vue` | Shell — `AppHeader` with sign-in/out in its `utilities` slot, `SessionExpiredBanner`, hero banner, `<RouterView>` wrapped in `AppLayout`, `AppFooter` |
+<% } %>
 | `src/stores/session.ts` | Pinia store — `expired` flag behind `SessionExpiredBanner`, set from `main.ts`'s `onAuthRefreshError` hook |
 | `src/router/index.ts` | Routes — `/protected` guarded with `requiresAuth` meta |
 | `src/views/HomeView.vue` | Public page — calls public and private APIs |
@@ -155,12 +159,27 @@ across every Vue app in this workspace — fix or extend a wrapper once in
 > stopgap until GoA DS ships an official `@abgov/vue-components`. When it lands,
 > delete `primitives/` and repoint imports at that package — the names/props are
 > intended to match, so it's a scope swap. This does **not** apply to the
-> `AppHeader`/`AppLayout`/`AppFooter`/`SessionExpiredBanner` shell components
-> below — those live in the same library's `patterns/` folder and are permanent
-> (app-shell composition has no equivalent in a design-system package).
+> `AppHeader`/`AppLayout`/`AppFooter`/`AppSideMenu`/`SessionExpiredBanner` shell
+> components below — those live in the same library's `patterns/` folder and are
+> permanent (app-shell composition has no equivalent in a design-system package).
 
 ### App shell components
 
+This app was generated with **`--layout=<%= layout %>`**.
+<% if (layout === 'internal') { %>
+`App.vue` is a staff-facing, side-menu shell built from shared components imported
+from **`<%= goaImportPath %>`**, not hand-rolled markup:
+
+| Component | Purpose |
+|---|---|
+| `AppSideMenu` | `goa-work-side-menu`. Takes `heading`/`primaryItems`/`secondaryItems`/`accountItems` props (each item: `{ label, to?, icon?, badge?, current? }`) and emits `itemClick` — it doesn't know about routing or auth, so `App.vue` computes `current`/handles the click itself. `App.vue` currently only populates `accountItems` (a single Sign in/out item); add real nav items to `primaryItems`/`secondaryItems` as routes are added |
+| `AppLayout` | The content gutter every view renders inside (see the key files table). Also renders the skip-to-main-content link |
+| `SessionExpiredBanner` | A `v-model:show` banner with `signIn`/`dismiss` emits. Bound to the `useSessionStore()` Pinia store (`src/stores/session.ts`), which `main.ts`'s `onAuthRefreshError` hook flips when the refresh token itself has expired |
+
+There's no `AppHeader`/`AppFooter`/hero banner in this layout — `AppSideMenu` is the
+whole top-level shell, matching the real GoA "internal portal" pattern (no public
+marketing chrome around a staff tool).
+<% } else { %>
 `App.vue` is built from four shared components imported from
 **`<%= goaImportPath %>`**, not hand-rolled markup:
 
@@ -170,10 +189,16 @@ across every Vue app in this workspace — fix or extend a wrapper once in
 | `AppLayout` | The content gutter every view renders inside (see the key files table). Also renders the skip-to-main-content link |
 | `AppFooter` | `goa-app-footer` with the standard GoA nav/meta links (Services/Contact/Terms of Use, Privacy/Disclaimer/Accessibility) |
 | `SessionExpiredBanner` | A `v-model:show` banner with `signIn`/`dismiss` emits. Bound to the `useSessionStore()` Pinia store (`src/stores/session.ts`), which `main.ts`'s `onAuthRefreshError` hook flips when the refresh token itself has expired |
-
+<% } %>
 These are shared across every Vue app in this workspace — fix or extend one once
 in `libs/vue-components/src/lib/patterns/`, the same way as the `Goab*` wrappers.
 
+A second, **`--layout=<%= layout === 'internal' ? 'header' : 'internal' %>`** frontend
+can be scaffolded against the same backend with `nx g @abgov/nx-adsp:vue-app <name>
+--pairedProject <%= pairedProject || 'your-backend-project' %> --layout=<%= layout === 'internal' ? 'header' : 'internal' %>`
+— a public-facing app and a staff-facing one sharing one API, without a separate
+composite generator.
+
 ## Adding a view
 
 1. Create `src/views/MyFeatureView.vue` as a `<script setup>` SFC. **Don't add your

package/src/generators/vue-app/files/src/App.spec.ts__tmpl__

@@ -34,7 +34,32 @@ const router = createRouter({
   history: createMemoryHistory(),
   routes: [{ path: '/', component: { template: '<div />' } }],
 });
+<% if (layout === 'internal') { %>
+describe('App shell (internal / side-menu)', () => {
+  it('shows a Sign in account item when unauthenticated', () => {
+    const wrapper = mount(App, {
+      global: { plugins: [router, createPinia()], stubs: { RouterView: true } },
+    });
+    const item = wrapper.find('goa-work-side-menu-item[label="Sign in"]');
+    expect(item.exists()).toBe(true);
+  });
 
+  it('clicking the account item calls keycloak.login (guards against lost reactivity)', async () => {
+    // Same bug class as the header shell: destructuring useKeycloak() would
+    // freeze `keycloak` at undefined, so login() would be a permanent no-op.
+    const kc = useKeycloak();
+    const wrapper = mount(App, {
+      global: { plugins: [router, createPinia()], stubs: { RouterView: true } },
+    });
+    // AppSideMenu binds @click.prevent directly on goa-work-side-menu-item (not
+    // an underscore-prefixed event, unlike the goa-* form elements) -- trigger
+    // a plain 'click'.
+    const item = wrapper.find('goa-work-side-menu-item[label="Sign in"]');
+    await item.trigger('click');
+    expect(kc.keycloak?.login).toHaveBeenCalled();
+  });
+});
+<% } else { %>
 describe('App shell header', () => {
   it('shows Sign in when unauthenticated', () => {
     const wrapper = mount(App, {
@@ -57,7 +82,7 @@ describe('App shell header', () => {
     expect(kc.keycloak?.login).toHaveBeenCalled();
   });
 });
-
+<% } %>
 describe('App shell session-expired banner', () => {
   it('is hidden until the session store flags an expired session', async () => {
     const pinia = createPinia();

package/src/generators/vue-app/files/src/App.vue__tmpl__

@@ -2,7 +2,11 @@
 import { computed } from 'vue';
 import { useKeycloak } from '@dsb-norge/vue-keycloak-js';
 import { RouterView, useRoute } from 'vue-router';
+<% if (layout === 'internal') { %>
+import { AppLayout, AppSideMenu, SessionExpiredBanner } from '<%= goaImportPath %>';
+<% } else { %>
 import { AppHeader, AppLayout, AppFooter, SessionExpiredBanner } from '<%= goaImportPath %>';
+<% } %>
 import { useSessionStore } from './stores/session';
 
 // Keep the reactive instance — do NOT destructure. useKeycloak() returns a
@@ -15,7 +19,7 @@ const session = useSessionStore();
 // Content width per view, from route meta (default 'page'). Views opt into a
 // different width with `meta: { layout: 'wide' | 'form' }` in the router.
 const route = useRoute();
-const layout = computed(
+const contentWidth = computed(
   () => (route.meta.layout as 'page' | 'wide' | 'form' | undefined) ?? 'page'
 );
 
@@ -26,9 +30,40 @@ function signInAgain() {
   session.dismiss();
   kc.keycloak?.login();
 }
+<% if (layout === 'internal') { %>
+
+// AppSideMenu's account items are presentational -- it doesn't know about
+// Keycloak, it just renders whatever's passed and emits itemClick on click.
+const accountItems = computed(() => [
+  kc.authenticated
+    ? { label: kc.fullName ? `Sign out (${kc.fullName})` : 'Sign out' }
+    : { label: 'Sign in' },
+]);
+
+function onAccountItemClick() {
+  if (kc.authenticated) logout();
+  else login();
+}
+<% } %>
 </script>
 
 <template>
+<% if (layout === 'internal') { %>
+  <AppSideMenu
+    heading="<%= projectName %>"
+    :account-items="accountItems"
+    @item-click="onAccountItemClick"
+  >
+    <SessionExpiredBanner
+      v-model:show="session.expired"
+      @sign-in="signInAgain"
+      @dismiss="session.dismiss"
+    />
+    <AppLayout :variant="contentWidth">
+      <RouterView />
+    </AppLayout>
+  </AppSideMenu>
+<% } else { %>
   <AppHeader heading="<%= projectName %>">
     <template #utilities>
       <goa-button-group alignment="end">
@@ -51,10 +86,11 @@ function signInAgain() {
     @dismiss="session.dismiss"
   />
   <goa-hero-banner heading="<%= projectName %>" backgroundurl="/assets/banner.jpg" />
-  <AppLayout :variant="layout">
+  <AppLayout :variant="contentWidth">
     <RouterView />
   </AppLayout>
   <AppFooter />
+<% } %>
 </template>
 
 <style>

package/src/generators/vue-app/schema.d.ts

@@ -13,6 +13,8 @@ export interface Schema {
   skipAgent?: boolean;
   /** Name of an existing backend service project to derive the nginx/dev-server proxy and the adsp:proxy-service: sandbox tag from. */
   pairedProject?: string;
+  /** Top-level app shell: 'header' (default, public-facing) or 'internal' (staff-facing side menu, no header/banner/footer). */
+  layout?: 'header' | 'internal';
 }
 
 export interface NormalizedSchema extends Schema {

package/src/generators/vue-app/schema.json

@@ -83,6 +83,12 @@
       "type": "boolean",
       "description": "Skip the consultAgent interaction and generate base scaffolding only.",
       "default": false
+    },
+    "layout": {
+      "type": "string",
+      "description": "Top-level app shell: 'header' is a goa-app-header + hero banner + footer (public-facing). 'internal' is a goa-work-side-menu shell with no header/banner/footer (staff-facing). Both wrap views in the same AppLayout content gutter. Pair two vue-app runs against the same --pairedProject (once each) for a public+internal frontend pairing over one backend.",
+      "enum": ["header", "internal"],
+      "default": "header"
     }
   },
   "required": ["name", "env"],

package/src/generators/vue-app/vue-app.js

@@ -14,6 +14,7 @@ const paired_project_1 = require("../../utils/paired-project");
 const vue_components_1 = require("../vue-components/vue-components");
 function normalizeOptions(host, options) {
     return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a;
         const projectName = (0, devkit_1.names)(options.name).fileName;
         const projectRoot = `${(0, devkit_1.getWorkspaceLayout)(host).appsDir}/${projectName}`;
         const openshiftDirectory = `.openshift/${projectName}`;
@@ -36,7 +37,7 @@ function normalizeOptions(host, options) {
             projectRoot,
             openshiftDirectory,
             adsp,
-            nginxProxies, pairedProjectTag: paired === null || paired === void 0 ? void 0 : paired.tag });
+            nginxProxies, pairedProjectTag: paired === null || paired === void 0 ? void 0 : paired.tag, layout: (_a = options.layout) !== null && _a !== void 0 ? _a : 'header' });
     });
 }
 function addFiles(host, options) {

package/src/generators/vue-app/vue-app.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue-app.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-app/vue-app.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"vue-app.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-app/vue-app.ts"],"names":[],"mappings":"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"}

package/src/generators/vue-app/vue-app.spec.ts

@@ -172,6 +172,7 @@ describe('Vue App Generator', () => {
       'AppLayout',
       'AppHeader',
       'AppFooter',
+      'AppSideMenu',
       'SessionExpiredBanner',
     ]) {
       expect(host.exists(`${patterns}/${name}.vue`)).toBeTruthy();
@@ -185,6 +186,35 @@ describe('Vue App Generator', () => {
     expect(app).toContain('<AppFooter />');
   }, 30000);
 
+  it('--layout=internal generates an AppSideMenu shell instead of AppHeader/AppFooter', async () => {
+    await generator(host, { ...options, layout: 'internal' });
+
+    const app = host.read('apps/test/src/App.vue').toString();
+    expect(app).toContain(
+      "import { AppLayout, AppSideMenu, SessionExpiredBanner } from '@proj/vue-components';",
+    );
+    expect(app).not.toContain('AppHeader');
+    expect(app).not.toContain('AppFooter');
+    expect(app).not.toContain('goa-hero-banner');
+    expect(app).toContain('<AppSideMenu');
+    expect(app).toContain('heading="test"');
+    expect(app).toContain(':account-items="accountItems"');
+    expect(app).toContain('@item-click="onAccountItemClick"');
+    // The content gutter is shared regardless of shell choice.
+    expect(app).toContain('<AppLayout');
+
+    const agents = host.read('apps/test/AGENTS.md').toString();
+    expect(agents).toContain('--layout=internal');
+    expect(agents).toContain('AppSideMenu');
+  }, 30000);
+
+  it('defaults --layout to header when omitted', async () => {
+    await generator(host, options);
+    const app = host.read('apps/test/src/App.vue').toString();
+    expect(app).toContain('AppHeader');
+    expect(app).not.toContain('AppSideMenu');
+  }, 30000);
+
   it('wires SessionExpiredBanner to a session store fed by onAuthRefreshError (not onAuthLogout)', async () => {
     await generator(host, options);
 

package/src/generators/vue-components/files/AGENTS.md__tmpl__

@@ -7,7 +7,7 @@ app in this workspace imports both instead of carrying its own copy. Generated b
 | Folder | Contains | Lifespan |
 |---|---|---|
 | `src/lib/primitives/` | Thin `v-model`/idiomatic-event wrappers over individual `goa-*` elements (`GoabInput`, `GoabButton`, …) | **Interim** — see below |
-| `src/lib/patterns/` | Composite, app-shell components (`AppLayout`, `AppHeader`, `AppFooter`, `SessionExpiredBanner`) | **Permanent** |
+| `src/lib/patterns/` | Composite, app-shell components (`AppLayout`, `AppHeader`, `AppFooter`, `AppSideMenu`, `SessionExpiredBanner`, `RecordDetailShell`) | **Permanent** |
 
 > **⚠️ `primitives/` is interim — do not invest in it as permanent.** It exists
 > only because GoA DS has not yet published an official Vue wrapper package. When
@@ -142,7 +142,7 @@ detail); just leave it to fall through from the caller.
 
 A pattern component is app-shell composition — layout, header/footer chrome,
 banners — not a single-element wrapper. Existing examples: `AppLayout`,
-`AppHeader`, `AppFooter`, `SessionExpiredBanner`.
+`AppHeader`, `AppFooter`, `AppSideMenu`, `SessionExpiredBanner`, `RecordDetailShell`.
 
 - It's fine to compose `primitives/` wrappers inside a pattern component (e.g.
   `SessionExpiredBanner` uses `GoabButton`) — import them with a relative path

package/src/generators/vue-components/files/src/index.ts__tmpl__

@@ -20,4 +20,6 @@ export { default as GoabModal } from './lib/primitives/GoabModal.vue';
 export { default as AppLayout } from './lib/patterns/AppLayout.vue';
 export { default as AppHeader } from './lib/patterns/AppHeader.vue';
 export { default as AppFooter } from './lib/patterns/AppFooter.vue';
+export { default as AppSideMenu } from './lib/patterns/AppSideMenu.vue';
 export { default as SessionExpiredBanner } from './lib/patterns/SessionExpiredBanner.vue';
+export { default as RecordDetailShell } from './lib/patterns/RecordDetailShell.vue';

package/src/generators/vue-components/files/src/lib/patterns/AppSideMenu.vue__tmpl__

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+// The alternate top-level shell for staff-facing/internal apps (goa-work-side-menu),
+// used instead of AppHeader/AppFooter -- not together with them. Presentational only:
+// unlike the real GovAlta-Pronghorn source this is adapted from, active-route
+// highlighting and navigation are the caller's job (pass `current` on each item,
+// listen for `item-click`) so this component doesn't need vue-router as a dependency.
+interface AppSideMenuItem {
+  label: string;
+  to?: string;
+  icon?: string;
+  badge?: string;
+  current?: boolean;
+}
+
+withDefaults(
+  defineProps<{
+    heading?: string;
+    userName?: string;
+    primaryItems?: AppSideMenuItem[];
+    secondaryItems?: AppSideMenuItem[];
+    accountItems?: AppSideMenuItem[];
+  }>(),
+  {
+    primaryItems: () => [],
+    secondaryItems: () => [],
+    accountItems: () => [],
+  },
+);
+
+const emit = defineEmits<{ itemClick: [item: AppSideMenuItem] }>();
+</script>
+
+<template>
+  <div class="app-side-menu">
+    <a class="skip-link" href="#main-content">Skip to main content</a>
+    <goa-work-side-menu :heading="heading" :user-name="userName">
+      <goa-work-side-menu-item
+        v-for="item in primaryItems"
+        :key="item.label"
+        slot="primary"
+        :icon="item.icon"
+        :label="item.label"
+        :url="item.to"
+        :current="item.current"
+        @click.prevent="emit('itemClick', item)"
+      />
+      <goa-work-side-menu-item
+        v-for="item in secondaryItems"
+        :key="item.label"
+        slot="secondary"
+        :icon="item.icon"
+        :label="item.label"
+        :badge="item.badge"
+        @click.prevent="emit('itemClick', item)"
+      />
+      <goa-work-side-menu-item
+        v-for="item in accountItems"
+        :key="item.label"
+        slot="account"
+        :label="item.label"
+        :url="item.to"
+        @click.prevent="emit('itemClick', item)"
+      />
+    </goa-work-side-menu>
+    <main id="main-content" class="app-side-menu-content">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.app-side-menu {
+  min-height: 100vh;
+  display: flex;
+}
+
+.app-side-menu-content {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+}
+
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 100;
+  padding: var(--goa-space-s, 0.5rem) var(--goa-space-m, 1rem);
+  background: var(--goa-color-interactive-default, #0070c4);
+  color: #fff;
+}
+
+.skip-link:focus {
+  left: var(--goa-space-m, 1rem);
+}
+</style>

package/src/generators/vue-components/files/src/lib/patterns/RecordDetailShell.vue__tmpl__

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+// Chrome for a single-record detail page: heading + optional back button and
+// status badge, loading/error states. NOT the field list or action bar --
+// those vary too much between real detail pages (confirmed across multiple
+// independent GovAlta apps) to genericize; the default slot renders whatever
+// the consuming view needs once the record has loaded.
+import GoabButton from '../primitives/GoabButton.vue';
+
+withDefaults(
+  defineProps<{
+    heading: string;
+    loading?: boolean;
+    error?: string | null;
+    backLabel?: string;
+    statusBadge?: {
+      type: 'success' | 'emergency' | 'information' | 'important' | 'midtone';
+      content: string;
+    };
+  }>(),
+  {
+    loading: false,
+    error: null,
+  },
+);
+
+const emit = defineEmits<{ back: []; retry: [] }>();
+</script>
+
+<template>
+  <div class="record-detail-shell">
+    <div class="record-detail-shell-header">
+      <h1>{{ heading }}</h1>
+      <div class="record-detail-shell-header-actions">
+        <goa-badge v-if="statusBadge" :type="statusBadge.type" :content="statusBadge.content" />
+        <GoabButton v-if="backLabel" type="tertiary" leadingicon="arrow-back" @click="emit('back')">
+          {{ backLabel }}
+        </GoabButton>
+      </div>
+    </div>
+
+    <div v-if="loading" aria-label="Loading">
+      <goa-skeleton type="text" size="4" />
+    </div>
+
+    <goa-callout v-else-if="error" type="emergency" heading="Unable to load">
+      <p>{{ error }}</p>
+      <goa-spacer vspacing="s" />
+      <GoabButton type="tertiary" @click="emit('retry')">Retry</GoabButton>
+    </goa-callout>
+
+    <template v-else>
+      <slot />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.record-detail-shell-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--goa-space-m);
+  margin-bottom: var(--goa-space-m);
+}
+
+.record-detail-shell-header h1 {
+  margin: 0;
+}
+
+.record-detail-shell-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--goa-space-m);
+}
+</style>

package/src/generators/vue-components/files/src/vue-components.spec.ts__tmpl__

@@ -24,7 +24,9 @@ describe('vue-components', () => {
       'AppLayout',
       'AppHeader',
       'AppFooter',
+      'AppSideMenu',
       'SessionExpiredBanner',
+      'RecordDetailShell',
     ]) {
       expect(lib[name as keyof typeof lib]).toBeTruthy();
     }

package/src/generators/vue-components/vue-components.spec.ts

@@ -41,7 +41,9 @@ describe('Vue Components Generator', () => {
       'AppLayout',
       'AppHeader',
       'AppFooter',
+      'AppSideMenu',
       'SessionExpiredBanner',
+      'RecordDetailShell',
     ]) {
       expect(host.exists(`${patterns}/${name}.vue`)).toBeTruthy();
     }

package/src/generators/vue-detail-view/files/src/views/__viewFileName__.vue__tmpl__

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { RecordDetailShell } from '<%= goaImportPath %>';
+
+// The fetched record's shape isn't known to this generator -- read fields
+// defensively rather than declaring (and likely getting wrong) a fake interface.
+const record = ref<Record<string, unknown> | null>(null);
+const loading = ref(true);
+const error = ref<string | null>(null);
+
+const route = useRoute();
+const router = useRouter();
+
+async function load() {
+  loading.value = true;
+  error.value = null;
+  try {
+    const res = await fetch(`/api/<%= resource %>/${route.params.id}`);
+    if (!res.ok) throw new Error(`Failed to load (${res.status})`);
+    record.value = await res.json();
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to load.';
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(load);
+
+function goBack() {
+  router.back();
+}
+
+function formatDate(value: unknown): string {
+  if (!value) return '—';
+  try {
+    return new Date(String(value)).toLocaleString('en-CA');
+  } catch {
+    return String(value);
+  }
+}
+
+function formatCurrency(value: unknown): string {
+  if (value === undefined || value === null || value === '') return '—';
+  const n = Number(value);
+  if (Number.isNaN(n)) return String(value);
+  return new Intl.NumberFormat('en-CA', { style: 'currency', currency: 'CAD' }).format(n);
+}
+</script>
+
+<template>
+  <RecordDetailShell
+    heading="<%= heading %>"
+    :loading="loading"
+    :error="error"
+    back-label="Back"
+    @back="goBack"
+    @retry="load"
+  >
+    <dl v-if="record" class="detail-fields">
+<% fields.forEach(function (field) { -%>
+      <dt><%= field.label %></dt>
+      <dd>
+<% if (field.type === 'badge') { -%>
+        <goa-badge type="information" :content="String(record['<%= field.key %>'] ?? '—')" />
+<% } else if (field.type === 'date') { -%>
+        {{ formatDate(record['<%= field.key %>']) }}
+<% } else if (field.type === 'currency') { -%>
+        {{ formatCurrency(record['<%= field.key %>']) }}
+<% } else { -%>
+        {{ record['<%= field.key %>'] ?? '—' }}
+<% } -%>
+      </dd>
+<% }); -%>
+    </dl>
+  </RecordDetailShell>
+</template>
+
+<style scoped>
+.detail-fields {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--goa-space-xs) var(--goa-space-l);
+  margin: 0;
+}
+
+.detail-fields dt {
+  font-weight: 600;
+}
+</style>

package/src/generators/vue-detail-view/schema.d.ts

@@ -0,0 +1,29 @@
+export interface DetailViewField {
+  key: string;
+  label: string;
+  type?: 'text' | 'date' | 'currency' | 'badge';
+}
+
+export interface Schema {
+  project: string;
+  name: string;
+  resource: string;
+  route: string;
+  /**
+   * JSON string on the real CLI (Nx's array-typed CLI coercion only supports
+   * comma-separated primitives, not JSON -- see schema.json). A real array is
+   * also accepted for programmatic callers (e.g. tests).
+   */
+  fields: string | DetailViewField[];
+  heading?: string;
+  requiresAuth?: boolean;
+}
+
+export interface NormalizedSchema extends Omit<Schema, 'fields'> {
+  projectRoot: string;
+  /** PascalCase view name with a "View" suffix, e.g. ApplicationDetailView. */
+  viewFileName: string;
+  fields: DetailViewField[];
+  heading: string;
+  requiresAuth: boolean;
+}

package/src/generators/vue-detail-view/schema.json

@@ -0,0 +1,50 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "id": "NxAdspVueDetailView",
+  "title": "Vue Record Detail View",
+  "description": "Generates a record-detail view (loading/error/loaded states, optional status badge, back button) into an existing vue-app project, built on the shared RecordDetailShell pattern component.",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The vue-app project to add the view to.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "Which project should the detail view be added to?"
+    },
+    "name": {
+      "type": "string",
+      "description": "View name, e.g. 'application-detail' generates src/views/ApplicationDetailView.vue.",
+      "$default": {
+        "$source": "argv",
+        "index": 1
+      },
+      "x-prompt": "What should the view be called?"
+    },
+    "resource": {
+      "type": "string",
+      "description": "API resource path segment -- the view fetches /api/<resource>/:id."
+    },
+    "route": {
+      "type": "string",
+      "description": "Route path added to router/index.ts, e.g. /applications/:id. Must contain a :id param."
+    },
+    "fields": {
+      "type": "string",
+      "description": "JSON array of fields rendered in the record's info list, in display order -- e.g. '[{\"key\":\"status\",\"label\":\"Status\",\"type\":\"badge\"}]'. Each item: { key, label, type?: \"text\"|\"date\"|\"currency\"|\"badge\" (default \"text\") }. A plain array is also accepted when this generator is invoked programmatically. Nx's CLI option coercion only supports comma-separated primitive lists for array-typed schema properties, not JSON -- a JSON string is the only CLI syntax that actually survives Nx's own arg parsing for a structured list like this."
+    },
+    "heading": {
+      "type": "string",
+      "description": "Page heading. Defaults to the view name, title-cased."
+    },
+    "requiresAuth": {
+      "type": "boolean",
+      "description": "Whether the generated route requires authentication.",
+      "default": true
+    }
+  },
+  "required": ["project", "name", "resource", "route", "fields"],
+  "additionalProperties": false
+}

package/src/generators/vue-detail-view/vue-detail-view.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nx/devkit';
+import { Schema } from './schema';
+export default function (host: Tree, options: Schema): Promise<void>;

package/src/generators/vue-detail-view/vue-detail-view.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const path = require("path");
+const vue_router_1 = require("../../utils/vue-router");
+const vue_components_1 = require("../vue-components/vue-components");
+// Nx's own CLI option coercion (coerceTypesInOptions in nx/src/utils/params)
+// only knows how to split an array-typed option on commas -- it has no JSON
+// support, so a real `"type": "array"` schema for --fields silently mangles
+// a JSON array into garbage fragments when invoked from the actual CLI (only
+// programmatic callers, like this generator's own unit tests, ever pass a
+// real array). --fields is `"type": "string"` in schema.json specifically so
+// Nx leaves it alone, and this generator parses the JSON itself.
+function parseFields(fields) {
+    const parsed = typeof fields === 'string' ? JSON.parse(fields) : fields;
+    if (!Array.isArray(parsed) || parsed.length === 0) {
+        throw new Error('--fields must be a non-empty JSON array of { key, label, type? } objects.');
+    }
+    return parsed;
+}
+function normalizeOptions(host, options) {
+    var _a, _b;
+    const { root: projectRoot } = (0, devkit_1.readProjectConfiguration)(host, options.project);
+    if (!options.route.includes(':id')) {
+        throw new Error(`--route "${options.route}" has no :id param -- the generated view reads route.params.id to fetch the record.`);
+    }
+    const className = (0, devkit_1.names)(options.name).className;
+    return Object.assign(Object.assign({}, options), { projectRoot, fields: parseFields(options.fields), viewFileName: `${className}View`, 
+        // className is PascalCase (e.g. "ApplicationDetail") -- space it out for a
+        // readable default heading ("Application Detail").
+        heading: (_a = options.heading) !== null && _a !== void 0 ? _a : className.replace(/([A-Z])/g, ' $1').trim(), requiresAuth: (_b = options.requiresAuth) !== null && _b !== void 0 ? _b : true });
+}
+function default_1(host, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const normalizedOptions = normalizeOptions(host, options);
+        // Idempotent -- ensures RecordDetailShell exists even in a project scaffolded
+        // before vue-components carried it.
+        yield (0, vue_components_1.default)(host);
+        (0, devkit_1.generateFiles)(host, path.join(__dirname, 'files'), normalizedOptions.projectRoot, Object.assign(Object.assign({}, normalizedOptions), { goaImportPath: (0, vue_components_1.vueComponentsImportPath)(host), tmpl: '' }));
+        (0, vue_router_1.insertVueRoute)(host, normalizedOptions.projectRoot, normalizedOptions.project, {
+            path: normalizedOptions.route,
+            componentImportPath: `../views/${normalizedOptions.viewFileName}.vue`,
+            requiresAuth: normalizedOptions.requiresAuth,
+        });
+        yield (0, devkit_1.formatFiles)(host);
+    });
+}
+//# sourceMappingURL=vue-detail-view.js.map

package/src/generators/vue-detail-view/vue-detail-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-detail-view.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/vue-detail-view/vue-detail-view.ts"],"names":[],"mappings":";;AAqDA,4BAyBC;;AA9ED,uCAMoB;AACpB,6BAA6B;AAC7B,uDAAwD;AACxD,qEAE0C;AAG1C,6EAA6E;AAC7E,4EAA4E;AAC5E,4EAA4E;AAC5E,6EAA6E;AAC7E,0EAA0E;AAC1E,6EAA6E;AAC7E,iEAAiE;AACjE,SAAS,WAAW,CAAC,MAAwB;IAC3C,MAAM,MAAM,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACxE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClD,MAAM,IAAI,KAAK,CACb,2EAA2E,CAC5E,CAAC;IACJ,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,gBAAgB,CAAC,IAAU,EAAE,OAAe;;IACnD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAE9E,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACnC,MAAM,IAAI,KAAK,CACb,YAAY,OAAO,CAAC,KAAK,qFAAqF,CAC/G,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAA,cAAK,EAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;IAChD,uCACK,OAAO,KACV,WAAW,EACX,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,EACnC,YAAY,EAAE,GAAG,SAAS,MAAM;QAChC,2EAA2E;QAC3E,mDAAmD;QACnD,OAAO,EAAE,MAAA,OAAO,CAAC,OAAO,mCAAI,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,IAAI,EAAE,EACvE,YAAY,EAAE,MAAA,OAAO,CAAC,YAAY,mCAAI,IAAI,IAC1C;AACJ,CAAC;AAED,mBAA+B,IAAU,EAAE,OAAe;;QACxD,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAE1D,8EAA8E;QAC9E,oCAAoC;QACpC,MAAM,IAAA,wBAAsB,EAAC,IAAI,CAAC,CAAC;QAEnC,IAAA,sBAAa,EACX,IAAI,EACJ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,EAC7B,iBAAiB,CAAC,WAAW,kCAExB,iBAAiB,KACpB,aAAa,EAAE,IAAA,wCAAuB,EAAC,IAAI,CAAC,EAC5C,IAAI,EAAE,EAAE,IAEX,CAAC;QAEF,IAAA,2BAAc,EAAC,IAAI,EAAE,iBAAiB,CAAC,WAAW,EAAE,iBAAiB,CAAC,OAAO,EAAE;YAC7E,IAAI,EAAE,iBAAiB,CAAC,KAAK;YAC7B,mBAAmB,EAAE,YAAY,iBAAiB,CAAC,YAAY,MAAM;YACrE,YAAY,EAAE,iBAAiB,CAAC,YAAY;SAC7C,CAAC,CAAC;QAEH,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;CAAA"}

package/src/generators/vue-detail-view/vue-detail-view.spec.ts

@@ -0,0 +1,156 @@
+import {
+  addProjectConfiguration,
+  readProjectConfiguration,
+  Tree,
+} from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import generator from './vue-detail-view';
+import { Schema } from './schema';
+
+// Mirrors the shape vue-app's own template generates -- vue-detail-view retrofits
+// into this file, so the fixture must match what it actually looks for.
+const ROUTER_FIXTURE = `import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    { path: '/', component: HomeView },
+  ],
+});
+
+export default router;
+`;
+
+describe('Vue Detail View Generator', () => {
+  let host: Tree;
+  const baseOptions: Schema = {
+    project: 'test',
+    name: 'application-detail',
+    resource: 'applications',
+    route: '/applications/:id',
+    fields: [
+      { key: 'status', label: 'Status', type: 'badge' },
+      { key: 'lastSaved', label: 'Last saved', type: 'date' },
+      { key: 'requestTotal', label: 'Request total', type: 'currency' },
+      { key: 'serviceModel', label: 'Service Model' },
+    ],
+  };
+
+  beforeEach(() => {
+    host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    addProjectConfiguration(host, 'test', { root: 'apps/test' });
+    host.write('apps/test/src/router/index.ts', ROUTER_FIXTURE);
+  });
+
+  it('throws when --project does not exist', async () => {
+    await expect(
+      generator(host, { ...baseOptions, project: 'no-such-app' }),
+    ).rejects.toThrow();
+  });
+
+  it('throws when --route has no :id param', async () => {
+    await expect(
+      generator(host, { ...baseOptions, route: '/applications' }),
+    ).rejects.toThrow(/:id/);
+  });
+
+  it("throws a clear error when the project isn't a vue-app (no router/index.ts)", async () => {
+    addProjectConfiguration(host, 'not-vue', { root: 'apps/not-vue' });
+    await expect(
+      generator(host, { ...baseOptions, project: 'not-vue' }),
+    ).rejects.toThrow(/router\/index\.ts/);
+  });
+
+  // Regression guard: Nx's own CLI option coercion for `"type": "array"` splits
+  // on commas, not JSON -- --fields is `"type": "string"` in schema.json
+  // specifically so the real CLI's JSON string survives unmangled. Assert the
+  // string form the CLI actually produces, not just the array form direct
+  // (unit-test) callers use.
+  it('accepts --fields as a JSON string, the form the real CLI produces', async () => {
+    await generator(host, {
+      ...baseOptions,
+      fields: JSON.stringify(baseOptions.fields),
+    });
+    const view = host
+      .read('apps/test/src/views/ApplicationDetailView.vue')
+      .toString();
+    expect(view).toContain('<dt>Status</dt>');
+  }, 30000);
+
+  it('throws a clear error when --fields is not valid JSON', async () => {
+    await expect(
+      generator(host, { ...baseOptions, fields: '{not json' }),
+    ).rejects.toThrow();
+  });
+
+  it('throws a clear error when --fields parses to an empty array', async () => {
+    await expect(
+      generator(host, { ...baseOptions, fields: '[]' }),
+    ).rejects.toThrow(/non-empty/);
+  });
+
+  it('generates the view with each field type rendered correctly', async () => {
+    await generator(host, baseOptions);
+
+    const view = host
+      .read('apps/test/src/views/ApplicationDetailView.vue')
+      .toString();
+    expect(view).toContain('heading="Application Detail"');
+    expect(view).toContain("fetch(`/api/applications/${route.params.id}`)");
+    expect(view).toContain(
+      "<goa-badge type=\"information\" :content=\"String(record['status'] ?? '—')\" />",
+    );
+    expect(view).toContain("formatDate(record['lastSaved'])");
+    expect(view).toContain("formatCurrency(record['requestTotal'])");
+    expect(view).toContain("record['serviceModel'] ?? '—'");
+    expect(view).toContain('<dt>Status</dt>');
+    expect(view).toContain('<dt>Service Model</dt>');
+    // Uses the shared shell, not hand-rolled loading/error markup.
+    expect(view).toContain("import { RecordDetailShell } from '@proj/vue-components';");
+    expect(view).toContain('<RecordDetailShell');
+  }, 30000);
+
+  it('respects an explicit --heading', async () => {
+    await generator(host, { ...baseOptions, heading: 'Grant Application' });
+    const view = host
+      .read('apps/test/src/views/ApplicationDetailView.vue')
+      .toString();
+    expect(view).toContain('heading="Grant Application"');
+  }, 30000);
+
+  it('inserts the route into router/index.ts, requiring auth by default', async () => {
+    await generator(host, baseOptions);
+
+    const routerTs = host.read('apps/test/src/router/index.ts').toString();
+    expect(routerTs).toContain("path: '/applications/:id'");
+    expect(routerTs).toContain(
+      "component: () => import('../views/ApplicationDetailView.vue')",
+    );
+    expect(routerTs).toContain('meta: { requiresAuth: true }');
+    // The existing route is untouched, not replaced.
+    expect(routerTs).toContain("{ path: '/', component: HomeView }");
+  }, 30000);
+
+  it('omits the requiresAuth meta when --requiresAuth=false', async () => {
+    await generator(host, { ...baseOptions, requiresAuth: false });
+    const routerTs = host.read('apps/test/src/router/index.ts').toString();
+    expect(routerTs).not.toContain('requiresAuth');
+  }, 30000);
+
+  it('ensures the shared RecordDetailShell pattern component exists', async () => {
+    await generator(host, baseOptions);
+    expect(
+      host.exists(
+        'libs/vue-components/src/lib/patterns/RecordDetailShell.vue',
+      ),
+    ).toBeTruthy();
+  }, 30000);
+
+  it('does not touch the target project configuration', async () => {
+    const before = readProjectConfiguration(host, 'test');
+    await generator(host, baseOptions);
+    const after = readProjectConfiguration(host, 'test');
+    expect(after).toEqual(before);
+  }, 30000);
+});

package/src/utils/vue-router.d.ts

@@ -0,0 +1,8 @@
+import { Tree } from '@nx/devkit';
+export interface VueRouteSpec {
+    path: string;
+    /** Relative import path passed to () => import(...), e.g. '../views/FooView.vue'. */
+    componentImportPath: string;
+    requiresAuth?: boolean;
+}
+export declare function insertVueRoute(host: Tree, projectRoot: string, project: string, route: VueRouteSpec): void;

package/src/utils/vue-router.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertVueRoute = insertVueRoute;
+// Deterministic text insertion, not an AST edit -- vue-app's router/index.ts
+// template has a fixed `routes: [ ... ]` shape, so a targeted anchor is
+// simpler and safer here than pulling in an AST library for one array entry.
+function insertVueRoute(host, projectRoot, project, route) {
+    var _a;
+    const routerPath = `${projectRoot}/src/router/index.ts`;
+    const content = (_a = host.read(routerPath)) === null || _a === void 0 ? void 0 : _a.toString();
+    if (content === undefined) {
+        throw new Error(`Could not find ${routerPath} -- is "${project}" a vue-app project generated by @abgov/nx-adsp:vue-app?`);
+    }
+    const marker = 'routes: [';
+    const markerIndex = content.indexOf(marker);
+    if (markerIndex === -1) {
+        throw new Error(`Could not find "${marker}" in ${routerPath} -- has its shape changed since @abgov/nx-adsp:vue-app generated it?`);
+    }
+    const metaLine = route.requiresAuth
+        ? `\n      meta: { requiresAuth: true },`
+        : '';
+    const routeSnippet = `{\n` +
+        `      path: '${route.path}',\n` +
+        `      component: () => import('${route.componentImportPath}'),${metaLine}\n` +
+        `    },`;
+    const insertAt = markerIndex + marker.length;
+    const updated = content.slice(0, insertAt) +
+        `\n    ${routeSnippet}` +
+        content.slice(insertAt);
+    host.write(routerPath, updated);
+}
+//# sourceMappingURL=vue-router.js.map

package/src/utils/vue-router.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-router.js","sourceRoot":"","sources":["../../../../../packages/nx-adsp/src/utils/vue-router.ts"],"names":[],"mappings":";;AAYA,wCAqCC;AAxCD,6EAA6E;AAC7E,wEAAwE;AACxE,6EAA6E;AAC7E,SAAgB,cAAc,CAC5B,IAAU,EACV,WAAmB,EACnB,OAAe,EACf,KAAmB;;IAEnB,MAAM,UAAU,GAAG,GAAG,WAAW,sBAAsB,CAAC;IACxD,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,0CAAE,QAAQ,EAAE,CAAC;IAClD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CACb,kBAAkB,UAAU,WAAW,OAAO,0DAA0D,CACzG,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAAG,WAAW,CAAC;IAC3B,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,WAAW,KAAK,CAAC,CAAC,EAAE,CAAC;QACvB,MAAM,IAAI,KAAK,CACb,mBAAmB,MAAM,QAAQ,UAAU,sEAAsE,CAClH,CAAC;IACJ,CAAC;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,YAAY;QACjC,CAAC,CAAC,uCAAuC;QACzC,CAAC,CAAC,EAAE,CAAC;IACP,MAAM,YAAY,GAChB,KAAK;QACL,gBAAgB,KAAK,CAAC,IAAI,MAAM;QAChC,kCAAkC,KAAK,CAAC,mBAAmB,MAAM,QAAQ,IAAI;QAC7E,QAAQ,CAAC;IAEX,MAAM,QAAQ,GAAG,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC;IAC7C,MAAM,OAAO,GACX,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC;QAC1B,SAAS,YAAY,EAAE;QACvB,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC1B,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAClC,CAAC"}

package/src/utils/vue-router.spec.ts

@@ -0,0 +1,71 @@
+import { Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { insertVueRoute } from './vue-router';
+
+const ROUTER_FIXTURE = `import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from '../views/HomeView.vue';
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    { path: '/', component: HomeView },
+  ],
+});
+
+export default router;
+`;
+
+describe('insertVueRoute', () => {
+  let host: Tree;
+
+  beforeEach(() => {
+    host = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    host.write('apps/test/src/router/index.ts', ROUTER_FIXTURE);
+  });
+
+  it('inserts a new route ahead of the existing ones, with a requiresAuth meta', () => {
+    insertVueRoute(host, 'apps/test', 'test', {
+      path: '/things/:id',
+      componentImportPath: '../views/ThingView.vue',
+      requiresAuth: true,
+    });
+
+    const routerTs = host.read('apps/test/src/router/index.ts').toString();
+    expect(routerTs).toContain("path: '/things/:id'");
+    expect(routerTs).toContain(
+      "component: () => import('../views/ThingView.vue')",
+    );
+    expect(routerTs).toContain('meta: { requiresAuth: true }');
+    expect(routerTs).toContain("{ path: '/', component: HomeView }");
+  });
+
+  it('omits the meta line when requiresAuth is not set', () => {
+    insertVueRoute(host, 'apps/test', 'test', {
+      path: '/public-things',
+      componentImportPath: '../views/ThingsListView.vue',
+    });
+
+    const routerTs = host.read('apps/test/src/router/index.ts').toString();
+    expect(routerTs).not.toContain('requiresAuth');
+  });
+
+  it('throws a clear error when the project has no router/index.ts', () => {
+    host.write('apps/no-router/src/main.ts', '// no router here\n');
+    expect(() =>
+      insertVueRoute(host, 'apps/no-router', 'no-router', {
+        path: '/x',
+        componentImportPath: '../views/XView.vue',
+      }),
+    ).toThrow(/router\/index\.ts/);
+  });
+
+  it('throws when routes: [ has been renamed or removed', () => {
+    host.write('apps/test/src/router/index.ts', 'export default {};\n');
+    expect(() =>
+      insertVueRoute(host, 'apps/test', 'test', {
+        path: '/x',
+        componentImportPath: '../views/XView.vue',
+      }),
+    ).toThrow(/routes: \[/);
+  });
+});