@andreyyolkin/keycloakify-vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Keycloakify contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,109 @@
+# @andreyyolkin/keycloakify-vue
+
+Vue 3 components for building Keycloak login themes with [Keycloakify](https://github.com/keycloakify/keycloakify).
+
+`@andreyyolkin/keycloakify-vue` is a community Vue 3 port of Keycloakify's UI layer, mirroring the architecture of
+[`@keycloakify/svelte`](https://github.com/keycloakify/keycloakify-svelte). It reuses Keycloakify's
+framework-agnostic build tooling and core logic via a peer dependency — only the Vue UI layer (layer 3)
+is reimplemented here. You write your Keycloak theme in Vue; `keycloakify` handles the build + jar
+packaging unchanged.
+
+## Status
+
+| Theme       | Status                                                                                                                      |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------- |
+| **Login**   | **Complete** — all 38 login pages ported, including `register.ftl` / `UserProfileFormFields`                                |
+| **Account** | **Complete** — all 7 classic account pages ported (account, password, sessions, totp, applications, log, federatedIdentity) |
+| Admin/Email | Out of scope                                                                                                                |
+
+## Installation
+
+```bash
+npm install --save-dev @andreyyolkin/keycloakify-vue
+```
+
+**Peer dependencies:** `keycloakify ^11.15.1` and `vue ^3.5.0` must be installed in your project.
+
+The easiest way to get started is the official starter template:
+
+- **[keycloakify-starter-vue](https://github.com/AndreyYolkin/keycloakify-starter-vue)** — a ready-to-use
+  Vite + Vue project wired to `@andreyyolkin/keycloakify-vue`, analogous to
+  [`keycloakify-starter-svelte`](https://github.com/keycloakify/keycloakify-starter-svelte).
+
+## What's Included
+
+- **`DefaultPage`** — top-level dispatcher component that routes all 38 login `pageId` values to the
+  correct page component.
+- **`Template`** — the outer page shell (header, info/error alerts, social providers, language switcher).
+- **Per-page components** — importable individually from `@andreyyolkin/keycloakify-vue/login/pages/*.vue`
+  (e.g. `Login.vue`, `Register.vue`, `LoginOtp.vue`, …).
+- **`UserProfileFormFields`** — full dynamic user-profile form suite used by `Register`, `LoginUpdateProfile`,
+  and `IdpReviewUserProfile`.
+- **`i18nBuilder`** — factory for wiring Keycloakify's `noJsx` i18n engine into Vue (returns `msg()` /
+  `advancedMsg()` that produce sanitized `VNode`s).
+- **Account theme** — importable from `@andreyyolkin/keycloakify-vue/account`: its own `DefaultPage` + `Template`,
+  the 7 account pages at `@andreyyolkin/keycloakify-vue/account/pages/*.vue`, and an account `i18nBuilder`.
+- **`bin` handlers** — `_keycloakify-custom-handler` delegates `update-kc-gen`, `eject-page`,
+  `add-story`, and `initialize-account-theme` so the `keycloakify` CLI treats your project as a Vue theme.
+
+## Usage
+
+Clone or scaffold from the [starter](https://github.com/AndreyYolkin/keycloakify-starter-vue) for the
+full wiring. At its core a consumer project has a `KcPage.vue` that looks like:
+
+```vue
+<script setup lang="ts">
+import { DefaultPage } from '@andreyyolkin/keycloakify-vue';
+import type { KcContext } from './KcContext';
+import { useI18n } from './i18n';
+import Template from '@andreyyolkin/keycloakify-vue/login/Template.vue';
+
+const props = defineProps<{ kcContext: KcContext }>();
+const { i18n } = useI18n({ kcContext: props.kcContext });
+</script>
+
+<template>
+  <DefaultPage
+    :kcContext
+    :i18n
+    :Template
+  />
+</template>
+```
+
+## How It Works / Relationship to Keycloakify
+
+Keycloakify is built in three layers:
+
+1. **Build tooling / CLI** (`keycloakify/bin`, `keycloakify/vite-plugin`) — framework-agnostic. Reads a
+   built SPA, rewrites asset paths to FreeMarker variables, generates `.ftl` templates, packages the
+   theme `.jar`.
+2. **Core logic** (`KcContext` types, `i18n/noJsx`, `getUserProfileApi`, `kcClsx`, `kcSanitize`) —
+   deliberately framework-agnostic.
+3. **UI components** — the only framework-coupled layer.
+
+`@andreyyolkin/keycloakify-vue` reuses layers 1 and 2 unchanged (via the `keycloakify` peer dependency) and
+reimplements layer 3 in Vue 3.
+
+**Distribution:** the package ships raw `.vue` single-file components plus `.d.ts` types. Your project's
+Vite + `@vitejs/plugin-vue` compiles them — no pre-bundled JS is shipped.
+
+## Contributing
+
+```bash
+git clone https://github.com/AndreyYolkin/keycloakify-vue
+git clone https://github.com/AndreyYolkin/keycloakify-starter-vue
+
+cd keycloakify-vue
+yarn install
+yarn link-in-starter   # links the built package into the starter
+```
+
+Changes to the library are reflected in the starter after `yarn build` (or `yarn watch`).
+
+Issues and pull requests are welcome at
+[github.com/AndreyYolkin/keycloakify-vue](https://github.com/AndreyYolkin/keycloakify-vue).
+
+## License
+
+MIT

package/keycloakify-vue/account/DefaultPage.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type { KcContext } from 'keycloakify/account/KcContext';
+import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
+import { computed, defineAsyncComponent, type Component } from 'vue';
+import type { I18n } from './i18n/i18n';
+import NotImplemented from './pages/NotImplemented.vue';
+
+const Account = defineAsyncComponent(() => import('./pages/Account.vue'));
+const Applications = defineAsyncComponent(() => import('./pages/Applications.vue'));
+const FederatedIdentity = defineAsyncComponent(() => import('./pages/FederatedIdentity.vue'));
+const Log = defineAsyncComponent(() => import('./pages/Log.vue'));
+const Password = defineAsyncComponent(() => import('./pages/Password.vue'));
+const Sessions = defineAsyncComponent(() => import('./pages/Sessions.vue'));
+const Totp = defineAsyncComponent(() => import('./pages/Totp.vue'));
+
+const props = defineProps<{
+  kcContext: KcContext;
+  i18n: I18n;
+  classes?: Partial<Record<ClassKey, string>>;
+  Template: Component;
+  doUseDefaultCss: boolean;
+}>();
+
+const pageComponent = computed<Component>(() => {
+  switch (props.kcContext.pageId) {
+    case 'account.ftl':
+      return Account;
+    case 'applications.ftl':
+      return Applications;
+    case 'federatedIdentity.ftl':
+      return FederatedIdentity;
+    case 'log.ftl':
+      return Log;
+    case 'password.ftl':
+      return Password;
+    case 'sessions.ftl':
+      return Sessions;
+    case 'totp.ftl':
+      return Totp;
+    default:
+      return NotImplemented;
+  }
+});
+</script>
+
+<template>
+  <component
+    :is="pageComponent"
+    :kcContext="kcContext"
+    :i18n="i18n"
+    :classes="classes"
+    :Template="Template"
+    :doUseDefaultCss="doUseDefaultCss"
+  />
+</template>

package/keycloakify-vue/account/DefaultPage.vue.d.ts

@@ -0,0 +1,14 @@
+import type { KcContext } from 'keycloakify/account/KcContext';
+import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
+import { type Component } from 'vue';
+import type { I18n } from './i18n/i18n';
+type __VLS_Props = {
+    kcContext: KcContext;
+    i18n: I18n;
+    classes?: Partial<Record<ClassKey, string>>;
+    Template: Component;
+    doUseDefaultCss: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/keycloakify-vue/account/KcContext/index.d.ts

@@ -0,0 +1 @@
+export type { ExtendKcContext } from 'keycloakify/account/KcContext';

package/keycloakify-vue/account/Template.useInitialize.d.ts

@@ -0,0 +1,13 @@
+import type { Ref } from 'vue';
+export type KcContextLike = {
+    url: {
+        resourcesCommonPath: string;
+        resourcesPath: string;
+    };
+};
+export declare function useInitialize(params: {
+    kcContext: KcContextLike;
+    doUseDefaultCss: boolean;
+}): {
+    isReadyToRender: Ref<boolean>;
+};

package/keycloakify-vue/account/Template.useInitialize.js

@@ -0,0 +1,20 @@
+import { assert } from "keycloakify/tools/assert";
+import { useInsertLinkTags } from "../tools/useInsertLinkTags";
+assert();
+assert();
+function useInitialize(params) {
+  const { kcContext, doUseDefaultCss } = params;
+  const { url } = kcContext;
+  const { areAllStyleSheetsLoaded } = useInsertLinkTags({
+    componentOrHookName: "Template",
+    hrefs: !doUseDefaultCss ? [] : [
+      `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
+      `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
+      `${url.resourcesPath}/css/account.css`
+    ]
+  });
+  return { isReadyToRender: areAllStyleSheetsLoaded };
+}
+export {
+  useInitialize
+};

package/keycloakify-vue/account/Template.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+import { clsx } from 'keycloakify/tools/clsx';
+import type { KcContext } from 'keycloakify/account/KcContext';
+import type { I18n } from './i18n/i18n';
+import type { TemplateProps } from './TemplateProps';
+import { useInitialize } from './Template.useInitialize';
+import { useSetClassName } from '../tools/useSetClassName';
+
+const props = defineProps<TemplateProps<KcContext, I18n>>();
+
+const { kcClsx } = getKcClsx({
+  doUseDefaultCss: props.doUseDefaultCss,
+  classes: props.classes,
+});
+
+const { url, features, realm, message, referrer } = props.kcContext;
+
+onMounted(() => {
+  document.title = props.i18n.msgStr('accountManagementTitle');
+});
+
+useSetClassName({
+  qualifiedName: 'html',
+  className: kcClsx('kcHtmlClass'),
+});
+
+useSetClassName({
+  qualifiedName: 'body',
+  className: clsx('admin-console', 'user', kcClsx('kcBodyClass')),
+});
+
+const { isReadyToRender } = useInitialize({
+  kcContext: props.kcContext,
+  doUseDefaultCss: props.doUseDefaultCss,
+});
+</script>
+
+<template>
+  <template v-if="isReadyToRender">
+    <header class="navbar navbar-default navbar-pf navbar-main header">
+      <nav
+        class="navbar"
+        role="navigation"
+      >
+        <div class="navbar-header">
+          <div class="container">
+            <h1 class="navbar-title">Keycloak</h1>
+          </div>
+        </div>
+        <div class="navbar-collapse navbar-collapse-1">
+          <div class="container">
+            <ul class="nav navbar-nav navbar-utility">
+              <li v-if="i18n.enabledLanguages.length > 1">
+                <div
+                  class="kc-dropdown"
+                  id="kc-locale-dropdown"
+                >
+                  <a
+                    href="#"
+                    id="kc-current-locale-link"
+                  >
+                    {{ i18n.currentLanguage.label }}
+                  </a>
+                  <ul>
+                    <li
+                      v-for="enabledLanguage in i18n.enabledLanguages"
+                      :key="enabledLanguage.languageTag"
+                      class="kc-dropdown-item"
+                    >
+                      <a :href="enabledLanguage.href">{{ enabledLanguage.label }}</a>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+              <li v-if="referrer?.url">
+                <a
+                  :href="referrer.url"
+                  id="referrer"
+                >
+                  <component :is="i18n.msg('backTo', referrer.name)" />
+                </a>
+              </li>
+              <li>
+                <a :href="url.getLogoutUrl()">
+                  <component :is="i18n.msg('doSignOut')" />
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </header>
+
+    <div class="container">
+      <div class="bs-sidebar col-sm-3">
+        <ul>
+          <li :class="clsx(active === 'account' && 'active')">
+            <a :href="url.accountUrl">
+              <component :is="i18n.msg('account')" />
+            </a>
+          </li>
+          <li
+            v-if="features.passwordUpdateSupported"
+            :class="clsx(active === 'password' && 'active')"
+          >
+            <a :href="url.passwordUrl">
+              <component :is="i18n.msg('password')" />
+            </a>
+          </li>
+          <li :class="clsx(active === 'totp' && 'active')">
+            <a :href="url.totpUrl">
+              <component :is="i18n.msg('authenticator')" />
+            </a>
+          </li>
+          <li
+            v-if="features.identityFederation"
+            :class="clsx(active === 'social' && 'active')"
+          >
+            <a :href="url.socialUrl">
+              <component :is="i18n.msg('federatedIdentity')" />
+            </a>
+          </li>
+          <li :class="clsx(active === 'sessions' && 'active')">
+            <a :href="url.sessionsUrl">
+              <component :is="i18n.msg('sessions')" />
+            </a>
+          </li>
+          <li :class="clsx(active === 'applications' && 'active')">
+            <a :href="url.applicationsUrl">
+              <component :is="i18n.msg('applications')" />
+            </a>
+          </li>
+          <li
+            v-if="features.log"
+            :class="clsx(active === 'log' && 'active')"
+          >
+            <a :href="url.logUrl">
+              <component :is="i18n.msg('log')" />
+            </a>
+          </li>
+          <li
+            v-if="realm.userManagedAccessAllowed && features.authorization"
+            :class="clsx(active === 'authorization' && 'active')"
+          >
+            <a :href="url.resourceUrl">
+              <component :is="i18n.msg('myResources')" />
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="col-sm-9 content-area">
+        <div
+          v-if="message !== undefined"
+          :class="clsx('alert', `alert-${message.type}`)"
+        >
+          <span
+            v-if="message.type === 'success'"
+            class="pficon pficon-ok"
+          ></span>
+          <span
+            v-else-if="message.type === 'error'"
+            class="pficon pficon-error-circle-o"
+          ></span>
+          <span
+            class="kc-feedback-text"
+            v-html="kcSanitize(message.summary)"
+          ></span>
+        </div>
+
+        <slot />
+      </div>
+    </div>
+  </template>
+</template>

package/keycloakify-vue/account/Template.vue.d.ts

@@ -0,0 +1,17 @@
+import type { KcContext } from 'keycloakify/account/KcContext';
+import type { I18n } from './i18n/i18n';
+import type { TemplateProps } from './TemplateProps';
+type __VLS_Props = TemplateProps<KcContext, I18n>;
+declare var __VLS_51: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_51) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/keycloakify-vue/account/TemplateProps.d.ts

@@ -0,0 +1,9 @@
+import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
+export type TemplateProps<KcContext, I18n> = {
+    kcContext: KcContext;
+    i18n: I18n;
+    doUseDefaultCss: boolean;
+    active: string;
+    classes?: Partial<Record<ClassKey, string>>;
+};
+export type { ClassKey };

package/keycloakify-vue/account/i18n/i18n.d.ts

@@ -0,0 +1,11 @@
+import type { GenericI18n_noJsx } from 'keycloakify/account/i18n/noJsx/GenericI18n_noJsx';
+import { type MessageKey as MessageKey_defaultSet } from 'keycloakify/account/i18n/messages_defaultSet/types';
+import type { VNode } from 'vue';
+/** INTERNAL: DO NOT IMPORT THIS */
+export type GenericI18n_vue<MessageKey extends string, LanguageTag extends string> = GenericI18n_noJsx<MessageKey, LanguageTag> & {
+    /** Same as msgStr but returns a VNode with the html string rendered as html. */
+    msg: (key: MessageKey_defaultSet, ...args: (string | undefined)[]) => VNode;
+    /** Same as advancedMsgStr but returns a VNode with the html string rendered as html. */
+    advancedMsg: (key: string, ...args: (string | undefined)[]) => VNode;
+};
+export type I18n = GenericI18n_vue<MessageKey_defaultSet, string>;

package/keycloakify-vue/account/i18n/i18nBuilder.d.ts

@@ -0,0 +1,18 @@
+import type { LanguageTag as LanguageTag_defaultSet, MessageKey as MessageKey_defaultSet } from 'keycloakify/account/i18n/messages_defaultSet/types';
+import { type ReturnTypeOfCreateUseI18n } from './useI18n';
+export type I18nBuilder<ThemeName extends string = never, MessageKey_themeDefined extends string = never, LanguageTag_notInDefaultSet extends string = never, ExcludedMethod extends 'withThemeName' | 'withExtraLanguages' | 'withCustomTranslations' = never> = Omit<{
+    withThemeName: <ThemeName extends string>() => I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet, ExcludedMethod | 'withThemeName'>;
+    withExtraLanguages: <LanguageTag_notInDefaultSet extends string>(extraLanguageTranslations: {
+        [LanguageTag in LanguageTag_notInDefaultSet]: {
+            label: string;
+            getMessages: () => Promise<{
+                default: Record<MessageKey_defaultSet, string>;
+            }>;
+        };
+    }) => I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet, ExcludedMethod | 'withExtraLanguages'>;
+    withCustomTranslations: <MessageKey_themeDefined extends string>(messagesByLanguageTag_themeDefined: Partial<{
+        [LanguageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: Record<MessageKey_themeDefined, string | Record<ThemeName, string>>;
+    }>) => I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet, ExcludedMethod | 'withCustomTranslations'>;
+    build: () => ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet>;
+}, ExcludedMethod>;
+export declare const i18nBuilder: I18nBuilder<never, never, never, never>;

package/keycloakify-vue/account/i18n/i18nBuilder.js

@@ -0,0 +1,29 @@
+import { createUseI18n } from "./useI18n";
+function createI18nBuilder(params) {
+  const i18nBuilder2 = {
+    withThemeName: () => createI18nBuilder({
+      extraLanguageTranslations: params.extraLanguageTranslations,
+      messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined
+    }),
+    withExtraLanguages: (extraLanguageTranslations) => createI18nBuilder({
+      extraLanguageTranslations,
+      messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined
+    }),
+    withCustomTranslations: (messagesByLanguageTag_themeDefined) => createI18nBuilder({
+      extraLanguageTranslations: params.extraLanguageTranslations,
+      messagesByLanguageTag_themeDefined
+    }),
+    build: () => createUseI18n({
+      extraLanguageTranslations: params.extraLanguageTranslations,
+      messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined
+    })
+  };
+  return i18nBuilder2;
+}
+const i18nBuilder = createI18nBuilder({
+  extraLanguageTranslations: {},
+  messagesByLanguageTag_themeDefined: {}
+});
+export {
+  i18nBuilder
+};

package/keycloakify-vue/account/i18n/index.d.ts

@@ -0,0 +1 @@
+export * from './i18n';

package/keycloakify-vue/account/i18n/index.js

@@ -0,0 +1 @@
+export * from "./i18n";

package/keycloakify-vue/account/i18n/useI18n.d.ts

@@ -0,0 +1,28 @@
+import { type LanguageTag as LanguageTag_defaultSet, type MessageKey as MessageKey_defaultSet } from 'keycloakify/account/i18n/messages_defaultSet/types';
+import { type KcContextLike } from 'keycloakify/account/i18n/noJsx/getI18n';
+import { type Ref } from 'vue';
+import type { GenericI18n_vue } from './i18n';
+export type ReturnTypeOfCreateUseI18n<MessageKey_themeDefined extends string, LanguageTag_notInDefaultSet extends string> = {
+    useI18n: (params: {
+        kcContext: KcContextLike;
+    }) => {
+        i18n: Ref<GenericI18n_vue<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>>;
+    };
+    ofTypeI18n: GenericI18n_vue<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>;
+};
+export type { KcContextLike };
+export declare function createUseI18n<ThemeName extends string = string, MessageKey_themeDefined extends string = never, LanguageTag_notInDefaultSet extends string = never>(params: {
+    extraLanguageTranslations: {
+        [languageTag in LanguageTag_notInDefaultSet]: {
+            label: string;
+            getMessages: () => Promise<{
+                default: Record<MessageKey_defaultSet, string>;
+            }>;
+        };
+    };
+    messagesByLanguageTag_themeDefined: Partial<{
+        [languageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: {
+            [key in MessageKey_themeDefined]: string | Record<ThemeName, string>;
+        };
+    }>;
+}): ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet>;

package/keycloakify-vue/account/i18n/useI18n.js

@@ -0,0 +1,67 @@
+import { createGetI18n } from "keycloakify/account/i18n/noJsx/getI18n";
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
+import { Reflect } from "tsafe/Reflect";
+import { getCurrentInstance, h, onMounted, onUnmounted, ref } from "vue";
+function createUseI18n(params) {
+  const { extraLanguageTranslations, messagesByLanguageTag_themeDefined } = params;
+  const cache = /* @__PURE__ */ new WeakMap();
+  function renderHtmlString(htmlString, msgKey) {
+    const hasBlockLevelTag = htmlString.includes("<") && htmlString.includes(">") && ["div", "section", "article", "ul", "ol"].some((tagName) => htmlString.includes(`<${tagName}`));
+    const elementName = hasBlockLevelTag ? "div" : "span";
+    return h(elementName, {
+      "data-kc-msg": msgKey,
+      innerHTML: kcSanitize(htmlString)
+    });
+  }
+  function withVue(i18n_noJsx) {
+    const cached = cache.get(i18n_noJsx);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const i18n = {
+      ...i18n_noJsx,
+      msg: (msgKey, ...args) => renderHtmlString(i18n_noJsx.msgStr(msgKey, ...args), msgKey),
+      advancedMsg: (msgKey, ...args) => renderHtmlString(i18n_noJsx.advancedMsgStr(msgKey, ...args), msgKey)
+    };
+    cache.set(i18n_noJsx, i18n);
+    return i18n;
+  }
+  if (typeof document !== "undefined" && document.querySelector("style[data-kc-i18n]") === null) {
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-kc-i18n", "");
+    styleElement.textContent = `div[data-kc-msg] { display: inline-block; }`;
+    document.head.prepend(styleElement);
+  }
+  const { getI18n } = createGetI18n({
+    extraLanguageTranslations,
+    messagesByLanguageTag_themeDefined
+  });
+  function useI18n(params2) {
+    const { kcContext } = params2;
+    const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+    const i18nRef = ref(withVue(i18n));
+    if (getCurrentInstance() !== null) {
+      onMounted(() => {
+        let isActive = true;
+        onUnmounted(() => {
+          isActive = false;
+        });
+        prI18n_currentLanguage?.then((i18n_currentLanguage) => {
+          if (!isActive) {
+            return;
+          }
+          i18nRef.value = withVue(i18n_currentLanguage);
+        });
+      });
+    } else {
+      prI18n_currentLanguage?.then((i18n_currentLanguage) => {
+        i18nRef.value = withVue(i18n_currentLanguage);
+      });
+    }
+    return { i18n: i18nRef };
+  }
+  return { useI18n, ofTypeI18n: Reflect() };
+}
+export {
+  createUseI18n
+};

package/keycloakify-vue/account/index.d.ts

@@ -0,0 +1,4 @@
+export type { ExtendKcContext } from 'keycloakify/account/KcContext';
+export { i18nBuilder } from './i18n/i18nBuilder';
+export { default as DefaultPage } from './DefaultPage.vue';
+export { default as Template } from './Template.vue';

package/keycloakify-vue/account/index.js

@@ -0,0 +1,8 @@
+import { i18nBuilder } from "./i18n/i18nBuilder";
+import { default as default2 } from "./DefaultPage.vue";
+import { default as default3 } from "./Template.vue";
+export {
+  default2 as DefaultPage,
+  default3 as Template,
+  i18nBuilder
+};