Interface: VueReActiveRecordPlugin

Core plugin class that manages the Vue ReActiveRecord integration and database lifecycle.

Remarks

This class handles the complete lifecycle of the Vue ReActiveRecord plugin, including:

• Environment Detection: Automatically detects SSR vs. browser environments
• Database Management: Manages the ReactiveDatabase instance or SSR stubs
• Plugin Installation: Provides Vue plugin interface via install() method
• Options API Support: Optional mixin for Vue 2/3 Options API compatibility
• DevTools Integration: Automatic setup of Vue DevTools support

The plugin starts with SSR-safe stub implementations and automatically upgrades to real database functionality when running in a browser environment.

Examples

// Basic plugin installation
import { createApp } from "vue";
import VueReActiveRecord from "@nhtio/vue-re-active-record";

const app = createApp({});
app.use(VueReActiveRecord, {
  models: {
    user: {
      schema: "++id, name, email, created_at",
      primaryKey: "id",
    },
  },
});

// With Options API and DevTools support

app.use(
  VueReActiveRecord,
  {
    models: {
      user: {
        schema: "++id, name, email",
        primaryKey: "id",
      },
    },
  },
  {
    useOptionsAPI: true,
    useDevTools: true,
  },
);

See

• VueReActiveDatabaseOptions for configuration options
• VueReActivePluginOptions for plugin installation options

Accessors

database

Get Signature

get database(): ComputedRef<VueReActiveRecordInstance>;

Returns a computed ref to the current database instance (SSR stub or real database).

Returns

ComputedRef<VueReActiveRecordInstance>

The current database instance

---

ready

Get Signature

get ready(): boolean;

Indicates whether the database is ready for use (real database loaded in browser context).

Returns

boolean

True if the database is ready, false otherwise

Lifecycle

awaitPluginInit()

awaitPluginInit(): Promise<void>;

Waits for the plugin to finish initializing the real database in a browser context.

Returns

Promise<void>

A promise that resolves when the real database is ready for use.

Remarks

This is useful for code that needs to ensure the real database is ready (not just the SSR stub) before proceeding. In SSR or if the database is already ready, this resolves immediately.

Example

// Wait for the real database to be ready before running queries
await awaitPluginInit();
const users = await useReActiveModel("user").all();

Methods

useReActiveDatabase()

useReActiveDatabase(): VueReActiveRecordInstance;

Returns the current database instance (SSR stub or real database).

Returns

VueReActiveRecordInstance

The current database instance

---

useReActiveModel()

useReActiveModel<T>(modelName: Extract<T, string>): ReactiveModelConstructor<any, any, string, Record<string, RelationshipConfiguration>, Required<
  | {
}
| undefined>>;

Returns the model constructor for the given model name from the current database instance.

Type Parameters

Type Parameter	Description
T extends string | number | symbol	The key of the model in your VueReActiveRecordTypes.ObjectMap.

Parameters

Parameter	Type	Description
modelName	Extract<T, string>	The name of the model to retrieve

Returns

ReactiveModelConstructor<any, any, string, Record<string, RelationshipConfiguration>, Required< | { } | undefined>>

The model constructor for the given model name

Throws

If the model is not found in the database instance

Other

initialize()

initialize(configuration: Partial<VueReActiveDatabaseOptions>): void;

Internal

Initializes the plugin with the provided configuration, switching from SSR stub to real database in browser context.

Parameters

Parameter	Type	Description
configuration	Partial<VueReActiveDatabaseOptions>	Database configuration options

Returns

void

---

install()

install(
   app: App,
   configuration: Partial<VueReActiveDatabaseOptions>,
   options: VueReActivePluginOptions): void;

Installs the Vue ReActiveRecord plugin into a Vue application.

Parameters

Parameter	Type	Description
app	App	The Vue application instance to install the plugin into
configuration	Partial<VueReActiveDatabaseOptions>	Database configuration options for models, schema, and relationships
options	VueReActivePluginOptions	Plugin installation options including Options API and DevTools support

Returns

void

Remarks

This method handles environment-specific installation:

• Browser Environment: Initializes the real ReactiveDatabase with IndexedDB
• SSR Environment: Uses stub implementations for safe server-side rendering
• DevTools: Automatically sets up Vue DevTools integration (enabled by default)
• Options API: Optionally applies Vue 2/3 Options API mixin for $reactiveDatabase and $useReActiveModel

Throws

Warns if the plugin is already installed

See

• VueReActiveDatabaseOptions for configuration details
• VueReActivePluginOptions for installation options

---

mixin()

mixin(app: App, configuration: Partial<VueReActiveDatabaseOptions>): void;

Applies the Options API mixin to the Vue app, enabling $reactiveDatabase and $useReActiveModel in Options API components.

Parameters

Parameter	Type	Description
app	App	The Vue application instance
configuration	Partial<VueReActiveDatabaseOptions>	Optional database configuration

Returns

void

Remarks

This is useful for supporting legacy Vue 2/3 Options API components.

Throws

Warns if the mixin is already applied