Vue Mode Integration

@rootauth/vue provides complete hosted authentication pages for Vue 3. It includes the RootAuth Core API, page UI, styles, and routing integration.

Preparation

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

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/

1. Installation

npm install @rootauth/vue vue vue-router

Requires Vue ^3.4.0 and Vue Router ^4.3.0.

2. Initialization

RootAuthClient accepts API, application, OIDC, Hosted-path, and success-callback options. The resulting client can register routes or mount directly into a DOM container.

import { RootAuthClient } from '@rootauth/vue'

export const rootAuth = new RootAuthClient({
  app_id: 'your-app-id',
})

3. Configuration

The configuration object controls the application ID, API URL, redirect URI, route prefix, locale, and login or registration success behavior.

4. Vue Router Integration

Calling install(router) adds login, registration, and password-reset routes to an existing Vue Router while avoiding duplicate registration.

import { createRouter, createWebHistory } from 'vue-router'
import { rootAuth } from './rootauth'

const router = createRouter({
  history: createWebHistory(),
  routes: [],
})

rootAuth.install(router)

The SDK registers Hosted routes according to base_path and avoids adding duplicate route names. With base_path: '/auth', the routes are:

Login and registration methods are controlled by RootAuth application settings rather than a client type option. Pages display enabled email/password, email/code, phone/password, phone/code, or username/password methods.

To obtain route records before merging them yourself:

const sdkRoutes = rootAuth.getSdkRoutes()

5. Callback Example

onLoginSuccess and onRegisterSuccess receive successful results and can override default navigation. Returning false stops subsequent SDK navigation.

const rootAuth = new RootAuthClient({
  app_id: 'your-app-id',
  onLoginSuccess(data) {
    console.log('Login succeeded', data)
    return false
  },
  onRegisterSuccess(data) {
    console.log('Registration succeeded', data)
  },
})

6. Core API

The Vue client inherits Core API capabilities and can call login(), sendCode(), register(), resetPassword(), verifyLoginMfa(), logout(), and third-party login methods directly. The package also re-exports @rootauth/core types and helpers.

9. Related Modes

• @rootauth/core: API without UI
• @rootauth/web-components: Framework-independent form components
• @rootauth/react: Complete React 18+ Hosted pages