@abgov/nx-adsp 13.18.0-beta.3 → 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.3",
+  "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-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`, `AppSideMenu`, `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`, `AppSideMenu`, `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__

@@ -22,3 +22,4 @@ 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/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__

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

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

@@ -43,6 +43,7 @@ describe('Vue Components Generator', () => {
       '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: \[/);
+  });
+});