Vue Mode Integration

Vue Mode provides RootAuth’s complete UI pages (login, registration, password reset) for quick integration. Only supports Vue 3 framework. The instance also includes all methods available in API mode (such as getToken, setLocale, etc.).

1. Preparation

Create an application in the RootAuth Console and copy the app_id (format: app_******).

2. Prerequisite

Please add the following configuration line to the .npmrc file in the project root directory:

@rootauth:registry=http://gitlab.standard-software.co/api/v4/projects/12421/packages/npm/

3. Install Dependencies

4. Create an Instance and Mount Routes

In the entry file main.js:

// main.js
import type { Router, RouteRecordRaw } from 'vue-router'
import { RootAuthClient, type RootAuthClientConfig } from '@rootauth/vue'

const options: RootAuthClientConfig = {
    app_id: 'app_******', // Required: app_id generated from the workspace
}
const client = new RootAuthClient(options)
client.install(router)

4.1 Complete Configuration Options

Vue Mode supports the following specific parameters:

interface RootAuthClientConfig {
  app_id: string // Required: obtained from the workspace application configuration
  /** Base path for routes in hosted mode, e.g., '/auth' results in routes like /auth/login, /auth/register, /auth/reset-password, etc.; if omitted, routes start from site root / */
  base_path?: string
  api_base_url?: string // Backend API endpoint path, defaults to https://rootauth-api.rootauth.com
  redirect_uri?: string // Redirect path after successful login, defaults to location.origin
  state?: string // Custom parameter, returned as-is by the API
  locale?: string // Current language, defaults to zh-CN; currently supports zh-CN, en-US
  scope?: string[]  // Scope mapping, defaults to ['openid']; add fields like email, username here to retrieve avatar, username, etc.
  grant_type?: string // Authorization mode, defaults to authorization_code
  enable_google_one_tap?: boolean // Enable Google One Tap login, defaults to false
  /** Hosted mode login success callback; returns false to prevent default redirect */
  onLoginSuccess?: LoginSuccessCallback;
  /** Hosted mode registration success callback; returns false to prevent default redirect */
  onRegisterSuccess?: RegisterSuccessCallback;
}

5. View Merged Routes

6. Unmount the SDK

When authentication features are no longer needed, you can manually unmount to free memory:

client.unmount()

7. Google One Tap Login

You need to enable the enable_google_one_tap: true option when creating the instance.

const options: RootAuthClientConfig = {
  app_id: 'app_******', // Required: app_id generated from the workspace
  enable_google_one_tap: true // Set to true to enable One Tap login
}
const client = new RootAuthClient(options)

client?.googleOneTapLogin()

8. Other Methods

The client instance in Vue Mode also supports the following methods (usage is the same as in API mode):

Method	Description
`client?.getAppConfig()`	Get application configuration
`client?.logout()`	Log out and clear the token
`client?.getToken()`	Get the current token
`client?.isAuthenticated()`	Check whether the user is logged in
`client?.setLocale('en-US')`	Switch language (zh-CN / en-US)

API Mode Integration

React Mode Integration

Last modified: 2026-06-10Powered by

Outline