Skip to content

Migrate Vue example to Vite 8, vue-router 5 and oidc-client-ts 3 - #32

Closed
Wictorgirardi wants to merge 2 commits into
p2-inc:mainfrom
Wictorgirardi:feat/vue
Closed

Wictorgirardi wants to merge 2 commits into
p2-inc:mainfrom
Wictorgirardi:feat/vue

Conversation

@Wictorgirardi

@Wictorgirardi Wictorgirardi commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

Depends on #28: this branch includes its commit, so review the last commit only until #28 is merged.

Summary

  • Toolchain: re-scaffolded from the current create-vue (3.24): Vite 4 → 8, vue-router 4 → 5, vue-tsc 1 → 3, TypeScript 5.1 → 6.0, ESLint 8 → 10 flat config (@vue/eslint-config-typescript), Tailwind CSS 3 → 4 (configured in CSS). The devtools plugin, oxlint and npm-run-all are left out to keep the example small.
  • Auth library: oidc-client-ts 2 → 3.5.
  • src/auth.ts: a single UserManager, configured from .env (VITE_OIDC_ISSUER_URI, VITE_OIDC_CLIENT_ID). It now uses the library's default session storage; the old explicit WebStorageStateStore stored tokens in localStorage.
  • src/composables/useAuth.ts: reactive user state driven by oidc-client-ts events, with signIn / signOut.
  • Components: <script setup lang="ts"> everywhere. This replaces the Options API and the untyped $auth global, which was assigned after mount().
  • Bug fixes:
    • /silent-refresh now calls signinSilentCallback(). It used to call a non-existent renewToken().
    • /auth returns to the page the login started from.
    • The router guard is removed; it redirected to a missing /unauthenticated route.
  • UI:
    • Shared layout with inline SVG icons (drops the iconify-icon web component).
    • Fixes the className / htmlFor React-isms, the "(keycloak-js)" header label and the README titled "React".
    • Components renamed to multi-word names (AppHeader, AppFooter, UserStatus, TokenPanels), as eslint-plugin-vue requires.
  • Tooling:
    • pnpm 10.34 via packageManager, Node 24 via .nvmrc / engines.
    • vercel.json pins the Vite preset and keeps the SPA rewrite.
    • The workflow calls the shared CI and deploy workflows.

Test plan

  • pnpm install --frozen-lockfile && pnpm typecheck && pnpm lint && pnpm build pass on Node 24.
  • tools/e2e-smoke passes against the local Keycloak: log in, decoded tokens shown, log out.
  • Vercel preview deploy. It's skipped for PRs from forks, so it first runs after merge.

@Wictorgirardi

Copy link
Copy Markdown
Contributor Author

Combined into #44 with the other SPA examples. The changes are the same; only the commit SHAs differ.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant