{"id":18917,"library":"vue-oidc-client","title":"vue-oidc-client","description":"Vue.js wrapper around oidc-client (or oidc-client-ts) for integrating OpenID Connect authentication with Vue Router. Current version is 1.0.0-alpha.5 (pre-release), with earlier stable v0.4.x for Vue 2. Supports Vue 2 and Vue 3 via separate builds. Provides Vue components like OidcCallback and OidcSilentCallback, composables/inject functions for user state, and event hooks. Key differentiator: seamless Vue Router integration vs using oidc-client directly. Note that 1.0.0-alpha.x has breaking changes from v0.4.x, especially in imports and event handling.","status":"active","version":"1.0.0-alpha.5","language":"javascript","source_language":"en","source_url":"https://github.com/soukoku/vue-oidc-client","tags":["javascript","vue","openid-connect","oidc","oidc-client"],"install":[{"cmd":"npm install vue-oidc-client","lang":"bash","label":"npm"},{"cmd":"yarn add vue-oidc-client","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-oidc-client","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core OIDC/OAuth2 client implementation; vue-oidc-client wraps this library.","package":"oidc-client-ts","optional":false},{"reason":"Required for route-based authentication flow (e.g., redirect and callback handling).","package":"vue-router","optional":false}],"imports":[{"note":"Default import for the main plugin object. In v1.0.0-alpha.x, the plugin is exported as default; named import works only if you import specific submodules.","wrong":"import { VueOidcClient } from 'vue-oidc-client'","symbol":"default","correct":"import VueOidcClient from 'vue-oidc-client'"},{"note":"Named export for the callback component. In v1.0.0-alpha.x, these components are exported from the main package; direct subpath imports may not work.","wrong":"import OidcCallback from 'vue-oidc-client/OidcCallback'","symbol":"OidcCallback","correct":"import { OidcCallback } from 'vue-oidc-client'"},{"note":"Named export for the silent callback component. Avoid deep imports from dist folder.","wrong":"import OidcSilentCallback from 'vue-oidc-client/dist/OidcSilentCallback'","symbol":"OidcSilentCallback","correct":"import { OidcSilentCallback } from 'vue-oidc-client'"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport { createRouter, createWebHistory } from 'vue-router';\nimport VueOidcClient, { OidcCallback } from 'vue-oidc-client';\n\nconst router = createRouter({\n  history: createWebHistory(),\n  routes: [\n    { path: '/callback', component: OidcCallback },\n  ],\n});\n\nconst app = createApp({});\napp.use(VueOidcClient, {\n  authority: 'https://your-identity-server',\n  client_id: 'your-client-id',\n  redirect_uri: window.location.origin + '/callback',\n  response_type: 'code',\n  scope: 'openid profile',\n});\napp.use(router);\napp.mount('#app');","lang":"typescript","description":"Shows Vue 3 setup with router and OIDC client plugin, including callback route and minimal configuration."},"warnings":[{"fix":"Use named imports from 'vue-oidc-client' directly (e.g., import { OidcCallback } from 'vue-oidc-client').","message":"Import paths changed in v1.0.0-alpha.x: components and composables now exported from main package instead of subpaths.","severity":"breaking","affected_versions":">=1.0.0-alpha.1"},{"fix":"Listen for events using Vue's $on or composables; refer to the new event names in the documentation.","message":"Event handling API changed in v1.0.0-alpha.x: events are now emitted via Vue's event system instead of oidc-client's UserManager events.","severity":"breaking","affected_versions":">=1.0.0-alpha.1"},{"fix":"For Vue 2, use v0.4.x (stable) or consider migrating to Vue 3.","message":"Vue 2 support is deprecated in v1.0.0-alpha.x; the package is primarily aimed at Vue 3.","severity":"deprecated","affected_versions":">=1.0.0-alpha.1"},{"fix":"Install oidc-client-ts as a dependency: npm install oidc-client-ts","message":"oidc-client-ts (not oidc-client-js) is now the peer dependency for v1.0.0-alpha.x; oidc-client-js is deprecated.","severity":"gotcha","affected_versions":">=1.0.0-alpha.1"},{"fix":"Ensure app.use(VueOidcClient) is called before app.use(router).","message":"The plugin must be installed before router is used; otherwise, navigation guards may not work.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Install the latest alpha: npm install vue-oidc-client@1.0.0-alpha.5 . Also ensure tsconfig includes 'moduleResolution': 'node'.","cause":"Missing or outdated type definitions; npm package may not include types for v1.0.0-alpha.x builds.","error":"Cannot find module 'vue-oidc-client' or its corresponding type declarations."},{"fix":"Add 'import 'vue-oidc-client/dist/types/vue-shim'' in your main.ts or create a declaration file for Vue.$oidc.","cause":"TypeScript not aware of the injected $oidc property; global augmentation missing or not imported.","error":"Property '$oidc' does not exist on type 'ComponentCustomProperties'."},{"fix":"Use import { OidcCallback } from 'vue-oidc-client' (not from a subpath).","cause":"Using wrong import for OidcCallback or OidcSilentCallback; importing from subpath instead of main package in v1.0.0-alpha.x.","error":"Failed to mount component: template or render function not defined."},{"fix":"Explicitly set response_type: 'code' in plugin configuration.","cause":"Missing or incorrect 'response_type' in OIDC configuration; defaults may not be set.","error":"Uncaught (in promise) Error: no response_type set"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}