Installation
Simply runnpm install @rownd/vue
or yarn add @rownd/vue
.
This plugin only works with Vue 3 and above! If you need support for Vue 2,
please get in
touch.
Usage
The library provides a Vue plugin and injector hook for Vue-based apps. In your app’s main entrypoint, install the Rownd plugin like in the following example:Plugin options
-
appKey
(required): This is the key generated by the Rownd dashboard. -
rootOrigin
(optional): If you’re using Rownd across multiple domains (e.g.,rownd.io
andapp.rownd.io
), set this to the “root” origin (e.g., https://rownd.io).
API reference
Most API methods are made available via the Rownd plugin and its associateduseRownd
injector. Javascript will be used for most examples, but these should
work with Vue directives as well.
requestSignIn()
Trigger the Rownd sign in dialog. This can be used from a link/button or
programmatically, if you wanted to allow a user to use parts of your app without
signing in, but then trigger the sign-in prior to them doing something
important.
-
auto_sign_in: boolean
- whentrue
, automatically trigger a sign-in attempt ifidentifier
is included or an email address or phone number has already been set in the user data. -
identifier: string
- an email address or phone number (in E164 format) to which a verification message may be sent. If the Rownd app is configured to allow unverified users, then sign-in will complete without verification if the user has not signed in previously.
waitForToken: boolean
- whentrue
, if no access token is present or if it’s expired, the promise will not resolve until a valid token is available. While unlikely, this could result in waiting forever.
is_initializing
will be true
until the Hub has fully loaded, recalled its
state, and resolved the current user’s authentication status. This usually takes
only a few milliseconds, but if you make decisions that depend on the
is_authenticated
flag while is_initializing
is still true
, your code/logic
may not work as you expect.
first_name
in a form field, and then immediately sync changes
to Rownd as the user updates the form field.