Authenticate your ZITADEL users within your Vue applications.
[!IMPORTANT] If you want to try out @zitadel/vue, read the ZITADEL step-by-step guide for Vue. It shows how to get the client_id and the project_resource_id from ZITADEL and how to wire everything up in Vue.
The example project is generated in the repositories root directory using Vite.
The following pages are added to the scaffolded example application:
The following files are added or modified to enable ZITADEL authentication:
The NPM package @zitadel/vue wraps the NPM package vue-oidc-client. All vue-oidc-client features are available and the whole configuration can be overridden.
The following features are added to vue-oidc-client
The following is an example for a minimal OIDC configuration:
const zitadelAuth = createZITADELAuth({
issuer: `${myZITADELInstancesOrigin}`,
client_id: `${myApplicationsClientID}`,
project_resource_id: `${myApplicationsProjectResourceID}`,
})
The following defaults apply:
zitadelAuth.hasRole("someRoleKey")
.VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
.vue
Imports in TSTypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
Extensions: Show Built-in Extensions
from VSCode's command palette
2) Find TypeScript and JavaScript Language Features
, right click and select Disable (Workspace)
Developer: Reload Window
from the command palette.See Vite Configuration Reference.
yarn
yarn dev
yarn build
yarn lint