stacc-single-spa-vue

stacc-single-spa-vue

Vue wrapper for single-spa frontends in Stacc Case Manager. The Vue counterpart to @stacc/single-spa-react.

Extracted from stacc/flow-single-spa (branch packages/vue, path packages/single-spa-vue), which was never merged to that repo's main.

Published unscoped to the public npm registry. The @stacc scope is mapped to a different registry in each consuming repo — GitHub Packages in mortgage, Azure Artifacts in affordability and engagement — and a scope resolves from only one of them, so a scoped name could not serve every consumer.

Install

npm install stacc-single-spa-vue

Peer dependencies: vue >= 3, vue-i18n >= 9.

Usage

Expose a frontend unit from a Vue micro-frontend:

import { frontend } from 'stacc-single-spa-vue'
import MyApp from './MyApp.vue'

export default frontend(
  {
    components: { MyApp },
    translations: {},
  },
  (app) => {
    app.use(somePlugin)
  },
)

The second argument is a setup callback run against the Vue app instance before mount — use it to install plugins (vue-i18n, PrimeVue, a design system).

Compose child frontends resolved from the runtime import map:

<script setup>
import { FrontendImporter } from 'stacc-single-spa-vue'
</script>

<template>
  <FrontendImporter
    :frontend="{ name: 'frontend', module: 'some-module', component: 'SomeApp' }"
    :task="task"
    :flow="flow"
    :save="save"
    :configuration="configuration"
  />
</template>

FrontendImporter calls useI18n() in the host app's context, so a vue-i18n instance must be installed on the host or every importer throws on setup.

Exports

Build

npm install
npm run build   # vite lib build -> dist/index.js, dist/index.cjs, dist/index.d.ts
npm run lint
npm test

Releasing

Versioning and publishing run on changesets.

Add a changeset alongside the change:

npm run changeset

On merge to main the release workflow opens a chore: version package pull request that applies the pending changesets and writes CHANGELOG.md. Merging that pull request publishes to Azure Artifacts. Never edit version by hand.

Changesets are written in English and published verbatim into the changelog: lead with the change, then the consumer-visible consequences.

Known gaps

• Coverage is thin — the suite covers the mount/update lifecycle only.
• vite.config.ts externalises single-spa-vue and i18next; neither is imported by src/. Leftovers from the React original.