@molecule/app-vue

Vue framework bindings for molecule.dev

1,159 44

Install
`npm install @molecule/app-vue`
Latest Version:	1.0.3 (Oct 21, 2026)
Vue:	3
License:	Apache-2.0
Last Updated:	Oct 23, 2026
Links:	GitHub · npm

Maintainer: vialoh

@molecule/app-vue

Vue framework bindings for molecule.dev.

Provides Vue composables and an app plugin for all molecule core interfaces: install moleculePlugin with your providers, then consume them in components via useAuth, useTheme, useTranslation, useStore, and the other composables.

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

import { createApp, defineComponent, h } from 'vue'
import { moleculePlugin, useAuth, useTheme } from '@molecule/app-vue'
import { provider as stateProvider } from '@molecule/app-state-zustand'
import { provider as themeProvider } from '@molecule/app-theme-css-variables'
import { createJWTAuthClient } from '@molecule/app-auth'

const Dashboard = defineComponent({
  setup() {
    // Composables are inject()-based: call them here in setup(), nowhere else.
    const { user, isAuthenticated, logout } = useAuth<{ name?: string }>()
    const { theme, toggleTheme } = useTheme()
    return () =>
      isAuthenticated.value
        ? h('div', { style: { background: theme.value.colors.background } }, [
            h('h1', `Welcome, ${user.value?.name ?? ''}!`),
            h('button', { onClick: toggleTheme }, 'Toggle theme'),
            h('button', { onClick: () => logout() }, 'Log out'),
          ])
        : h('a', { href: '/login' }, 'Log in')
  },
})

const app = createApp(Dashboard)
app.use(moleculePlugin, {
  state: stateProvider,
  auth: createJWTAuthClient({ baseURL: '/api' }),
  theme: themeProvider,
})
app.mount('#app')

Type

framework

Installation

npm install @molecule/app-vue @molecule/app-auth @molecule/app-device @molecule/app-forms @molecule/app-http @molecule/app-i18n @molecule/app-logger @molecule/app-platform @molecule/app-push @molecule/app-routing @molecule/app-state @molecule/app-storage @molecule/app-theme @molecule/app-ui @molecule/app-utilities @molecule/app-version vue

API

Interfaces

`AuthState`

Reactive authentication state snapshot (initialized, authenticated, user, loading, and error).

interface AuthState<T = UserProfile> {
  /**
   * The session's state as one value — render from this instead of combining
   * `initialized`/`authenticated`/`loading`. See {@link AuthStatus}.
   */
  status: AuthStatus
  /**
   * Whether auth state has been initialized.
   */
  initialized: boolean
  /**
   * Whether the user is authenticated.
   */
  authenticated: boolean
  /**
   * Current user (if authenticated).
   */
  user: T | null
  /**
   * Whether an auth operation is in progress.
   */
  loading: boolean
  /**
   * Last auth error (if any).
   */
  error: string | null
}

`AuthClient`

Auth client interface that all auth bond packages must implement. Provides login/logout/register flows, token management, profile updates, and auth state subscription.

interface AuthClient<T = UserProfile, TRegister extends RegisterExtraShape<TRegister> = Record<never, never>> {
    /**
     * Returns the current authentication state snapshot.
     *
     * READING the state starts the client's one session restore when nobody has called
     * {@link initialize} yet — lazily and exactly once, sharing the promise an explicit
     * `initialize()` returns. A hook (`useAuth()`), a subscriber, `isAuthenticated()` and
     * `getUser()` are reads too, so a client whose entry file dropped the template's
     * `authClient.initialize()` line still restores instead of reporting `'loading'`
     * forever.
     */
    getState(): AuthState<T>;
    /**
     * Returns whether the user is currently authenticated.
     */
    isAuthenticated(): boolean;
    /**
     * Gets the current user.
     */
    getUser(): T | null;
    /**
     * Updates the cached user object (state + persistent storage) without
     * hitting the network. Intended for local refreshes after a per-app
     * mutation (e.g., the user just PATCHed their own profile and the
     * server returned the canonical row). Does NOT change tokens.
     *
     * This does not sign the client in: `authenticated` and `status` are
     * unchanged, so an anonymous client stays anonymous. Use
     * {@link login} / {@link register} for a credential exchange, or
     * {@link setSession} when the token was issued outside the client.
     */
    setUser(user: T | null): void;
    /**
     * Gets the current access token.
     */
    getAccessToken(): string | null;
    /**
     * Stores the access token in the configured token storage adapter (in a
     * browser, Web Storage; `'memory'` where no browser store exists). Use this
     * to seed the token after an out-of-band exchange (e.g. the OAuth
     * code→token redirect) instead of writing to `localStorage` directly,
     * which would violate the storage contract and make a stored bearer token
     * JS-readable (XSS-exfiltratable). Pass `null` to clear it.
     *
     * This changes token storage only; it does not sign the client in
     * (`authenticated` and `status` are unchanged). Use {@link login} /
     * {@link register} for a credential exchange, or call {@link setSession}
     * with the token and the user to establish an already-issued session.
     */
    setAccessToken(token: string | null): void;
    /**
     * Adopts a session an out-of-band exchange already established: stores the
     * access token (and the refresh token when given), caches the user, and
     * sets the COMPLETE state — `initialized`, `authenticated`, `status:
     * 'authenticated'`, no error — in one update, with one subscriber
     * notification. Every hook reading the shared client sees the user as
     * signed in immediately.
     *
     * This is the way to seed an OAuth/custom sign-in. Calling
     * {@link setAccessToken} and {@link setUser} instead does NOT sign the
     * client in.
     */
    setSession(session: AuthSessionSeed<T>): void;
    /**
     * Gets the refresh token.
     */
    getRefreshToken(): string | null;
    /**
     * Logs in with credentials.
     */
    login(credentials: LoginCredentials): Promise<AuthResult<T>>;
    /**
     * Logs out the current user.
     */
    logout(): Promise<void>;
    /**
     * Registers a new user. Accepts the base fields plus the app's own fields
     * (`TRegister`) at the top level — see {@link RegisterData}.
     */
    register(data: RegisterData<TRegister>): Promise<AuthResult<T>>;
    /**
     * Refreshes the access token.
     */
    refresh(): Promise<AuthResult<T>>;
    /**
     * Requests a password reset.
     */
    requestPasswordReset(data: PasswordResetRequest): Promise<void>;
    /**
     * Confirms a password reset.
     */
    confirmPasswordReset(data: PasswordResetConfirm): Promise<void>;
    /**
     * Updates the current user's profile.
     */
    updateProfile(data: Partial<T>): Promise<T>;
    /**
     * Changes the current user's password.
     */
    changePassword(oldPassword: string, newPassword: string): Promise<void>;
    /**
     * Initializes auth state (e.g., from stored tokens).
     *
     * LAZY and IDEMPOTENT: the first read of the state ({@link getState},
     * {@link subscribe}, `useAuth()`) starts this same restore when nobody has called
     * `initialize()`, and every later call shares the one promise instead of sending a
     * second request. An app that keeps the template's explicit call behaves exactly as
     * before; an app that loses that line still restores its session.
     *
     * With a stored token AND a stored user it marks the session `'authenticated'`
     * SYNCHRONOUSLY — before its first `await` — so the first render is the
     * signed-in UI and no page waits on a verification round trip. Any check
     * (a refresh, the cookie-restore probe) settles behind that render, and only an
     * explicit 401/403 ends the session; a network/5xx/404 failure keeps it and
     * reports `'unavailable'`. With no stored user the client stays `'loading'`
     * until the cookie restore decides.
     *
     * Do not put this call (or a `/me` request of your own) in front of the first
     * render, and do not render a loading screen over a session it just restored:
     * `whenRestored()` already resolves as soon as the restore has settled, and the
     * HTTP gate built on it holds requests for exactly that window.
     */
    initialize(): Promise<void>;
    /**
     * Re-checks a restored session against the server, in the background — the
     * boot-time validation an app with a stored token needs when a revoked or
     * expired token must sign the user out. Call it AFTER the first render
     * (`initialize()` restores synchronously from storage; this costs one request).
     *
     * - The server confirms the user: the session is refreshed and {@link AuthState.status}
     *   stays `'authenticated'`.
     * - The server answers 401 or 403: the token is dead — the stored session is
     *   cleared and the status becomes `'unauthenticated'`.
     * - The server cannot confirm the session — a network failure, a 5xx, or a 404
     *   from a misconfigured {@link AuthClientConfig.currentUserEndpoint}: the
     *   session (token AND user) is KEPT and the status becomes `'unavailable'`, so
     *   the app can retry instead of signing the user out over a bad connection or a
     *   route that does not exist. The 404 error names `currentUserEndpoint`.
     *
     * Do not hand-write this beside the client: a parallel token/user store for a
     * "validating"/"unavailable" flag is the race this method removes.
     *
     * Optional: a provider with no restorable session has nothing to validate.
     */
    validateSession?(): Promise<void>;
    /**
     * Resolves when the session restore started by `initialize()` has settled — the point
     * after which the client knows whether this visitor is signed in.
     *
     * Resolves IMMEDIATELY when no restore is in flight: before `initialize()` is ever
     * called, and after it has finished. A restore that failed resolves too (it settled the
     * question), so an HTTP client can await this before every request without risking one
     * held forever. That is what makes the fetch-before-restore race impossible: a page that
     * fetches viewer-dependent data on mount waits here instead of going out anonymously
     * (see `setAuthGate` in `@molecule/app-http`).
     *
     * Optional: a provider that restores no session has nothing to wait for. Without it, an
     * HTTP client bonded to that provider sends first-paint requests unauthenticated.
     *
     * A provider whose restore sends a request THROUGH the gated HTTP client must send that
     * request with `skipAuthGate: true` (`RequestConfig` in `@molecule/app-http`): the gate
     * waits on this promise, so holding the restore's own request makes the gate wait on
// … truncated — the full declaration is in node_modules/@molecule/app-vue/dist

`FormController`

Form controller interface.

All form providers must implement this interface.

interface FormController<T extends Record<string, unknown> = Record<string, unknown>> {
  /**
   * Gets the current form state.
   */
  getState(): FormState<T>
  /**
   * Gets the value of a specific field.
   */
  getValue(name: string): unknown
  getValue<K extends keyof T>(name: K): T[K]
  /**
   * Gets all form values.
   */
  getValues(): T
  /**
   * Sets the value of a specific field.
   */
  setValue(
    name: string,
    value: unknown,
    options?: {
      shouldValidate?: boolean
      shouldDirty?: boolean
      shouldTouch?: boolean
    },
  ): void
  /**
   * Sets multiple values at once.
   */
  setValues(
    values: Partial<T>,
    options?: {
      shouldValidate?: boolean
    },
  ): void
  /**
   * Gets the error for a specific field.
   */
  getError(name: string): string | undefined
  /**
   * Sets the error for a specific field.
   */
  setError(name: string, error: string | undefined): void
  /**
   * Clears the error for a specific field.
   */
  clearError<K extends keyof T>(name: K): void
  /**
   * Clears all errors.
   */
  clearErrors(): void
  /**
   * Gets the field state for a specific field.
   */
  getFieldState<K extends keyof T>(name: K): FieldState<T[K]>
  /**
   * Registers a field for form management.
   */
  register(nameOrOptions: string | RegisterOptions, options?: RegisterOptions): FieldRegistration
  /**
   * Unregisters a field.
   */
  unregister(name: string): void
  /**
   * Validates a specific field.
   */
  validateField<K extends keyof T>(name: K): Promise<boolean>
  /**
   * Validates all fields.
   */
  validate(): Promise<boolean>
  /**
   * Resets the form to initial values.
   */
  reset(values?: Partial<T>): void
  /**
   * Handles form submission.
   */
  handleSubmit(
    onSubmit: (values: T) => void | Promise<void>,
    onError?: (errors: Partial<Record<keyof T, string>>) => void,
  ): (event?: { preventDefault?: () => void }) => Promise<void>
  /**
   * Sets focus to a field.
   */
  setFocus(name: keyof T): void
  /**
   * Subscribes to form state changes.
   */
  subscribe(callback: (state: FormState<T>) => void): () => void
  /**
   * Destroys the form controller.
   */
  destroy(): void
}

`FormOptions`

Form creation options.

interface FormOptions<T extends Record<string, unknown>> {
  /**
   * Default values.
   */
  defaultValues?: Partial<T>
  /**
   * Validation mode.
   */
  mode?: 'onSubmit' | 'onChange' | 'onBlur' | 'all'
  /**
   * Revalidation mode.
   */
  reValidateMode?: 'onChange' | 'onBlur' | 'onSubmit'
  /**
   * Whether to focus the first error field on submit.
   */
  shouldFocusError?: boolean
  /**
   * Form-level validation function.
   */
  validate?: (
    values: T,
  ) => Partial<Record<keyof T, string>> | Promise<Partial<Record<keyof T, string>>>
}

`HttpClient`

HTTP client interface.

All HTTP providers must implement this interface.

interface HttpClient {
  /**
   * Base URL for all requests.
   */
  baseURL: string
  /**
   * Default headers for all requests.
   */
  defaultHeaders: Record<string, string>
  /**
   * Makes a generic HTTP request. `data` is a field of THIS config object — the same body
   * `post(url, data, config)` takes as its second argument.
   */
  request<T = unknown>(config: FullRequestConfig): Promise<HttpResponse<T>>
  /**
   * Makes a GET request.
   */
  get<T = unknown>(url: string, config?: RequestConfig): Promise<HttpResponse<T>>
  /**
   * Makes a POST request. `data` is the request BODY, not a config object: the wire body is
   * `data` itself, so `post(url, { data: body })` sends `{"data":body}` — pass `body` directly.
   * A config (headers, params) is the THIRD argument.
   */
  post<T = unknown>(url: string, data?: unknown, config?: RequestConfig): Promise<HttpResponse<T>>
  /**
   * Makes a PUT request. `data` is the request BODY (second argument) — never `{ data: body }`,
   * which sends `{"data":body}`; a config is the THIRD argument.
   */
  put<T = unknown>(url: string, data?: unknown, config?: RequestConfig): Promise<HttpResponse<T>>
  /**
   * Makes a PATCH request. `data` is the request BODY (second argument) — never `{ data: body }`,
   * which sends `{"data":body}`; a config is the THIRD argument.
   */
  patch<T = unknown>(url: string, data?: unknown, config?: RequestConfig): Promise<HttpResponse<T>>
  /**
   * Makes a DELETE request.
   */
  delete<T = unknown>(url: string, config?: RequestConfig): Promise<HttpResponse<T>>
  /**
   * Adds a request interceptor.
   * Returns a function to remove the interceptor.
   */
  addRequestInterceptor(interceptor: RequestInterceptor): () => void
  /**
   * Adds a response interceptor.
   * Returns a function to remove the interceptor.
   */
  addResponseInterceptor(interceptor: ResponseInterceptor): () => void
  /**
   * Adds an error interceptor.
   * Returns a function to remove the interceptor.
   */
  addErrorInterceptor(interceptor: ErrorInterceptor): () => void
  /**
   * Sets the authorization token.
   */
  setAuthToken(token: string | null): void
  /**
   * Returns the current authorization token, or `null` if not set.
   */
  getAuthToken(): string | null
  /**
   * Registers a handler for authentication errors (401).
   *
   * @returns An unsubscribe function.
   */
  onAuthError(handler: () => void): () => void
}

`I18nProvider`

i18n provider interface.

All i18n providers must implement this interface.

interface I18nProvider {
  /**
   * Gets the current locale.
   */
  getLocale(): string
  /**
   * Sets the current locale.
   *
   * **Fleet contract:** every conformant provider (the core simple provider,
   * `@molecule/api-i18n-simple`, `@molecule/app-i18n-i18next`, and
   * `@molecule/app-i18n-react-i18next`) MUST throw `Error('Locale "<code>"
   * not found')` when `locale` is not registered — via the constructor's
   * `initialLocales`/`locales` config, `addLocale()`, or `addTranslations()`
   * (all three register a locale). It must NOT silently degrade to
   * fallback-locale text while `getLocale()` reports the unregistered code —
   * that divergence makes a misconfigured locale switch indistinguishable
   * from a working one until a user notices the wrong language on screen.
   */
  setLocale(locale: string): Promise<void>
  /**
   * Gets all available locales.
   */
  getLocales(): LocaleConfig[]
  /**
   * Adds a locale.
   */
  addLocale(config: LocaleConfig): void
  /**
   * Removes a locale by code, notifying subscribers so language pickers
   * built on `onLocaleChange` re-render their list. If the removed locale
   * is currently active, the caller is responsible for switching to a
   * fallback (e.g. `'en'`) BEFORE calling this — the provider will not
   * auto-fall-back on its own.
   *
   * Returns `true` if the locale was registered and removed, `false`
   * otherwise.
   */
  removeLocale(code: string): boolean
  /**
   * Adds translations to a locale. Auto-creates the locale if it doesn't exist.
   *
   * **Fleet contract:** merges are DEEP, not a shallow spread — registering
   * two calls (e.g. two modules) that share a top-level namespace key merges
   * their subtrees instead of the second call clobbering the first's nested
   * translations wholesale. `@molecule/api-i18n-simple` implements the same
   * contract on the API side.
   */
  addTranslations(locale: string, translations: Translations, namespace?: string): void
  /**
   * Translates a key with optional interpolation values and pluralization.
   *
   * **Fleet plural contract (matches i18next's own key resolution order):**
   * when `options.count` is provided, the plural-suffixed key
   * (`` `${key}_${pluralForm}` ``, e.g. `item_one`/`item_few`/…, falling back
   * to `` `${key}_other` ``) is looked up FIRST and wins over the base `key`
   * if BOTH are registered. Only when no plural-suffixed key exists at all
   * does resolution fall back to the base key. A catalog that ships both
   * `item` and `item_one`/`item_other` therefore pluralizes identically
   * whichever provider is bonded.
   *
   * @returns The translated string, or the default value / key if not found.
   */
  t(
    key: string,
    values?: InterpolationValues,
    options?: {
      defaultValue?: string
      count?: number
    },
  ): string
  /**
   * Checks if a translation key exists.
   *
   * **Fleet contract:** follows the SAME locale-resolution chain as `t()` —
   * the active locale, then the English fallback — so `exists(key) === true`
   * whenever `t(key)` would render real translated text (not the raw key or
   * an inline `defaultValue`). Do not narrow this to "only the active
   * locale's own catalog"; that made `exists()` return `false` for keys `t()`
   * happily rendered via the English fallback, and the answer differed by
   * provider.
   *
   * @returns `true` if the key has a translation.
   */
  exists(key: string): boolean
  /**
   * Formats a number according to the current locale.
   *
   * @returns The locale-formatted number string.
   */
  formatNumber(value: number, options?: NumberFormatOptions): string
  /**
   * Formats a date according to the current locale.
   *
   * @returns The locale-formatted date string.
   */
  formatDate(value: Date | number | string, options?: DateFormatOptions): string
  /**
   * Formats a relative time (e.g. "2 hours ago").
   *
   * @returns The locale-formatted relative time string.
   */
  formatRelativeTime(
    value: Date | number,
    options?: {
      unit?: Intl.RelativeTimeFormatUnit
    },
  ): string
  /**
   * Formats a list (e.g. "A, B, and C").
   *
   * @returns The locale-formatted list string.
   */
  formatList(
    values: string[],
    options?: {
      type?: 'conjunction' | 'disjunction' | 'unit'
    },
  ): string
  /**
   * Subscribes to locale changes.
   *
   * @returns An unsubscribe function.
   */
  onLocaleChange(listener: (locale: string) => void): () => void
  /**
   * Gets the text direction for the current locale.
   *
   * @returns `'ltr'` or `'rtl'`.
   */
  getDirection(): 'ltr' | 'rtl'
  /**
   * Checks if a translation key exists (alias for exists).
   */
  hasKey?(key: string): boolean
  /**
   * Checks if the provider is ready.
   */
  isReady?(): boolean
  /**
   * Registers a callback for when the provider is ready.
   */
  onReady?(callback: () => void): () => void
  /**
   * Registers a lazily-loaded content module for automatic reload on locale changes.
   * All registered content is reloaded during `setLocale()` before listeners fire,
   * ensuring content is available on the first re-render with no flash.
   *
   * Idempotent: registering the same module name twice is a no-op.
   */
  registerContent?(module: string, loader: (locale: string) => Promise<void>): void
}

`LoggerProvider`

Logger provider interface that all logger bond packages must implement. Creates and manages logger instances and global log configuration.

interface LoggerProvider {
  /**
   * Gets a logger by name, or the root logger if no name given.
   */
  getLogger(name?: string): Logger
  /**
   * Creates a named logger.
   */
  createLogger(nameOrConfig: string | LoggerConfig, config?: LoggerConfig): Logger
  /**
   * Sets the global log level.
   */
  setLevel(level: LogLevel): void
  /**
   * Gets the global log level.
   */
  getLevel(): LogLevel
  /**
   * Adds a global transport.
   */
  addTransport(transport: LogTransport): () => void
  /**
   * Enables logging.
   */
  enable(): void
  /**
   * Disables logging.
   */
  disable(): void
  /**
   * Checks if logging is enabled.
   *
   * @returns `true` if logging is currently enabled.
   */
  isEnabled(): boolean
}

`Router`

Client-side router providing navigation, guards, route matching, and history control.

All routing providers must implement this interface.

interface Router {
  /**
   * Returns the current route location (pathname, search, hash, state).
   */
  getLocation(): RouteLocation
  /**
   * Gets the current route params.
   */
  getParams<T extends RouteParams = RouteParams>(): T
  /**
   * Gets the current query params.
   */
  getQuery(): QueryParams
  /**
   * Gets a specific query parameter.
   */
  getQueryParam(key: string): string | undefined
  /**
   * Gets the current hash.
   */
  getHash(): string
  /**
   * Navigates to a path.
   */
  navigate(path: string, options?: NavigateOptions): void
  /**
   * Navigates to a named route.
   */
  navigateTo(
    name: string,
    params?: RouteParams,
    query?: QueryParams,
    options?: NavigateOptions,
  ): void
  /**
   * Goes back in history.
   */
  back(): void
  /**
   * Goes forward in history.
   */
  forward(): void
  /**
   * Goes to a specific point in history.
   */
  go(delta: number): void
  /**
   * Updates the current query params.
   */
  setQuery(params: QueryParams, options?: NavigateOptions): void
  /**
   * Updates a specific query parameter.
   */
  setQueryParam(key: string, value: string | undefined, options?: NavigateOptions): void
  /**
   * Updates the current hash.
   */
  setHash(hash: string, options?: NavigateOptions): void
  /**
   * Checks if a path matches the current location.
   *
   * @returns `true` if the path matches the current route.
   */
  isActive(path: string, exact?: boolean): boolean
  /**
   * Matches a path pattern against a pathname.
   */
  matchPath<Params extends RouteParams = RouteParams>(
    pattern: string,
    pathname: string,
  ): RouteMatch<Params> | null
  /**
   * Generates a URL from a named route.
   */
  generatePath(name: string, params?: RouteParams, query?: QueryParams): string
  /**
   * Subscribes to route changes.
   */
  subscribe(listener: RouteChangeListener): () => void
  /**
   * Adds a navigation guard.
   */
  addGuard(guard: NavigationGuard): () => void
  /**
   * Registers route definitions.
   */
  registerRoutes(routes: RouteDefinition[]): void
  /**
   * Gets all registered routes.
   */
  getRoutes(): RouteDefinition[]
  /**
   * Destroys the router.
   */
  destroy(): void
}

`RouterConfig`

Configuration options for creating a router instance.

interface RouterConfig {
  /**
   * Router mode.
   */
  mode?: 'history' | 'hash' | 'memory'
  /**
   * Base path.
   */
  basePath?: string
  /**
   * Initial routes.
   */
  routes?: RouteDefinition[]
}

`StoreConfig`

Configuration for creating a store (initial state, optional name, and middleware chain).

interface StoreConfig<T> {
  /**
   * Initial state value.
   */
  initialState: T
  /**
   * Optional name for debugging.
   */
  name?: string
  /**
   * Optional middleware functions.
   */
  middleware?: StoreMiddleware<T>[]
}

`Store`

Reactive state container with getState, setState, subscribe, and destroy.

All state management providers must implement this interface.

interface Store<T> {
  /**
   * Gets the current state.
   */
  getState(): T
  /**
   * Sets the state (partial or via updater function).
   */
  setState(partial: Partial<T> | ((state: T) => Partial<T>)): void
  /**
   * Subscribes to state changes.
   * Returns an unsubscribe function.
   */
  subscribe(listener: StateListener<T>): () => void
  /**
   * Destroys the store and cleans up subscriptions.
   */
  destroy(): void
}

`StateProvider`

State provider interface that all state management bond packages must implement. Provides the store creation factory.

interface StateProvider {
  /**
   * Creates a new store.
   */
  createStore<T>(config: StoreConfig<T>): Store<T>
}

`StorageProvider`

Storage provider interface.

All storage providers must implement this interface.

interface StorageProvider {
  /**
   * Gets a value from storage.
   */
  get<T = unknown>(key: string): Promise<T | null>
  /**
   * Sets a value in storage.
   */
  set<T = unknown>(key: string, value: T): Promise<void>
  /**
   * Removes a value from storage.
   */
  remove(key: string): Promise<void>
  /**
   * Clears all values from storage.
   */
  clear(): Promise<void>
  /**
   * Gets all keys in storage.
   */
  keys(): Promise<string[]>
  /**
   * Gets multiple values from storage.
   */
  getMany?<T = unknown>(keys: string[]): Promise<Map<string, T | null>>
  /**
   * Sets multiple values in storage.
   */
  setMany?<T = unknown>(entries: Array<[string, T]>): Promise<void>
  /**
   * Removes multiple values from storage.
   */
  removeMany?(keys: string[]): Promise<void>
}

`ThemeProvider`

Manages theme state including the active theme, mode toggling, and change subscriptions.

interface ThemeProvider {
  /**
   * Returns the currently active theme.
   */
  getTheme(): Theme
  /**
   * Sets the active theme by reference or by name.
   *
   * @param theme - A `Theme` object or a theme name string to activate.
   */
  setTheme(theme: Theme | string): void
  /**
   * Toggles between light and dark mode for the active theme.
   */
  toggleMode(): void
  /**
   * Subscribes to theme changes. The callback fires whenever
   * `setTheme()` or `toggleMode()` is called.
   *
   * @param callback - Invoked with the new theme after each change.
   * @returns An unsubscribe function.
   */
  subscribe(callback: (theme: Theme) => void): () => void
  /**
   * Returns all registered themes. Optional — not all providers
   * support multiple themes.
   */
  getThemes?(): Theme[]
  /**
   * Returns the theme a render WITHOUT a browser produces — a server or
   * build-time render, which has no storage and no `prefers-color-scheme`
   * to read. A hydrating client renders this theme first, so its markup
   * matches what the server sent, and switches to `getTheme()` right
   * after. Optional — a provider whose theme cannot differ between the two
   * need not implement it.
   */
  getServerTheme?(): Theme
}

`Theme`

Complete theme definition.

interface Theme {
  name: string
  mode: 'light' | 'dark'
  colors: ThemeColors
  breakpoints: ThemeBreakpoints
  spacing: ThemeSpacing
  typography: ThemeTypography
  borderRadius: ThemeBorderRadius
  shadows: ThemeShadows
  transitions: ThemeTransitions
  zIndex: ThemeZIndex
}

`UseAsyncStateReturn`

Return type for the {@link useAsyncState} composable.

interface UseAsyncStateReturn<T> {
  /** The reactive state value. */
  state: Ref<T>
  /** Set the state to a new value, function updater, or promise. */
  setState: (value: T | ((prev: T) => T) | Promise<T | ((prev: T) => T)>) => void
  /** Merge a partial value into the state (object states only). */
  extendState: (
    partial:
      Partial<T> | ((prev: T) => Partial<T>) | Promise<Partial<T> | ((prev: T) => Partial<T>)>,
  ) => void
}

`UseCapacitorAppReturn`

Return type for the useCapacitorApp composable.

interface UseCapacitorAppReturn {
  ready: ComputedRef<boolean>
  deviceReady: ComputedRef<boolean>
  pushReady: ComputedRef<boolean>
  error: ComputedRef<Error | null>
  initialize: () => Promise<void>
}

`UseChangePasswordReturn`

Return type for the {@link useChangePassword} composable.

interface UseChangePasswordReturn {
  status: ComputedRef<PromiseStatus>
  error: ComputedRef<Error | null>
  changePassword: (oldPassword: string, newPassword: string) => Promise<void>
  reset: () => void
}

`UseDeviceReturn`

Return type for the useDevice composable.

interface UseDeviceReturn {
  deviceInfo: DeviceInfo
  screenInfo: ScreenInfo
  hardwareInfo: HardwareInfo
  featureSupport: FeatureSupport
  supports: (feature: keyof FeatureSupport) => boolean
  isOnline: () => boolean
  isStandalone: () => boolean
  language: string
  languages: string[]
}

`UseFormOptions`

Options for useForm composable.

interface UseFormOptions<T extends Record<string, unknown>> extends FormOptions<T> {
  /**
   * Form provider's createForm function.
   */
  createForm: (options: FormOptions<T>) => FormController<T>
}

`UseFormReturn`

Return type for useForm composable.

interface UseFormReturn<T extends Record<string, unknown>> {
  // State
  formState: ComputedRef<FormState<T>>
  isValid: ComputedRef<boolean>
  isDirty: ComputedRef<boolean>
  isSubmitting: ComputedRef<boolean>

  // Field methods
  register: (name: keyof T, options?: RegisterOptions) => FieldRegistration
  getValue: <K extends keyof T>(name: K) => T[K]
  setValue: <K extends keyof T>(name: K, value: T[K]) => void
  getError: (name: keyof T) => string | undefined
  setError: (name: keyof T, error: string | undefined) => void
  clearErrors: () => void

  // Form methods
  handleSubmit: (
    onSubmit: (values: T) => void | Promise<void>,
    onError?: (errors: Partial<Record<keyof T, string>>) => void,
  ) => (event?: { preventDefault?: () => void }) => Promise<void>
  reset: (values?: Partial<T>) => void
  validate: () => Promise<boolean>

  // Form controller (for use with useWatch/useFieldState)
  form: FormController<T>
}

`UseLoginReturn`

Return type for the {@link useLogin} composable.

interface UseLoginReturn<T = unknown> {
  status: ComputedRef<PromiseStatus>
  value: ComputedRef<AuthResult<T> | null>
  error: ComputedRef<Error | null>
  login: (credentials: LoginCredentials) => Promise<AuthResult<T>>
  reset: () => void
}

`UseOAuthOptions`

OAuth configuration options.

interface UseOAuthOptions {
  /** Base URL for the API server (e.g. `https://api.example.com`). */
  baseURL?: string
  /** List of supported OAuth provider names (e.g. `['google', 'github']`). */
  oauthProviders?: string[]
  /** Path prefix for OAuth initiation routes. Defaults to `/oauth`. */
  oauthEndpoint?: string
  /** Path for the OAuth login POST endpoint. Defaults to `/users/log-in/oauth`. */
  loginEndpoint?: string
  /** Callback fired after a successful OAuth login. */
  onSuccess?: () => void
  /** Callback fired with an error message when the OAuth login fails. */
  onError?: (error: string) => void
  /**
   * Explicit auth client used to establish the session after the callback
   * exchange. Defaults to the injected client ({@link AuthKey}) when the
   * composable runs during component setup — pass one explicitly for
   * callers/tests outside an auth provider.
   */
  authClient?: AuthClient<unknown>
}

`UseOAuthReturn`

Return type for the {@link useOAuth} composable.

interface UseOAuthReturn {
  /** Available OAuth provider names. */
  providers: ComputedRef<string[]>
  /** Builds the OAuth initiation URL for a provider. */
  getOAuthUrl: (provider: string) => string
  /** Full-page redirect to the provider's OAuth initiation endpoint. */
  redirect: (provider: string) => void
  /**
   * Handles an OAuth callback: when the current URL carries a `code` param and
   * a provider was stashed by {@link redirect}, exchanges the code for a
   * session. A guarded no-op otherwise. Runs automatically on mount when the
   * composable is used inside a component; exposed for manual invocation
   * outside components (e.g. tests or custom callback screens).
   */
  handleCallback: () => Promise<void>
}

`UsePasswordResetReturn`

Return type for usePasswordReset composable.

interface UsePasswordResetReturn {
  requestStatus: ComputedRef<PromiseStatus>
  requestError: ComputedRef<Error | null>
  confirmStatus: ComputedRef<PromiseStatus>
  confirmError: ComputedRef<Error | null>
  requestReset: (data: PasswordResetRequest) => Promise<void>
  confirmReset: (data: PasswordResetConfirm) => Promise<void>
  reset: () => void
}

`UsePlatformReturn`

Return type for the usePlatform composable.

interface UsePlatformReturn {
  platform: Platform
  isNative: boolean
  isMobile: boolean
  isDesktop: boolean
  isWeb: boolean
  isDevelopment: boolean
  isProduction: boolean
  isPlatform: (...platforms: Platform[]) => boolean
}

`UsePromiseReturn`

Return type for usePromise composable.

interface UsePromiseReturn<T> {
  /** Current status of the async operation. */
  status: ComputedRef<PromiseStatus>
  /** Resolved value, or null if not yet resolved. */
  value: ComputedRef<T | null>
  /** Rejection error, or null if not rejected. */
  error: ComputedRef<Error | null>
  /** Invoke the async function. Returns a promise that resolves with the result. */
  call: (...args: any[]) => Promise<T>
  /** Cancel the current in-flight call. */
  cancel: (message?: string) => void
  /** Reset state to idle with null value and error. */
  reset: () => void
}

`UsePushReturn`

Return type for the usePush composable.

interface UsePushReturn {
  permission: ShallowRef<PermissionStatus | null>
  token: ShallowRef<PushToken | null>
  checkPermission: () => Promise<PermissionStatus>
  requestPermission: () => Promise<PermissionStatus>
  register: (options?: PushRegisterOptions) => Promise<PushToken>
  unregister: () => Promise<void>
  onNotificationReceived: (listener: NotificationReceivedListener) => () => void
  onNotificationAction: (listener: NotificationActionListener) => () => void
  onTokenChange: (listener: TokenChangeListener) => () => void
  setBadge: (count: number) => Promise<void>
  clearBadge: () => Promise<void>
}

`UseSignupReturn`

Return type for useSignup composable.

interface UseSignupReturn<T = unknown> {
  status: ComputedRef<PromiseStatus>
  value: ComputedRef<AuthResult<T> | null>
  error: ComputedRef<Error | null>
  signup: (data: RegisterData) => Promise<AuthResult<T>>
  reset: () => void
}

Returns: The result.

`UseStorageValueOptions`

Options for useStorageValue composable.

interface UseStorageValueOptions<T> {
  defaultValue?: T
}

`UseVersionReturn`

Return type for the useVersion composable.

interface UseVersionReturn {
  state: ComputedRef<VersionState>
  isUpdateAvailable: ComputedRef<boolean>
  isChecking: ComputedRef<boolean>
  isServiceWorkerWaiting: ComputedRef<boolean>
  newVersion: ComputedRef<string | undefined>
  checkForUpdates: () => Promise<boolean>
  applyUpdate: (options?: { force?: boolean }) => void
  dismissUpdate: () => void
  startPeriodicChecks: (options?: UpdateCheckOptions) => void
  stopPeriodicChecks: () => void
}

`MoleculePluginOptions`

Options for the molecule Vue plugin.

interface MoleculePluginOptions {
  state?: StateProvider
  auth?: AuthClient<unknown>
  theme?: ThemeProvider
  router?: Router
  i18n?: I18nProvider
  http?: HttpClient
  storage?: StorageProvider
  logger?: LoggerProvider
}

`UseStoreOptions`

Options for useStore composable.

interface UseStoreOptions<T, S> {
  selector?: (state: T) => S
}

`UseAuthReturn`

Return type for useAuth composable.

interface UseAuthReturn<
  T = unknown,
  TRegister extends RegisterExtraShape<TRegister> = Record<never, never>,
> {
  state: ComputedRef<AuthState<T>>
  user: ComputedRef<T | null>
  isAuthenticated: ComputedRef<boolean>
  isLoading: ComputedRef<boolean>
  login: AuthClient<T>['login']
  logout: AuthClient<T>['logout']
  register: AuthClient<T, TRegister>['register']
  refresh: AuthClient<T>['refresh']
}

`UseThemeReturn`

Return type for useTheme composable.

interface UseThemeReturn {
  theme: ComputedRef<Theme>
  themeName: ComputedRef<string>
  mode: ComputedRef<'light' | 'dark'>
  setTheme: (name: string) => void
  toggleTheme: () => void
}

`UseRouterReturn`

Return type for useRouter composable.

interface UseRouterReturn {
  location: ComputedRef<ReturnType<Router['getLocation']>>
  params: ComputedRef<RouteParams>
  query: ComputedRef<QueryParams>
  navigate: Router['navigate']
  navigateTo: Router['navigateTo']
  back: Router['back']
  forward: Router['forward']
  isActive: Router['isActive']
}

`UseTranslationReturn`

Return type for useTranslation composable.

interface UseTranslationReturn {
  t: I18nProvider['t']
  locale: ComputedRef<string>
  direction: ComputedRef<'ltr' | 'rtl'>
  locales: ComputedRef<ReturnType<I18nProvider['getLocales']>>
  setLocale: I18nProvider['setLocale']
  formatNumber: I18nProvider['formatNumber']
  formatDate: I18nProvider['formatDate']
}

`UseHttpState`

State for async HTTP operations.

interface UseHttpState<T> {
  data: Ref<T | null>
  loading: Ref<boolean>
  error: Ref<Error | null>
}

`UseHttpReturn`

Return type for useHttp composable.

interface UseHttpReturn<T> extends UseHttpState<T> {
  execute: () => Promise<T | null>
  reset: () => void
}

`UseHttpOptions`

Options for useHttp composable.

interface UseHttpOptions {
  immediate?: boolean
  onSuccess?: <T>(data: T) => void
  onError?: (error: Error) => void
}

`UseStorageValueReturn`

Return type for useStorageValue composable.

interface UseStorageValueReturn<T> {
  value: Ref<T | undefined>
  loading: Ref<boolean>
  error: Ref<Error | null>
  setValue: (value: T) => Promise<void>
  removeValue: () => Promise<void>
}

Functions

`useAsyncState(initialValue)`

Vue composable for async-capable state management.

Provides a reactive state ref with setState and extendState methods that accept synchronous values, updater functions, or promises.

function useAsyncState(initialValue: T): UseAsyncStateReturn<T>

initialValue — The initial state value

Returns: Reactive state and setter methods

`useAuthClient()`

Composable to access the auth client from injection.

Pass the same generics the client was created with — useAuthClient<MyUser, { username: string }>() — so register() accepts the app's own fields.

function useAuthClient(): AuthClient<T, TRegister>

Returns: The auth client

`useAuth()`

Composable for authentication state and actions.

function useAuth(): UseAuthReturn<T, TRegister>

Returns: Auth state and action methods

`useUser()`

Composable to get just the authenticated user.

function useUser(): ComputedRef<T | null>

Returns: Computed user reference

`useIsAuthenticated()`

Composable to check if user is authenticated.

function useIsAuthenticated(): ComputedRef<boolean>

Returns: Computed authentication status

`useCapacitorApp(options)`

Composable for Capacitor app initialization.

Wraps createCapacitorApp from @molecule/app-platform with Vue reactivity. Auto-initializes on mount (inside a component) or eagerly (inside an effect scope). Cleans up on scope dispose.

function useCapacitorApp(options?: CapacitorAppOptions): UseCapacitorAppReturn

options — Capacitor app configuration options

Returns: Reactive Capacitor app state including readiness flags, error, and an initialize method.

`useChangePassword()`

Composable for changing password with async state tracking.

function useChangePassword(): UseChangePasswordReturn

Returns: Reactive status, error, a changePassword action, and a reset method.

`useDevice()`

Composable for device information.

Uses module-level getProvider() from @molecule/app-device (singleton). Static — no reactivity needed. Just calls provider methods and returns plain values.

function useDevice(): UseDeviceReturn

Returns: Device information and utility methods

`useForm(options)`

Composable for form state management.

function useForm(options: UseFormOptions<T>): UseFormReturn<T>

options — Form options including createForm from a forms provider

Returns: Form state, computed properties, and methods

`useWatch(form, name)`

Composable to watch a specific field value.

function useWatch(form: FormController<T>, name: K): ComputedRef<T[K]>

form — Form controller (from useForm().form)
name — Field name to watch

Returns: Computed reference to the field value

`useFieldState(form, name)`

Composable to get field-level state.

function useFieldState(form: FormController<T>, name: keyof T): ComputedRef<FieldState<T[keyof T]>>

form — Form controller (from useForm().form)
name — Field name

Returns: Computed field state (value, error, touched, dirty, valid, validating)

`useHttpClient()`

Composable to access the HTTP client from injection.

function useHttpClient(): HttpClient

Returns: The HTTP client

`useHttp(method, url, config, options)`

Composable for making HTTP requests with state management.

function useHttp(
  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
  url: string,
  config?: RequestConfig,
  options?: UseHttpOptions,
): UseHttpReturn<T>

method — HTTP method
url — Request URL
config — Request configuration
options — Composable options

Returns: Request state and execute function